WEBVTT

00:00:00.000 --> 00:00:06.000
Which button is selected when you press Tab?

00:00:06.000 --> 00:00:13.000
A visible focus indicator shows the current position.

00:00:13.000 --> 00:00:18.000
Make the keyboard position clear.
6 focus-indicator checks.

00:00:18.000 --> 00:00:30.000
Focus shows the active position
It identifies the element ready for keyboard interaction.
Current element · Keyboard position · Next action

00:00:30.000 --> 00:00:42.000
Tab through the page
Watch the indicator as you move between interactive controls.
Navigation links · Form fields · Action buttons

00:00:42.000 --> 00:00:54.000
Keep an obvious indicator
An outline or other clear styling helps people locate focus.
Visible outline · Clear contrast · Recognisable state

00:00:54.000 --> 00:01:06.000
Check different backgrounds
The indicator needs to remain visible across the design.
Light section · Dark section · Image background

00:01:06.000 --> 00:01:18.000
Watch sticky headers and overlays
A focused control should not disappear behind other content.
Sticky header · Open overlay · Visible target

00:01:18.000 --> 00:01:30.000
Check the complete journey
Include menus, forms and any embedded components.
Main navigation · Contact form · Final action

00:01:30.000 --> 00:01:39.000
Your checklist
Focus shows the active position · Tab through the page · Keep an obvious indicator · Check different backgrounds · Watch sticky headers and overlays · Check the complete journey

00:01:39.000 --> 00:01:47.000
Keep the current control easy to find.
jerseyweb.je