WCAG 2.4.7 Visible Focus

When an interactive element (link, button, form field, selectable element, etc.) receives focus, a visual indicator shows so a user can see what element they are currently on.

What to do?

  • Style your website so that any interactive element shows visible focus when it receives focus


Plain English Explanation

Make sure that when someone tabs through your website, any interactive element (such as a link or form field) that you stop on has a focus indicator of some kind.

Typically a focus indicator is a rectangle box around a link or a vertical bar displayed in a text field. If you tab through the link above, you can see a focus indicator in action.

I recommend you make focus very clear and conspicuous by providing a strong, contrasting color for a box border or potentially highlighting an input field such as a search box. There are many styles you can use to provide visible focus.