Clearly style focus states

Style panel
Check as complete

Keyboard users navigate a site by tabbing through actionable items on a page, and focus states indicate which item is being focused.

Check your focus states:

Open the page in the browser and tap the Tab key to move the focus to each element on the page. You should see an outline box around each element in focus. If you don’t, you’ll need to add CSS to style the elements’ focus state.

Style your focus states:

Learn how to style an element in various states, including focus, in the Webflow University lesson on States.

WCAG reference:

2.4.7 Focus Visible

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress