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.


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

See also

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.