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 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.