Is there a visible focus indicator on all actionable elements?

Goal

Ensure that keyboard-only users can see where the focus indicator is for all focusable elements.

Why this matters

Sighted keyboard users need to see where the keyboard focus is. If the focus isn’t visible or is hard to discern, sighted keyboard users have no idea where the focus is on the page, making it extremely difficult to use.

How to implement

Designers

Whenever possible, enhance the default focus so that it’s easier to find on the screen. Enhancements can include a different background color, different font color, outline, or border. (The preferred method is the outline attribute according to most people I’ve talked to who use it.)

Ensure that all of the following are considered:

• links
• buttons
• inputs
  • text inputs
  • textarea inputs
  • image inputs
  • submit buttons
  • radio buttons
  • checkboxes
  • all other input types
• select menus
• ARIA controls
  • ARIA links
  • ARIA buttons
  • ARIA inputs
  • ARIA tabs
  • All other focusable custom ARIA controls
• All other focusable items

Developers

• Do not implement outline: none on anything.
• Implement the focus method as provided by your designer.

How to test

Tab through the page, ensuring that you can see the focus move from item to item as you go. If the focus is difficult to see or you can’t identify where the focus is, immediately raise it as an issue.