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