Headers
| Severity | Serious |
|---|---|
| Accessibility Principle | Operable |
| Affected users | Visual, Mobility |
| Success criterion | 2.4.6 |
Headers play a vital accessibility role by helping screen reader users navigate content efficiently. When a text element is marked as a header, assistive technologies can recognise its level and provide quick navigation shortcuts (e.g., jumping between headings). This allows non-visual users to understand the screen's structure and navigate sections without having to read everything sequentially.
In React Native, any text element can be designated as a header by assigning the accessibilityRole="header" property to it.
Each page/screen should contain at least one header.
Expectations
- When: A user navigates to a screen
- Then: There is at least one element marked as a header so the user can orient themselves without reading all content linearly
- When: A user opens the Rotor (iOS) or List feature (Android) and selects Headers
- Then: They can jump directly between all sections marked as headers on the screen
- When: A user looks at the screen
- Then: Headers are not interactive targets for voice commands, but they provide visible structure that helps all users — including Voice Control users — understand the page layout at a glance
Understand the Navigation
Before checking the expectation, let's look at how Screen Reader users can navigate through multiple headers.
Screen Reader users primarily navigate content using specific gestures or keyboard shortcuts, depending on the assistive technology and device:
- Linear Navigation: Screen Reader users can swipe right or left (on touch devices) or use arrow keys (keyboard users) to navigate content linearly, including headers.
- Rotor or List feature Navigation: Screen readers like VoiceOver (iOS) or TalkBack (Android) have a rotor or list feature. Users can select 'headers' from this list and then swipe up or down to navigate between them.
Rotor or List feature
Using the Rotor feature on iOS or the List feature on Android, users can easily navigate various content types such as Headers, Controls, and Paragraphs. By selecting the headers navigation option, they can quickly skim the screen's content and gain an understanding of its layout and information.
VoiceOver
Talkback
To navigate the feature list, draw an upward (^) or downward (V) shape using a single finger.
After selecting a particular feature to interact with, users can Swipe up or Swipe down to navigate through the specified type of elements.
Expectations
- When: A user navigates to a screen
- And: Selects Headers from the Rotor/List feature
- Then: Should be able to navigate through all the sections defined as Headers
Because people who depend on assistive technology often navigate by heading first to quickly get a sense of the content offered in the page.
On iOS, the user will use the VoiceOver rotor to move through the different elements on the screen, i.e. headers. On Android is possible but varies by device.
No Headers
Severity: SeriousNeglecting to define headers can be detrimental to screen reader users as we're forcing them to navigate through the entire screen content to understand its context.
Invisible header
If your screen design lacks a visible header, it might be acceptable for sighted users, but it can pose challenges for those using screen readers. In such scenarios, it's essential to include a header that's exclusively accessible to screen readers. We can do this by using an empty >Text< component with an accessible label and role.
<Text accessibilityLabel="This is the header" accessibilityRole="header" />
Best Practices
Every screen needs at least one header
Without a heading, screen reader users navigating by header have no entry point and must read the entire screen linearly. Mark the primary screen title as accessibilityRole="header".
Add a screen-reader-only header when the design has no visible title
If the screen design has no visible heading, add a <Text> element that is visually hidden but accessible:
<Text accessibilityLabel="Products" accessibilityRole="header" />
Keep heading text short and descriptive
Headings are navigation landmarks — users hear them rapidly while scanning. A heading like "Settings" is better than "Here you can manage all your application settings".
AMA dev runtime errors
NO_HEADER_FOUND
This error is raised when a screen contains no element with accessibilityRole="header". Screen reader users rely on headers to orient themselves and navigate efficiently — without one, they must read the entire screen linearly.