Choose one complete FAQ interaction
Start from the published service page and pick an answer with a useful next action, such as photo instructions. Identify the header, answer panel and any link inside it. Test opening the answer, following or reaching its link, returning and closing the panel.
Record the component and starting state. A single successful mouse click does not establish that the complete task works with a keyboard or assistive technology.
Verify the header name and announced state
W3C's accordion pattern uses a button within an appropriate heading, with expanded or collapsed state exposed to assistive technology. Ask the maintainer to inspect the actual component rather than adding visual arrows alone. The header name should identify the question and its relationship to the answer.
Keep essential scope and approval conditions in the visible decision path. Supplementary answers can still use an accordion when the component itself is usable.
Test activation using expected keys
Use the keyboard from the service page. Reach the FAQ header, identify focus and activate it using the component's expected keys. The W3C accordion pattern describes Enter and Space for activation and Tab or Shift+Tab for moving between focusable items. Verify the implementation you actually publish.
Record which action fails so the maintainer can reproduce it. Avoid assigning arbitrary positive tab-order values to disguise an underlying control problem.
- Tab to a clearly named FAQ header and confirm its focus indicator is visible.
- Activate the header and check that the associated answer opens.
- Verify the expanded state is communicated through an appropriate assistive-technology test.
- Reach useful links in the open answer and return to the header using a meaningful sequence.
- Collapse the answer and check that hidden-panel controls no longer appear in the active task path.
Check the closed panel as well as the open one
A panel that looks closed may still leave its links focusable or its content exposed inconsistently. Ask the maintainer to use the supported hide/show behavior so the visual and accessible states agree. Test after closing rather than inspecting only the attractive expanded design.
Do not assume that adding an accessibility attribute repairs everything. The name, state, associated panel and actual operating behavior need to describe the same component.
Inspect focus across multiple panels
Open a second question and observe whether the first remains open or closes. Either model can be understandable when the component consistently communicates its behavior. Check that opening an answer does not send focus to unrelated navigation, and that closing it leaves a useful way to continue.
If a control inside a panel can close that panel, verify where focus goes afterward. Record confusing jumps and trapped sequences rather than only counting reachable headers.
Retain a reproducible component test
Write the tested questions, starting states, input methods and expected actions in the maintenance note. Repeat the sequence after replacing the FAQ component or adding links to an answer. Keep essential service information separate from this technical acceptance record.
The test identifies specific interaction faults. It does not certify every aspect of the page or prove that using accordions increases enquiries or affects search rankings.
Worked example: illustrative photo-instructions accordion
For example, a repair page has a 'Which photos help with an estimate?' header and a link in its answer. Keyboard activation opens the panel, but the component does not expose its expanded state. After collapse, the hidden link remains in the tab sequence.
The maintainer repairs the supported button/state and panel behavior. A repeat test opens the answer with the keyboard, announces its state, reaches the photo link and returns to collapse it; the hidden link is no longer reached afterward. Essential assessment conditions remain visible beside the quote route. This demonstrates the tested component states, not an accessibility certification.
An FAQ test includes its closed state
Named header
Reach it with visible focus
Open answer
Activate and announce expanded state
Use the link
Meaningful route through the answer
Close answer
Collapsed state and hidden links agree
Illustrative photo-instructions component is checked for button activation, announced state, usable links and complete collapse.
Your practical checklist
- Choose an answer with a useful interactive element.
- Check the header's clear name and appropriate heading context.
- Test expected activation keys and visible focus.
- Verify expanded and collapsed state announcements.
- Reach open-panel links in a meaningful sequence.
- Check that closed-panel controls are not left active.
- Retest after component or answer-link changes.
Your next action
Run the open/link/return/collapse sequence on one published FAQ and record both the visual and announced states.
Questions about this task
Should opening an answer automatically move focus into it?
Do not add an unexplained jump. Use behavior appropriate to the component and verify that the customer can reach the answer's useful actions in a meaningful sequence.
Can multiple answers remain open?
Yes. Test the actual model consistently, including state announcements and keyboard movement. A one-open-panel design also needs its closing behavior checked.
Sources and editorial notes
Prepared with AI-assisted research. Official sources are linked below; worked examples and checklists are Getting Found Local recommendations, not measured client outcomes.
Sources checked October 13, 2026. Platform interfaces and local resources may change; follow the current instructions on the linked official page.
How we research, illustrate, and update these guides · Suggest a correction