Accessible Tabs & Accordions

Tabs show one content panel at a time, while accordion headings let people reveal or hide sections. Both need clear buttons, keyboard controls, and information that tells assistive software which content is selected or expanded. Try moving through one example with your keyboard and checking which content appears.

Tabs and accordions organize content differently. Tabs display one associated panel at a time; accordion headings control expandable sections, and an implementation may allow several sections to remain open. As a hypothetical example, an account page could use tabs for Overview and Transactions, while a form could use an accordion for expandable address sections. Decide which behavior fits the content before building the controls. [1][2]

ARIA, short for Accessible Rich Internet Applications, provides roles, states, and relationships that describe interface elements to assistive technology, including screen readers. For tabs, the container needs the tablist role, each control the tab role, and each content section the tabpanel role. Give the tab list a label. Each tab uses aria-controls to identify its panel, and each panel uses aria-labelledby to identify its tab. HTML buttons alone do not implement this complete tab pattern. [1]

Keyboard focus is the element currently targeted by keyboard input; selection identifies the tab whose panel is displayed. Tab enters the tab list at the active tab, then leaves it for the next element in the page's keyboard sequence. Left and Right Arrow move focus between horizontal tabs, wrapping at either end. Vertical tabs use Up and Down Arrow instead; horizontal tabs leave those keys available for browser scrolling. If a panel has no focusable content, or its first meaningful content is not focusable, give the panel tabindex="0" so Tab can reach it. [1]

With manual activation, moving focus between tabs does not change the displayed panel until the user presses Space or Enter. With automatic activation, receiving focus also selects the tab and displays its panel. The active tab has aria-selected="true"; the others have aria-selected="false". APG recommends automatic activation only when panels display without noticeable latency, typically requiring preloaded content. Otherwise, loading each panel can slow movement through the tab list. [1]

For an accordion, place each header button inside an appropriately ranked heading, with the button as that heading's only element. Set aria-controls to identify its panel and aria-expanded to reflect whether the panel is visible. Enter or Space expands a collapsed panel and collapses an expanded panel when collapsing is supported. If an expanded panel cannot be collapsed, its button has aria-disabled="true". Tab and Shift+Tab move through the accordion's focusable elements in page order; they do not substitute for the arrow navigation within a tab list. [2]

An accordion panel may optionally have the region role and a label referring to its header button. A region is a landmark: a named section that screen reader users can navigate to. Avoid creating too many such landmarks, particularly when more than approximately six panels can be expanded together. In a hypothetical pricing accordion with eight expanded, labeled regions, a screen reader setup that exposes those landmarks can offer each panel as a separate navigation destination. This illustrates a structural tradeoff, not a measured usability outcome. [2]

• Official guidance, not an empirical study: the Tabs Pattern distinguishes moving keyboard focus from activating a tab. Arrow keys move between tabs; Space or Enter activates a tab when activation does not happen automatically on focus. Tab enters or leaves the tab list rather than moving through every tab. [1]
• Official guidance: automatic tab activation is recommended when panels appear without noticeable latency, typically with preloaded content. The document explains that otherwise automatic activation slows focus movement and hampers efficient navigation through the tab list. It supplies no numerical study outcome. [1]
• Official guidance: accordion header buttons communicate visibility through aria-expanded and identify their panels through aria-controls. Enter or Space operates the focused header, while Tab and Shift+Tab follow the page's sequence of focusable elements. The supplied Accordion Pattern does not specify arrow-key navigation between headers. [2]
• Official guidance: labeled region roles on accordion panels are optional. APG advises avoiding excessive landmarks, giving more than approximately six simultaneously expandable panels as an example. It also identifies panels with headings or nested accordions as cases where regions can help communicate structure. [2]

These two sources provide implementation guidance, not empirical comparisons, numerical usability results, or a guarantee of accessibility conformance. Keep claims within that scope.

Manual and automatic tabs require different checks: in manual tabs, focus can move while selection stays unchanged; in automatic tabs, focus also changes selection. Check the actual delay before choosing automatic activation. Complex content alone does not establish that a panel will be slow. [1]

Accordion behavior depends on whether multiple panels may remain open and whether an expanded panel may close. Keep the controls and their reported states consistent with those choices. The landmark warning concerns panels that can be expanded together; approximately six is guidance, not a universal pass-or-fail threshold. [2]