Product quiz field guide # Product recommendation quiz accessibility checklist A practical WCAG-aligned checklist for testing labels, answer groups, progress, validation, keyboard operation and recommendation results. 24 August 2026·Product Quiz Guide 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 AreaCheckPass evidenceStructureOne clear heading names the quiz or current stepHeading is visible and exposed in the accessibility treeStructureRelated answers form one named groupNative fieldset and legend, or an equivalent programmatic groupLabelsEvery control has a discernible nameVisible label activates the associated controlLabelsInstructions do not rely on placeholdersFormat, required state and examples remain visibleProgressCurrent and total steps are stated in textFor example, Question 3 of 7ProgressOptional stages are identifiedSkip control is keyboard reachable and clearly namedKeyboardAll answers and navigation controls work without a pointerLogical Tab order, arrow-key behavior for radios, visible focusKeyboardNo keyboard trapFocus can enter and leave embeds, dialogs and resultsVisualText and controls meet contrast requirementsNormal, hover, focus, selected and disabled states checkedVisualSelection is not indicated by color aloneText, checkmark, border shape or native state also changesZoomThe flow works at 200% zoom and narrow widthsNo clipped controls or two-dimensional scrolling for questionsMotionAnimations respect reduced-motion preferencesEssential content does not depend on motionErrorsErrors identify the field and explain the fixMessage is visible, programmatically associated and announcedErrorsValid prior answers survive an errorUser corrects only the failing fieldFocusFocus follows replaced contentNext question or result heading receives sensible focusResultThe recommendation is announced and understandableProduct or plan name, reason and next step are textResultNo-match and loading states are announcedStatus text is not visual-onlyRetakeBack and restart behavior is predictableAnswers 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](https://www.w3.org/WAI/tutorials/forms/) - [W3C, Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/) - [W3C, Multi-page Forms](https://www.w3.org/WAI/tutorials/forms/multi-page/) - [W3C, Validating Input](https://www.w3.org/WAI/tutorials/forms/validation/) - [W3C, How to Meet WCAG 2.2](https://www.w3.org/WAI/WCAG22/quickref/) 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](https://bestproductquiz.com/blog/shopify-product-quiz-checklist) or compare [builder capabilities](https://bestproductquiz.com/#comparison). Corrections: send the page URL, the exact statement and a current source through the [contact form](https://bestproductquiz.com/contact). [Compare the eight product recommendation quiz builders](https://bestproductquiz.com/#comparison) or read the [full testing protocol](https://bestproductquiz.com/how-we-test). --- Canonical: https://bestproductquiz.com/blog/product-quiz-accessibility