Let’s say for a moment that you are filling out an application form online. Having won the international cheese competition we referenced in WCAG 2.2.1, you are now looking to enter an exclusive luxury sales website to purchase a yacht with a portion of your prize money. You easily tab through each field, providing your name, email address, and other pertinent information where appropriate. While doing so, you notice that each line becomes highlighted with a color border when you navigate to it.
In a keyboard operable user interface like this, it’s crucial that there be some visual indication of which field or component the user’s keyboard is currently engaged with. This benefits users with certain physical limitations who rely on keyboards to operate the web (recall our posts on WCAG Guideline 2.1, which covers keyboard operability). It’s also a helpful practice for those experiencing attention or short-term memory limitations, or users with limitations in executive processes, who may require a visual reminder of where they are on a given page.
Keyboard Focus Indicators
WCAG refers to these visual reference points as keyboard focus indicators. There are a number of options for providing keyboard focus indicators on your site. You can highlight text fields, buttons, or other components in a color or with a border, as in the example we saw previously. You may also use some sort of icon or textual indicator.
No matter what option you go with on your site, it’s most important that it be clear to users.
One Last Thing
The point of this rule is to allow users to visually distinguish one keyboard-actionable component among a number of other such components. As such, if there is only one keyboard-actionable element on your page, you do not need to worry about providing a keyboard focus indicator.