Focus Visible
Steps to ensure that a user can remain orientated on the page at all times using a keyboard alone
Prerequisites
These steps assume that the following tests have been completed and that issues found have been resolved:
Browsers to Test With
Test for visible focus using browsers with and without a stylized visual indicator.
Non-stylized focus indicator | Stylized focus indicator |
Firefox | Chrome |
Internet Explorer | Safari |
Steps
Place keyboard focus into the browser's address bar
There should now be a blinking caret, indicating that the input has keyboard focus
Use TAB key to move forwards through the browser chrome
Do not create any issues for the browser chrome
Use TAB key to move forwards through focusable elements of the page; pause on every key press to verify that keyboard focus is still visible
Do not hold down the TAB key
If the focus indicator is lost, create an issue
See "Keyboard focus indicator lost" section below
If the focus indicator is visible, but relies on colour alone, create an issue
See "Keyboard focus indicator insufficient" section below
If the focus indicator is visible, but not easily distinguishable, create an issue
See "Keyboard focus indicator insufficient" section below
Repeat steps 3 to 6 until focus returns to the browser chrome
Creating Issues
Provide enough information to identify when focus is not visible or insufficient.
Keyboard focus indicator lost
Description: Keyboard focus indicator lost
Priority:
Focus indicator returns after one additional TAB key press: P3
Focus indicator returns after multiple additional TAB key presses: P2
Focus indicator fails to return: P1
Label or Tag: #a11y247
Keyboard focus indicator insufficient
Description: Keyboard focus indicator insufficient
Priority:
Focus not clearly on one element or another: P2
Focus relies on colour alone: P3
Focus distorted: P3
Label or Tag: #a11y247
About
Author(s): Ian McBurnie & Luis Garcia
Last Updated: 2021 Jan 25th
Last updated