Scrollable regions must be keyboard-accessible

Rule scrollable-region-focusable · Deeper checks · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An element whose content actually overflows a scrollable container (overflow:auto/scroll) must be reachable by keyboard so users can scroll it. A container with no keyboard-focusable descendant, no tabindex, and no native focusability of its own is invisible to Tab navigation. Containers whose content fits (defensive overflow CSS) and natively-focusable fields ( gets overflow:auto from the browser stylesheet) are exempt.</p> <h2 id="how-to-fix">How to fix<a class="heading-anchor" href="#how-to-fix" aria-hidden="true">#</a></h2> <p>Add tabindex="0" and a descriptive role/aria-label to the scrollable container, or ensure it contains at least one naturally focusable element.</p> <h2 id="example">Example<a class="heading-anchor" href="#example" aria-hidden="true">#</a></h2> <figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><div style="overflow:auto;height:200px">Long content without any focusable elements</div> </code></pre></figure> <figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><div tabindex="0" role="region" aria-label="Changelog" style="overflow:auto;height:200px">Long content</div> </code></pre></figure> <h2 id="wcag-success-criteria">WCAG success criteria<a class="heading-anchor" href="#wcag-success-criteria" aria-hidden="true">#</a></h2> <h3 id="2-1-1-keyboard-level-a">2.1.1 Keyboard — Level A<a class="heading-anchor" href="#2-1-1-keyboard-level-a" aria-hidden="true">#</a></h3> <p>All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).</p> <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html">Understanding 2.1.1</a></p> <h2 id="standards">Standards<a class="heading-anchor" href="#standards" aria-hidden="true">#</a></h2> <p>This rule contributes to the following standards:</p> <p><span class="std-tag" data-std="wcag-A">WCAG A</span> <span class="std-tag" data-std="EN-301-549">EN 301 549</span></p> <div class="table-wrap"><table> <thead> <tr> <th>Standard</th> <th>Criteria</th> </tr> </thead> <tbody><tr> <td>EN 301 549</td> <td>9.2.1.1</td> </tr> </tbody></table></div> <h2 id="references">References<a class="heading-anchor" href="#references" aria-hidden="true">#</a></h2> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html">WCAG — Keyboard</a></li> </ul> </article> <footer class="md-footer"> <span>Generated from <code>@app/a11y-engine</code> rule metadata.</span> <a class="back-top" href="#main">Back to top ↑</a> </footer> </main> <aside class="toc" aria-label="On this page"><div class="toc-title">On this page</div><a class="toc-link toc-h2" href="#why-it-matters" data-toc="why-it-matters">Why it matters</a><a class="toc-link toc-h2" href="#how-to-fix" data-toc="how-to-fix">How to fix</a><a class="toc-link toc-h2" href="#example" data-toc="example">Example</a><a class="toc-link toc-h2" href="#wcag-success-criteria" data-toc="wcag-success-criteria">WCAG success criteria</a><a class="toc-link toc-h3" href="#2-1-1-keyboard-level-a" data-toc="2-1-1-keyboard-level-a">2.1.1 Keyboard — Level A</a><a class="toc-link toc-h2" href="#standards" data-toc="standards">Standards</a><a class="toc-link toc-h2" href="#references" data-toc="references">References</a></aside> </div> <script src="/wiki/a11y-rules/assets/wiki.9c7b1306b8.js" defer></script> </body></html>