non-interactive-in-focus-sequence
Web validation
When a control receives keyboard focus, assistive technology users expect it to do something. If a generic, non-interactive element is in the tab sequence, Tab stops on it but nothing happens, which wastes time and breaks the flow.
This applies to generic elements such as <div>, <span>, and <p>. Headings and landmark regions are allowed in the tab sequence, because their roles can legitimately receive focus. If an element is meant to be operated, give it the correct role instead of just making it focusable.
Note: A scrollable container is an exception. If it has no focusable content inside, keyboard users need to focus the container itself to scroll it, so it can be in the tab sequence. We recommend giving it a role, such as role="region", and an accessible name, so users know what they have reached. See scrollable-region-focusable.
Pass Patterns
Removed from the tab sequence with tabindex="-1"
The heading can take programmatic focus as a skip-link target but stays out of the tab sequence.
<h2 id="main" tabindex="-1">Main content</h2>Never made focusable
The paragraph is plain content with no tabindex, so the keyboard skips over it.
<p class="intro">Welcome. Choose an option below.</p>Scrollable region
The container scrolls, so it is in the tab sequence to let keyboard users scroll it. Its role and name tell users what it is.
<div role="region" aria-label="Terms and conditions" tabindex="0" style="height: 200px; overflow: auto;">
<!-- Long terms and conditions text -->
</div>Fail Patterns
Generic container forced into the tab sequence
A <div> with tabindex="0" and no role takes focus but offers no action.
<div tabindex="0">© 2025 Example Corp.</div>Text forced into the tab sequence
A <p> with tabindex="0" stops the keyboard on plain text that does nothing.
<p tabindex="0">Welcome. Choose an option below.</p>Try It Yourself
Using a keyboard
- Load the page and press Tab until focus reaches the element.
- Press Enter or Space.
- Watch whether anything happens.
Expected results: Focus lands only on interactive controls. It does not stop on generic, non-interactive content.
Actual results: Focus stops on a generic non-interactive element, and pressing keys does nothing, which breaks the navigation flow.
Inspecting the browser dev-tools
- Open your browser's elements panel.
- Select the element that takes unexpected focus.
- Check its
tabindexvalue and role.
Expected results: A generic element has no tabindex, or has tabindex="-1", and is not interactive.
Actual results: A generic element has tabindex="0" but no interactive role.
FAQ
Why is this validation considered a best practice?
No WCAG success criterion forbids putting a generic element in the tab sequence, but doing so creates dead stops that slow keyboard and screen reader users down. Keeping the tab sequence to genuinely interactive controls makes navigation predictable.
Why is this issue marked as Minor?
Focus landing on a generic non-interactive element wastes a Tab stop and can make users think the page is broken, but the content stays readable and the interactive controls still work. The impact is real but limited, so it is rated minor.