2.1.1 Keyboard

Frames hide focusable content from the keyboard

A frame with tabindex="-1" hides its content from keyboard users.

Who it affects. Keyboard users can't reach the buttons and links inside the frame.

How to fix it. Remove tabindex="-1" from the iframe.

<iframe src="/checkout" title="Payment form"></iframe>

Controls cannot be reached by keyboard

This control responds to a pointer but can't be reached with Tab, so keyboard users can't operate it.

Who it affects. People who use a keyboard, switch or screen reader can't reach or press it, so what it does is out of their reach.

How to fix it. Use a native button or a with href. If you can't, add tabindex="0" and handle Enter and Space as well as click.

<button type="button" onclick="openMenu()">Menu</button>
<!-- not <div onclick="openMenu()">Menu</div> -->

<button type="button" onClick={openMenu}>Menu</button>

Scrolling areas cannot be reached by keyboard

A region that scrolls but can't take focus can't be scrolled with the keyboard.

Who it affects. Keyboard users can't scroll the region, so the content past its edge is out of their reach.

How to fix it. Let the scrolling element take focus with tabindex="0", and name it with role="region" and an aria-label. Or put a focusable element inside.

<div class="scroll" tabindex="0" role="region" aria-label="Invoice lines">…</div>

<div className="scroll" tabIndex={0} role="region" aria-label="Invoice lines">…</div>

Server-side image maps have no keyboard alternative

A server-side image map only works with a mouse.

Who it affects. Keyboard and screen reader users can't choose a region, because the map sends pixel coordinates the keyboard can't produce.

How to fix it. Replace it with a client-side image map (map and area) or with ordinary links.

<img src="/regions.png" usemap="#regions" alt="Sales regions">
<map name="regions">…</map>

<img src="/regions.png" useMap="#regions" alt="Sales regions" />