Answer: an accessible product recommendation quiz exposes every question, answer, error, progress change and result to keyboard and assistive-technology users without changing the decision they receive. Test the complete path, not only the first question or a static accessibility scan.
What does accessibility mean for a product quiz?
Product quiz accessibility means people can perceive the questions, understand the instructions, operate every control and receive the same meaningful recommendation regardless of input method. The W3C Forms Tutorial applies directly because a quiz is a multi-step form with grouped controls, validation, notifications and progress.
The 18-point test
| Area | Check | Pass evidence |
|---|---|---|
| Structure | One clear heading names the quiz or current step | Heading is visible and exposed in the accessibility tree |
| Structure | Related answers form one named group | Native fieldset and legend, or an equivalent programmatic group |
| Labels | Every control has a discernible name | Visible label activates the associated control |
| Labels | Instructions do not rely on placeholders | Format, required state and examples remain visible |
| Progress | Current and total steps are stated in text | For example, Question 3 of 7 |
| Progress | Optional stages are identified | Skip control is keyboard reachable and clearly named |
| Keyboard | All answers and navigation controls work without a pointer | Logical Tab order, arrow-key behavior for radios, visible focus |
| Keyboard | No keyboard trap | Focus can enter and leave embeds, dialogs and results |
| Visual | Text and controls meet contrast requirements | Normal, hover, focus, selected and disabled states checked |
| Visual | Selection is not indicated by color alone | Text, checkmark, border shape or native state also changes |
| Zoom | The flow works at 200% zoom and narrow widths | No clipped controls or two-dimensional scrolling for questions |
| Motion | Animations respect reduced-motion preferences | Essential content does not depend on motion |
| Errors | Errors identify the field and explain the fix | Message is visible, programmatically associated and announced |
| Errors | Valid prior answers survive an error | User corrects only the failing field |
| Focus | Focus follows replaced content | Next question or result heading receives sensible focus |
| Result | The recommendation is announced and understandable | Product or plan name, reason and next step are text |
| Result | No-match and loading states are announced | Status text is not visual-only |
| Retake | Back and restart behavior is predictable | Answers persist when expected and reset only after confirmation |
A 12-minute manual path
- Load the quiz, put the pointer aside and complete it with keyboard only.
- Repeat at 200% browser zoom and at a 320 CSS-pixel viewport.
- Turn on a screen reader and listen to the quiz title, question group, answer state, progress and result.
- Trigger a required-field error and an invalid email error.
- Use Back, change an earlier answer and confirm the result recalculates.
- Enable reduced motion, then repeat the transition from final answer to result.
Record the browser, operating system, assistive technology, quiz version and date. A pass in one combination is useful evidence, but not proof that every combination works.
Worked markup pattern for one question
A mattress-finder question about sleep position is a related choice set. The question belongs in a legend, each answer uses a native radio input and visible label, and supporting instructions can be associated with the group. Native radios provide expected name, role, state and keyboard behavior without recreating them in script.
Common failures in one-question flows
- Auto-advance moves the page before a keyboard or screen-reader user can confirm the selection.
- A progress bar has no text alternative.
- Clickable image cards are generic links or divs with no control role or selected state.
- The result appears visually, but focus stays on a removed Next button.
- An embedded quiz traps focus or inserts an unexpected second page scroll.
- The optional email step is described as optional visually but announced as required.
Sources
- W3C Web Accessibility Initiative, Forms Tutorial
- W3C, Grouping Controls
- W3C, Multi-page Forms
- W3C, Validating Input
- W3C, How to Meet WCAG 2.2
Method: checklist synthesis from current W3C guidance, applied to the site's skincare ecommerce and B2B plan-matcher paths. Limitation: this is implementation guidance, not a legal compliance opinion or a substitute for testing with disabled users. Next review: March 2027, or after a material WCAG guidance update.
Continue with the Shopify product-finder launch checklist or compare builder capabilities.
Compare the eight product recommendation quiz builders or read the full testing protocol.