Whole page
Tabs do not work as tabs
WCAG 2.2 success criterion 4.1.2 Name, Role, Value (Level A)
- WCAG 2.2
- 4.1.2 Name, Role, Value
- Also maps to
- 2.1.1 Keyboard
- Level
- A
- Default severity
- Error
- Available in
- Free
Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.
Why does it matter?
Product pages and FAQ blocks often use tabs. When an element says it is a tab list but no tab is marked selected, screen reader users cannot tell which panel is showing; when the arrow keys do nothing, keyboard users cannot switch tabs the way the role promises.
Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.
What does Lumtera flag?
Found by the widget tests (review mode's Keyboard tab, "Test menus and pop-ups"), on elements with role="tablist" (up to ten per page). An error: no tab has aria-selected="true". For review: tabs that do not point at their panel with aria-controls, arrow keys that do not move between tabs, or every tab in the Tab order instead of only the current one.
Check ID page-tabs, as shown in review mode and saved results.
How do I fix it in WordPress?
Follow the ARIA tabs pattern: role="tab" buttons inside a role="tablist", aria-selected="true" on the current tab, aria-controls pointing at its role="tabpanel", tabindex="-1" on the other tabs, and the Left and Right arrow keys to move between them. If a block library or page builder makes the tabs, check for an update or ask its author.
Example
<div role="tablist">
<button role="tab">Details</button>
<button role="tab">Reviews</button>
</div>
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-details">Details</button>
<button role="tab" aria-selected="false" aria-controls="panel-reviews" tabindex="-1">Reviews</button>
</div>
How do I check the fix?
- Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the page passes.
- Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.
Check your pages with Lumtera
This check is free. Open any post, choose Accessibility in the admin bar, then the Keyboard tab: Lumtera numbers every Tab stop and checks the page with the keyboard, theme, menus and footer included, one page at a time. Lumtera Pro's Page checks screen (Lumtera → Checks → Page checks) runs the same menu and pop-up tests on every page you select, at desktop width and, with "Also check at phone width", again at 390 pixels, and saves the results with the page; scheduled checks have no browser, so they do not run them.
Related checks
-
WCAG 2.4.4 · AError
Link has no text
-
WCAG 4.1.2 · ANeeds review
Link does not go anywhere
-
WCAG 4.1.2 · AError
Button has no text
-
WCAG 4.1.2 · AError
Form field has no label
-
WCAG 2.5.7 · AANeeds review
Dragging may be the only way to use this
-
WCAG 4.1.2 · AError
Embedded frame has no title
Start with the free plugin today
All 69 content checks and 33 whole-page checks, fixes you approve with undo, and the site report — free, with no account and no page limits.