WEBVTT

00:00:00.000 --> 00:00:06.000
What happens when a website switches content using tabs?

00:00:06.000 --> 00:00:13.000
A tabbed interface presents related panels with one selected panel visible.

00:00:13.000 --> 00:00:18.000
Keep selection and navigation clear.
6 tab-interface checks.

00:00:18.000 --> 00:00:30.000
Group related content
Each tab should identify a coherent panel of information.
Related information · Distinct panel · Useful grouping

00:00:30.000 --> 00:00:42.000
Make the selected tab clear
The current selection needs a visible and programmatic state.
Selected state · Visible distinction · Associated panel

00:00:42.000 --> 00:00:54.000
Keep the labels understandable
The visitor should know what each panel contains.
Short label · Clear subject · Distinct choices

00:00:54.000 --> 00:01:06.000
Support the keyboard pattern
Arrow-key movement and activation should follow the intended tab behaviour.
Keyboard movement · Activation behaviour · Focus position

00:01:06.000 --> 00:01:18.000
Avoid slow automatic switching
If selection follows focus, the panel needs to appear without noticeable delay.
Focus activation · Prompt panel display · Suitable loading strategy

00:01:18.000 --> 00:01:30.000
Review the small-screen layout
Labels and content should remain usable when space is limited.
Narrow viewport · Readable labels · Accessible panel content

00:01:30.000 --> 00:01:39.000
Your checklist
Group related content · Make the selected tab clear · Keep the labels understandable · Support the keyboard pattern · Avoid slow automatic switching · Review the small-screen layout

00:01:39.000 --> 00:01:47.000
Test selection, keyboard movement and the visible panel together.
jerseyweb.je