Usage
Headings are more than larger text. They allow people using screenreaders to understand the information structure of the page.
iOS Heading
How to test a heading
Given that I am on a screen with a heading
1 Keyboard only
-
WHEN I use the arrow key to browse to a heading I SEE the heading comes into view
-
Then when I use the ctrl + tab key I SEE nothing happens because headings must NOT be focusable
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to browse to a heading
- I HEAR its purpose is clear and matches visible content
- I HEAR it identifies itself as a heading
- I HEAR (if heading levels are used) it is logically structured
-
Then when I the ctrl + tab key I HEAR nothing happens because headings must NOT be focusable
3 Device settings
-
When I use Text resize I SEE text content can resize up to 200% without losing information
-
When I use Increased contrast I SEE focus outline becomes high contrast
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Arrow keys | Browses to headings |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | The screenreader reads the heading (and if used, its level) |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible content |
| Role | It identifies itself as a heading |
| Group | (if heading levels are used) it is logically structured |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text content can resize up to 200% without losing information |
| Increased contrast | Focus outline becomes high contrast |