Screen Readers Explained: How Website Structure Helps People Navigate

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: Start with meaningful content

   0:18

   The page needs text and structure that software can interpret.

   On-screen labels: Readable content; Meaningful structure; Programmatic information.

2. 2

   Step 2: Headings support navigation

   0:30

   A logical heading structure helps people find sections.

   On-screen labels: Main heading; Section headings; Useful document order.

3. 3

   Step 3: Controls need useful names

   0:42

   The purpose of a button or form field should be identifiable.

   On-screen labels: Named button; Labelled input; Clear purpose.

4. 4

   Step 4: Images can need alternatives

   0:54

   Useful text alternatives communicate relevant image information.

   On-screen labels: Image purpose; Relevant alternative; Decorative-image handling.

5. 5

   Step 5: Keyboard behaviour matters

   1:06

   Important tasks should remain usable without relying on a mouse.

   On-screen labels: Reachable controls; Usable interactions; Clear focus order.

6. 6

   Step 6: Check the complete task

   1:18

   Test navigation and interaction, including errors and confirmations.

   On-screen labels: Real visitor task; Helpful feedback; Assistive-technology test.

Common questions

Go further