From a 5-part series about free tools for testing web site accessibility.

1. Web A11y Testing 1 - Keyboard Page 1 of 6
Web Accessibility Testing 1 -
Keyboard
Introduction
Before using any special tools to test for accessibility, start with a regular keyboard.
Some users don’t use a mouse, so everything must be keyboard accessible.
Note: the tests in this document can be performed with either Windows or macOS (or
pretty much any computer with a keyboard).
All browsers include these keyboard commands:
● Tab goes to the next clickable element (link or form control), Shift+Tab goes to
the previous one.
● When on a link, pressing Enter will click it.
● When on a button, pressing Enter or Space will click it.
● When on a radio button or checkbox, pressing Up/Down arrow keys will cycle
through all the elements in the group.

2. Web A11y Testing 1 - Keyboard Page 2 of 6
What is a visible focus indicator?
A visible focus indicator is any dotted line, highlight, or visible marker that shows which
clickable element you’ve tabbed to.
Examples of a visible focus indicator:
● Dotted line around a link
● Cursor inside a text box
● Styling that shows you which radio button you’ve selected

3. Web A11y Testing 1 - Keyboard Page 3 of 6
● A caret or other marker

4. Web A11y Testing 1 - Keyboard Page 4 of 6
Acceptable visible focus indicator
Q: What makes a visible focus indicator acceptable?
A: Unfortunately WCAG 2.0 is not very clear on this. Browsers vary in how strong their
focus indicators are. The major browsers have only weak focus indicators - they just
change colour slightly:
Browser Default focus indicator
IE
Firefox
Chrome
The above examples are weak focus indicators, but they do pass WCAG 2.0. We should
try to do better than these examples. WCAG generally says that information should not
be conveyed with colour alone.

5. Web A11y Testing 1 - Keyboard Page 5 of 6
Hover state vs. Focus state
When you design a hover state (for mouseover), design a focus state (for keyboard focus)
too.
Examples of hover state and focus state...
Default state Hover state Focus state

6. Web A11y Testing 1 - Keyboard Page 6 of 6
Test cases
Step Test Pass Fail
1 Tab around the page, and verify
that you can reach all clickable
elements.
All clickable
elements can be
reached.
Some clickable
elements can’t be
reached.
2 As you tab around the page, all
clickable elements must show a
visible focus indicator.
All clickable
elements show a
visible focus
indicator.
Some clickable
elements don’t
show a visible focus
indicator.
3 All clickable elements must be
reached in a logical order (top to
bottom, left to right).
All clickable
elements are
reached in a logical
order.
Some clickable
elements are not
reached in a logical
order.
4 Tab to some links and press
Enter.
Links function as
though they were
clicked.
Links don’t function
as though they were
clicked.
5 When you’ve reached a radio
button or checkbox, press the
Up/Down arrow keys to cycle
through them.
I was able to reach
all the elements in
the group.
I wasn’t able to
reach all the
elements in the
group.
6 When you’ve reached a submit
button, press Enter or Space to
‘click’ it.
Submit button was
clicked.
Submit button
wasn’t clicked.