Focus Visible

Steps to ensure that a user can remain orientated on the page at all times using a keyboard alone

Prerequisites

See Keyboard Prerequisites.

These steps assume that the following tests have been completed and that issues found have been resolved:

• Focus Moveable

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

1. Place keyboard focus into the browser's address bar

   1. There should now be a blinking caret, indicating that the input has keyboard focus

2. Use TAB key to move forwards through the browser chrome

   • Do not create any issues for the browser chrome

3. 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

4. If the focus indicator is lost, create an issue

   • See "Keyboard focus indicator lost" section below

5. If the focus indicator is visible, but relies on colour alone, create an issue

   1. See "Keyboard focus indicator insufficient" section below

6. If the focus indicator is visible, but not easily distinguishable, create an issue

   1. See "Keyboard focus indicator insufficient" section below

7. 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