focus-order-semantics

Elements added to the tab order should have interactive semantics

manualconfidence: mediumseverity: minoroperable

Flags elements with tabindex >= 0 whose explicit role is a non-interactive structural/document role (e.g. heading, list, region, 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 is one of a curated set of clearly non-interactive, structural/document roles.

Expectation. An element placed in the tab order on purpose should communicate why it's focusable: a role like `heading`, `list`, `region`, 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.

Examples

can't tell
<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.

n/a
<div role="button" tabindex="0">Real custom button</div>

`role="button"` is an interactive role, so being tabbable is expected.

View source