Website Tabs Explained: Switching Between Related Content Panels

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: Group related content

   0:18

   Each tab should identify a coherent panel of information.

   On-screen labels: Related information; Distinct panel; Useful grouping.

2. 2

   Step 2: Make the selected tab clear

   0:30

   The current selection needs a visible and programmatic state.

   On-screen labels: Selected state; Visible distinction; Associated panel.

3. 3

   Step 3: Keep the labels understandable

   0:42

   The visitor should know what each panel contains.

   On-screen labels: Short label; Clear subject; Distinct choices.

4. 4

   Step 4: Support the keyboard pattern

   0:54

   Arrow-key movement and activation should follow the intended tab behaviour.

   On-screen labels: Keyboard movement; Activation behaviour; Focus position.

5. 5

   Step 5: Avoid slow automatic switching

   1:06

   If selection follows focus, the panel needs to appear without noticeable delay.

   On-screen labels: Focus activation; Prompt panel display; Suitable loading strategy.

6. 6

   Step 6: Review the small-screen layout

   1:18

   Labels and content should remain usable when space is limited.

   On-screen labels: Narrow viewport; Readable labels; Accessible panel content.

Common questions

Go further