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

Resources:

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.

Understanding 2.4.7