Navigation
Accessible tab interfaces: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Tabs switch among associated panels within a single interface. Implement a coherent tablist, selected tab and panel relationship, with keyboard movement and activation matching the chosen automatic or manual model.
A practical example
A component guide has Example and Code tabs. Arrow keys move between the tabs, the selected state follows the model, and only the active panel is presented as current content.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
Arrow keys change tabs; Tab moves to the selected panel.
How to check it
- Enter the tablist with Tab and use arrows, Home and End as supported by the pattern.
- For manual activation, use Enter or Space and check that focus and selection are distinct until activation.
- Verify aria-selected, tab/panel associations and access to the active panel's contents.
What can be missed
Putting role="tab" on several ordinary navigation buttons does not implement tabs. Slow-loading panels usually need manual activation to avoid a delay on every arrow-key move.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<div role="tablist" aria-label="Component view">
<button role="tab" id="example-tab" aria-selected="true" aria-controls="example-panel">Example</button>
<button role="tab" id="code-tab" aria-selected="false" aria-controls="code-panel" tabindex="-1">Code</button>
</div>
<section role="tabpanel" tabindex="0" id="example-panel" aria-labelledby="example-tab">Example content</section>
<section role="tabpanel" tabindex="0" id="code-panel" aria-labelledby="code-tab" hidden>Code content</section>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.