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.
- Guideline 2.1.1 – Keyboard
- Guideline 2.4.3 – Focus Order
- Understanding Success Criterion 2.4.7 (W3C)
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.