focus-order-semantics
Elements added to the tab order should have interactive semantics
Flags elements with tabindex >= 0 whose explicit role is a non-interactive structural/document role (e.g. heading, list, note, presentation), for manual review.
Applies to. Elements with an explicit tabindex of 0 or greater (in the tab order) AND an explicit role attribute that resolves to one of a curated set of clearly non-interactive, structural/document roles. The attribute is a fallback list: its first known, non-abstract token, in any case, is the role (role="foo HEADING" is a heading, role="foo" is no role).
Expectation. An element placed in the tab order on purpose should communicate why it's focusable: a role like heading, list, note, or presentation gives assistive technology no interactive semantic to announce, which is confusing for keyboard users who land on it and get no indication of what activating it (if anything) would do.
What a finding reports.
tabindex: the element'stabindex, as a number (0 or greater).role: the non-interactive role the element carries.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<div role="heading" tabindex="0">Fake focusable heading</div>
A heading role has no interactive behavior, so making it tabbable is unusual and worth a look.
<div role="button" tabindex="0">Real custom button</div>
role="button" is an interactive role, so being tabbable is expected.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
TABBABLE_WITH_NON_INTERACTIVE_ROLE
- Press Tab until focus reaches the element the report names and listen with a screen reader, or read its role in the Accessibility pane.
- Find out why it is focusable: does it scroll (its content overflows and arrow keys scroll it), or does it do something when clicked or when Enter or Space is pressed?
- If it acts as a control, compare the announced role with what it does.
Pass. The element is focusable for a reason its role supports, such as a scrollable region a keyboard user needs to scroll, and does not act as a control.
Fail. The element acts as a control (it opens, toggles or navigates) but is announced with a non-interactive role such as heading or list, so keyboard users are not told what it does; a best-practice miss related to WCAG 4.1.2. If it does nothing and does not scroll, it is a needless tab stop.