> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility

> What the theme does for accessibility, and how to keep it that way.

# Accessibility

Vara SaaS is officially marked **Accessibility-Ready** in the [WordPress.org](http://WordPress.org) theme directory, having successfully passed the official Theme Review Team’s accessibility audits. Version 1.0.7 serves as a dedicated remediation release, fine-tuning contrast ratios, focus states, and semantic markup for complete WCAG compliance.

**Accessibility-ready is a floor, not a ceiling**

The theme gets the fundamentals right. Whether your site is accessible depends on your content,
your images, your forms, and the plugins you install.

## What the theme implements

### Landmarks and structure

| Feature | Detail |
| - | - |
| **Skip link** | The first focusable element on every page, jumping to `#site-content` |
| **One `main` landmark** | Exactly one per page — a specific fix in 1.0.7 |
| **Semantic regions** | `header`, `nav`, `main`, `footer`, and `aside` used consistently |
| **Valid fallback nav** | A nested list instead of WordPress's orphaned list-item markup |

### Keyboard navigation

| Feature | Detail |
| - | - |
| **Skip link** | `Tab` once from page load reaches it |
| **Submenu state** | `aria-expanded` on items with dropdowns |
| **Escape to close** | Closes an open submenu and returns focus to its parent |
| **Outside-click close** | Clicking away closes the menu |
| **Overflow pills** | Category and tag controls are keyboard operable |
| **Visible focus** | Focus states are styled, not removed |

### Dynamic content

> **Pagination labels**
>
> Screen-reader-only "previous" and "next" text instead of bare arrow glyphs.

> **New tab announcements**
>
> Footer social links announce that they open in a new tab.

> **Icon-only links**
>
> Carry accessible names; decorative icons are hidden from assistive technology.

> **Overflow state**
>
> The "(+N)" controls expose their expanded state and the element they control.

### Typography and contrast

| Feature | Detail |
| - | - |
| **Heading hierarchy** | Corrected across templates in 1.0.7 |
| **Text contrast** | Defaults meet WCAG 2.2 AA |
| **Dark mode contrast** | Tokens remapped rather than filtered |
| **Base font size** | Adjustable 12–48 px, default 16 |
| **Not color-only** | Overflow and active states use more than hue |

## Heading hierarchy

One `h1` per page, descending from there.

| Page | `h1` | Lower headings |
| - | - | - |
| Single post | The post title | `h2` and `h3` in content; table of contents uses `h2` |
| Page | The page title, if shown | Your content headings |
| Blog index | The hero title | `h2` and `h3` in cards |
| Archive | The archive title | `h2` and `h3` in cards |
| Search | The hero title | `h2` and `h3` in cards |

### Color and contrast

> **Required contrast ratios**
>
> | Content | Minimum |
> | - | - |
> | Body text | 4.5:1 |
> | Large text (24px+, or 18.66px bold) | 3:1 |
> | UI components and icons | 3:1 |

> **Check your brand colors**
>
> The defaults pass. Your replacements may not — particularly an accent color used for text. Check body text, muted metadata, and button labels in both light and dark mode.

> **Never rely on color alone**
>
> Active navigation, error states, and required fields need a non-colour cue — an underline, an icon, or text.

Test with a free checker such as WebAIM's contrast tool.

### Forms

The theme styles form fields consistently and provides its own password form for protected posts. Everything else comes from your form plugin.

> [!WARNING]
>
> **Audit your form plugin's markup.** Contact Form 7 generates its own labels and validation messages. Confirm every field has a programmatically associated label, errors are announced, and required fields are marked up as such.

## Test your site for accessibility

### Manual

**1. Tab through your homepage**

The skip link should be the first stop, then header, menu, and content in a logical order.

**2. Test dropdowns with the keyboard only**

Open with Enter or Space, navigate with arrow keys, close with Escape.

**3. Check focus visibility**

At every stop, you must be able to see where you are.

**4. Toggle dark mode**

Confirm contrast holds in both modes.

**5. Test with a real screen reader**

VoiceOver on macOS and iOS, or NVDA on Windows. Even five minutes reveals a great deal.

## Your responsibilities as a site owner

> **Test your pages**
>
> Automated tools on every key page, before launch and after major changes.

> **Write alt text**
>
> On every meaningful image, including in page builders.

> **Check contrast**
>
> Especially any custom brand color used for text.

A theme can make a site accessible. It cannot make the content accessible.

## Related

> **[Colors reference](/customization/colors-reference.md)**
>
> Contrast guidance for every color token.

> **[SEO](/performance/seo.md)**
>
> The substantial overlap between accessibility and SEO.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.