2.4.7 – Focus Visible (Level AA)

Ensure keyboard focus is visible and clear

Your users need to find their way around your website in a sequential and meaningful order. If they use a keyboard to navigate your website, they should be able to see which element they are on at any time.

The best way to do this is to style a visible border or outline around the element in use, whether it’s a form field, link, menu, content area or any other element. This makes it easier for your users to understand where they are on a page.

What to do

• Make the keyboard focus visible on all elements (menu items, form fields, links, etc…).
• Use CSS to apply a visual aid to keyboard focus – a border and/or underline is best.

Tips

A good HTML and CSS website will often already conform to this guideline. Check yours to be sure.

See also

• Guideline 2.1.1 – Keyboard
• Guideline 2.4.3 – Focus Order
• Understanding Success Criterion 2.4.7 (W3C)