WebsightWhat it asks for, in plain English
Anything a person can do with a mouse or a finger, they must also be able to do with a keyboard: reach it, operate it, and get the same result. That includes custom dropdowns, date pickers, carousels, modal dialogs, sliders, chat widgets and anything built from a <div> with a click handler.
It also means no reliance on timing. A person must not have to press keys quickly or hold them for a set time to make something work.
The one exception is input where the path of the movement is the point, such as freehand drawing. Even then, the surrounding controls (colour, undo, save) must still work with keys.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.1.1 page has the full intent, techniques and definitions.
Who it affects
Someone who is blind uses a screen reader with the keyboard only, and cannot click a 'button' that is really a div with no keyboard handling.
A person with a tremor or repetitive strain injury cannot use a mouse accurately and relies on Tab and Enter for everything.
A power user with a broken trackpad finds the custom dropdown will not open and abandons the form.
Example
<div class="btn" data-action="add-to-basket">Add to basket</div>
<span class="link" data-action="open-size-guide">Size guide</span>Both get a click handler in script, so they work with a mouse. Neither can receive keyboard focus: Tab skips straight past them and Enter does nothing.
<button type="button" data-action="add-to-basket">Add to basket</button>
<a href="#size-guide" data-action="open-size-guide">Size guide</a>Same click handler, but real buttons and links are focusable and respond to Enter (and Space for buttons) with no extra work.
How to check it
- Put the mouse out of reach. Starting at the top of the page, press Tab repeatedly and note every control you reach.
- Compare with what you can see. Any link, button or control you could click but never reached is a failure.
- At each control, use Enter, Space and the arrow keys to operate it. Menus should open, tabs should switch, sliders should move.
- Open a dialog or a dropdown and use it fully with keys, then close it and check focus comes back to where you were.
What Websight checks for 2.1.1
Websight runs these automated checks for 2.1.1:
server-side-image-map
A server-side image map is an img with the ismap attribute inside a link.
A
Scrollable areas must be reachable with a keyboard
scrollable-region-focusable
When a box has its own scrollbar, mouse users scroll it with the wheel.
A
Frames with controls inside must not have tabindex=-1
frame-focusable-content
An iframe with tabindex="-1" is taken out of the Tab order, and so is everything inside it.
Websight flags scrollable areas that keyboard users cannot reach, server-side image maps and frames whose content cannot be focused. It cannot operate a custom widget to see whether the keys work, so this is on the manual checklist.
Practical tips
- Use <button> and <a href> for anything clickable. They come with focus and key handling built in.
- If you must make a div interactive, give it tabindex="0", a role, and key handlers for Enter and Space.
- Check third-party embeds (maps, chat, video) with the keyboard too; you are responsible for what is on your page.
Other criteria in guideline 2.1, Keyboard Accessible
- 2.1.2 No Keyboard Trap (level A)
- 2.1.4 Character Key Shortcuts (level A)