Keyboard focus is visible when used. 


Where there are multiple elements on a webpage, it helps users to highlight which element has keyboard focus. This helps users who rely on a keyboard to navigate as it shows them which element the keyboard will interact with. Users with attention or short-term memory limitations will also benefit from a visual cue to where focus is located.

How to Pass ‘Focus Visible’

When an element has keyboard focus, show a visual indication.

‘Focus Visible’ Tips

For form fields, you might display a bar within the field or highlight the entire field.

For controls, you might display a border around the control.

See Also

Free Developer Resources

Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.

Powered by ConvertKit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

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'.

10 comments on “Focus Visible (2.4.7 – Level A)

    Brenda says:

    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.


    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.

      Luke McGrath says:

      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.

    Richard says:

    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.

      Luke McGrath says:

      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 says:

    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.

      Luke McGrath says:

      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.

    Priya K says:

    Hi Luke,

    I understand that websites by default have a focus indicator for keyboard tab press unless the developer overrides it.

    But what if keyboard focus is visible but no indication is seen on mouse hover?

    Also many times the page elements receive focus but its not sufficient (the border color is dull or weight is less)

    In above scenarios, this guideline passes but it is still an accessibility issue right?


Leave Comment