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 — Keyboard focus is visible on every interactive element

What the theme guarantees

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

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

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.

@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

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.

Testing your own store

Run the Lighthouse accessibility audit

It catches contrast, labels and landmark problems automatically.

Tab through your homepage

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

Turn on a screen reader

On Windows, the free Narrator shortcut is Ctrl + Win + Enter.

Check with reduced motion enabled

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

Performance

The engineering that keeps the score high.

SEO

Technical SEO handled by the theme.

Getting Started

Theme Configuration

Sections & Blocks

Features

Going Further

Resources

Accessibility

Accessibility

What the theme guarantees

Keyboard navigation

Screen readers

Contrast

Motion preferences

Touch targets

Forms

What you are responsible for

Testing your own store

Performance

SEO

​Accessibility

​What the theme guarantees

​Keyboard navigation

​Screen readers

​Contrast

​Motion preferences

​Touch targets

​Forms

​What you are responsible for

​Testing your own store

Performance

SEO

Accessibility

What the theme guarantees

Keyboard navigation

Screen readers

Contrast

Motion preferences

Touch targets

Forms

What you are responsible for

Testing your own store