non-interactive-in-focus-sequence
Elements that do not allow any user interaction should not receive focus.
Description
When an element gets the page focus, it signals to users (mostly keyboard users) that it is now ready to receive events to trigger its action, whether triggering an action or scrolling content. When a non-interactive element receives focus, it may confuse or frustrate users who may not understand why it is not performing any action.
There are specific cases where a non-interactive element can receive the focus, like if it is used, for example, as an anchor for a skip link. However, in such cases, the element still shouldn't be a part of the page's focus sequence. In such cases, the element should be able to receive focus only programmatically (e.g., by a link or a script that sets the focus).
You can do that by changing the value of the tabindex attribute to "-1".
If the element was intended to be interactive, it must have the appropriate semantics to support it.
For more information, see Interactable Role.
Quick Fixes
Ensure that only interactive elements are in the focus sequence.
That includes any element that requires or allows user interaction, whether a click, keystroke, or scroll.
Non-interactive elements that have to get focus, like page anchors and modal windows, should have tabindex="-1".
1✓ <main tabindex="-1">2 <!-- The page's main content -->3 </main>45✓ <h2 tabindex="-1"> Some section heading </h2>
1✗ <main tabindex="0">2 <!-- The page's main content -->3 </main>45✗ <h2 tabindex="0"> Some section heading </h2>
How Users Are Affected
Keyboard users may get confused and even frustrated that an element that appears functional does not respond to keyboard events. Users may interpret this situation as a bug, which may cause them to abandon the page before completing the task for which they entered the page or the application.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and Relationships (A)