Keyboard focus is visible when used.
Introduction
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
- Keyboard
- Focus Order
- Focus Appearance (Minimum)
- Focus Appearance (Enhanced)
- Understanding Success Criterion 2.4.7 (W3C)
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.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.
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.
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.
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?
Hey Priya,
That’s right, there are times when the guideline might not be good enough.