2.4.7 – Focus Visible (Level AA)

posted in Intermediate (Level AA) on by

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

Free Developer Resources

Join over 3,500 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.

Powered by ConvertKit

Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.

Learn more >

  • Brenda

    Hi Luke : I would make a slight adjustment to your ‘what to do’ to say that a border and/or underline (as applicable) should be applied, first and foremost, and background color should be optional but not an and/or choice in my opinion. Color alone would need to be strong enough to provide sufficient contrast with foreground content for users who may be color-blind or have other visual deficits. Hope this helps.

    • Good point Brenda, choosing a colour opens up a whole new can of worms! I’ll amend that to reposition what I’m saying as you suggest – thanks for your help!

  • Luke
    Thanks for writing about this. I can use a pointing device but I prefer using the keyboard so losing focus on a website is frustrating.
    Just one comment, on your page the focus is very clear except when it is on the picture of the kitten, some how you need some space between the outline and the picture.

    • Thanks for the heads up Peter – I had a problem with my theme recently (I had to reset it and lost a load of developments I’d made) and I’m working on making a more accessible version. I’ll pass this on to the developer.

  • I always suggest one possible way of achieving this is to reverse the colours of text and background. That way, provided the combination of text and background meets the colour contrast requirement, the reversed version of it will do so also. The only way it might not work is if the user has set their own colours for text backgrounds but it seems unlikely they would override focus settings unless it was something more useful to them.

    • Smart idea Richard. I guess the problem is people also knowing about colour contrast – one of the many reasons I find the WCAG hard to explain in parts, it really does need a holistic overview.

  • Mark Johnson

    I’m wondering why this site doesn’t follow this guideline, as far as I can tell. Nevertheless, you’ve provided a great resource. Thank you.

    • Entirely my fault Mark, the one site I have the least time for! Been on the lookout for a wordpress developer for a while, let me know if you know anyone.