Visible Focus Explained: Help Keyboard Users See Where They Are

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Focus shows the active position

   0:18

   It identifies the element ready for keyboard interaction.

   On-screen labels: Current element; Keyboard position; Next action.

2. 2

   Step 2: Tab through the page

   0:30

   Watch the indicator as you move between interactive controls.

   On-screen labels: Navigation links; Form fields; Action buttons.

3. 3

   Step 3: Keep an obvious indicator

   0:42

   An outline or other clear styling helps people locate focus.

   On-screen labels: Visible outline; Clear contrast; Recognisable state.

4. 4

   Step 4: Check different backgrounds

   0:54

   The indicator needs to remain visible across the design.

   On-screen labels: Light section; Dark section; Image background.

5. 5

   Step 5: Watch sticky headers and overlays

   1:06

   A focused control should not disappear behind other content.

   On-screen labels: Sticky header; Open overlay; Visible target.

6. 6

   Step 6: Check the complete journey

   1:18

   Include menus, forms and any embedded components.

   On-screen labels: Main navigation; Contact form; Final action.

Common questions

Go further