Accessibility

The storefront accordion has been audited against WCAG 2.1 Level AA and conforms to the relevant success criteria. The module handles the semantics, focus indicator, and ARIA relationships automatically. Content editors are responsible for the accessibility of answer HTML they author.

What the module guarantees

The accordion follows the WAI-ARIA APG Accordion Pattern and meets these WCAG 2.1 Level AA criteria:

• 1.3.1 Info and Relationships. Each question button is wrapped in a semantically appropriate heading (<h3> under the section’s <h2>). Each answer panel is a labelled region (role="region" + aria-labelledby pointing to its question button’s id).
• 1.4.11 Non-text Contrast. Keyboard focus outline renders at approximately 4.8:1 contrast on white (#b45309, 2px solid, 2px offset), clearing the 3:1 minimum for non-text UI components.
• 2.1.1 Keyboard. All interactions use native <button> elements, so Tab/Shift+Tab and Enter/Space work without custom key handlers. No keyboard trap.
• 2.4.6 Headings and Labels. FAQ heading and tab label are store-configurable. If an admin clears the tab label, the template falls back to the layout-supplied “FAQs” default so the tab control is never unnamed. Section heading falls back to an aria-label derived from the configured tab title or the localised “Frequently Asked Questions” string when the visual heading is hidden.
• 4.1.2 Name, Role, Value. Every interactive control has a programmatic name and role. aria-expanded is always set to an explicit "true" or "false" string, updated on every toggle.

Because the question buttons are true headings, screen reader users can jump between FAQ entries using heading-list shortcuts (H key in JAWS, VO-Cmd-H in VoiceOver, etc.).

What you as a content editor are responsible for

The WYSIWYG answer editor lets you insert headings, links, images, and rich formatting. The module renders those verbatim, so accessibility within the answer body is controlled by you.

Practical guidelines:

• Do not start an answer with an <h1> or <h2>. The FAQ question itself is an <h3>, so use <h4> or lower for sub-headings inside an answer.
• Link text should describe the destination. “See our shipping policy” is better than “Click here”.
• Fill in the Alt Text field for images. If you paste images, the image dialog in the WYSIWYG editor has an Alt Text field. Use it.
• Do not use colour alone to convey meaning. Red-only warning text, for example, is inaccessible to users with colour vision deficiencies.

What is not covered

Animation and reduced motion (WCAG 2.3.3 is AAA). The expand/collapse slide animation does not respect prefers-reduced-motion. Stores pursuing AAA conformance should override the faqAccordion widget to disable the animation when the media query is set.

Admin-authored HTML inside answers. The module cannot validate heading order, link accessibility, or colour contrast inside answers authored via the WYSIWYG editor. The editorial guidelines above apply.

Configuration behaviour to be aware of

Clearing the FAQ Tab Title admin field does not produce an unnamed product tab. The tab falls back to the default “FAQs” label. You can customise the label per store view, but you cannot accidentally ship an unnamed tab control. See System Settings for the full list of display settings.