Accessibility

Themes should meet WCAG 2.2 AA in both languages. Check each template with a keyboard, a screen reader (VoiceOver or TalkBack) and an automated checker.

Checklist

Structure

• One <h1> per page; headings in order.
• Landmarks: <header>, <nav aria-label>, <main id="MainContent">, <footer>.
• A “skip to content” link first in the body.
• lang and dir on <html>; lang on text in another language (a language selector, an English brand name on an Arabic page).

Keyboard

• Everything works with the keyboard; focus order follows reading order.
• A visible focus outline on every control (don’t remove it; restyle it).
• Drawers and dialogs trap focus while open, close on Esc and return focus to the button that opened them.

Images and media

• Meaningful images have alt (image_tag uses the image’s alt text; pass alt: to override). Decorative images use alt="".
• Videos don’t autoplay with sound and can be paused.

Forms

• Every input has a <label>; errors are text, linked with aria-describedby, and announced (role="alert").
• autocomplete on name, email, phone and address fields; inputmode="numeric" on number-only fields.

Colour

• Text contrast at least 4.5:1 (3:1 for large text and icons). Check every colour scheme.
• Don’t rely on colour alone: a sale price also says “Sale”, an error also has an icon or text.

Products

• Variant pickers are radio groups (<fieldset> and <legend>) or <select>, not clickable <div>s.
• Sold-out options are announced, not only greyed out.
• Price changes after a variant change are announced (aria-live="polite").

Motion

• Respect prefers-reduced-motion: no parallax, sliding or auto-advancing slideshows for those users.

Touch targets should be at least 24 × 24 px (44 × 44 px is better on phones).