> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility

> How VARAHI handles keyboard navigation, screen readers, contrast, motion preferences and touch targets.

# Accessibility

VARAHI scores **97** on Lighthouse's accessibility audit, and the remaining points are
merchant content, not theme code. This page explains what the theme guarantees, so
you do not undo it.

![Focus states](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/accessibility-focus.png)

Keyboard focus is visible on every interactive element

***

## What the theme guarantees

### Keyboard navigation

| Component | Behaviour |
| - | - |
| Skip to content link | The first focusable element on every page, visible on focus |
| Cart drawer | Focus trap, Escape to close, focus returns to the trigger |
| Search modal | Focus moves to the input, arrow keys navigate results, Escape closes |
| Mobile drawer | Focus trap, Escape closes, body scroll is locked |
| Mega menu | Opens on click as well as hover, so it is reachable by keyboard |
| Localisation menus | Escape and outside-click both close, focus returns to the trigger |
| Localisation selects | Native `<select>` elements — full keyboard and screen-reader support |

### Screen readers

| Element | Implementation |
| - | - |
| Cart changes | A polite live region announces item counts |
| Icon-only buttons | Every one has an `aria-label` |
| Decorative elements | `aria-hidden="true"` — glows, rings, blurs, dividers |
| The icon font | `aria-hidden="true"` on every icon span, so ligature words are never read aloud |
| Headings | One `h1` per page, no skipped levels |
| Landmarks | `header`, `nav`, `main`, `footer`, `aside` used correctly |

> [!WARNING]
>
> **Icon-only buttons need labels.** If you add a button with only an icon inside it,
> add an `aria-label`. A screen reader will otherwise announce nothing, and the button
> will be unusable.

### Contrast

The default palette is checked against WCAG AA for body text. Two pairs are the ones
you can break by changing colours:

| Pair | Minimum ratio |
| - | - |
| Text on your primary container | 4.5 : 1 |
| Body text on your background | 4.5 : 1 |

> [!WARNING]
>
> Changing the primary or background colour is the one theme action that can break the
> contrast audit. After changing them, run Lighthouse and check the contrast audit —
> it is the first thing to fail.

### Motion preferences

Every animation in the theme sits inside a `prefers-reduced-motion` guard. A shopper
who has asked their operating system to reduce motion gets a static theme with no
transitions, no parallax, and no drifting device mockups.

```css theme={"system"}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

### Touch targets

| Element | Size |
| - | - |
| Header icon buttons | 32px visual, 44px touch area |
| Buttons in sections | 44px minimum height |
| Quantity steppers | 44px minimum |
| Carousel and swipe targets | 44px minimum |

> [!NOTE]
>
> The 44px figure is the WCAG 2.2 target-size guideline. On mobile VARAHI tightens
> the *visual* size of header icons to fit more of them on the bar, but the hit area
> stays at 44px.

### Forms

| Field | Implementation |
| - | - |
| Labels | Every input has an associated `<label>` |
| Error messages | `aria-describedby` links the error to the field |
| Required fields | Marked with `required` and `aria-required` |
| Live regions | Form and cart status changes are announced politely |

***

## What you are responsible for

The theme cannot fix merchant content.

**All images have meaningful alt text**

Decorative images should have empty alt (`alt=""`) so they are skipped.

**Heading levels are sequential**

The theme provides the structure; your copy provides the levels.

**Your colour choices still pass contrast**

**Video has captions**

VARAHI renders a native `<track>` element when you provide one.

**Link text makes sense out of context**

Screen reader users navigate by pulling up a list of every link on the page.

***

## Testing your own store

**1. Run the Lighthouse accessibility audit**

It catches contrast, labels and landmark problems automatically.

**2. Tab through your homepage**

Without a mouse. Every interactive element should receive a visible focus ring.

**3. Turn on a screen reader**

On Windows, the free Narrator shortcut is <kbd>Ctrl</kbd> + <kbd>Win</kbd> +
<kbd>Enter</kbd>.

**4. Check with reduced motion enabled**

Windows: **Settings → Accessibility — Visual effects — Animation effects**.

***

> **[Performance](https://varaahi.vritservicespro.com/going-further/performance.md)**
>
> The engineering that keeps the score high.

> **[SEO](https://varaahi.vritservicespro.com/going-further/seo.md)**
>
> Technical SEO handled by the theme.


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