Analyze Visual Focus Indicators

(available for Firefox on Mac OS X only) automatically detects missing visual keyboard focus indicators.

The purpose of this check is to ensure that sighted keyboard users can navigate the web site effectively. As users tab from link to link, or to form elements or ARIA widgets, users need to know where the keyboard focus is at all times. If the keyboard focus is invisible, sighted keyboard users won't know when they're on the elements they want to activate, and they won't be able to predict what will happen if they use the enter key.

By default, browsers already display an outline around the element with the current keyboard focus, so you don't have to do anything to make the visual focus indicator work. Unfortunately, some web designers purposely turn off the visual focus indicator using a style like a:focus {outline: none}. This style breaks keyboard accessibility for sighted keyboard users and is highly discouraged.

In fact, it is good practice to enhance the visual focus indicator for the dual benefit of benefiting sighted keyboard users and users with low vision. Adding a thicker outline and/or a background color can on focus and on hover can improve accessibility significantly for these groups.