Screen structure and headings

Organise content logically and with a clear heading hierarchy.

Overview

What you need to do

Organise your app’s screens with headings and a logical reading order so that users understand and can follow its structure efficiently and effectively.

Use a logical heading hierarchy that reflects your content structure, and make sure the programmatic reading order makes sense compared to the visual layout.

Meeting the Web Accessibility Standard

When structural information and headings are both visually and programmatically indicated, this meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A).

When content means the same thing based on its visual order and its programmatic reading order — for example, as a screen reader would read it — it meets WCAG 2 Success Criterion 1.3.2 Meaningful Sequence .

When headings are programmatically provided and allow users to bypass blocks of content that are repeated across screens, this meets WCAG 2 Success Criterion 2.4.1 Bypass Blocks (Level A).

When headings describe the topic or purpose of the content that follows them, this meets WCAG 2 Success Criterion 2.4.6 Headings and Labels  (Level AA).

Mobile apps do not have an equivalent to HTML page titles, but when each of an app’s screens has a unique title that describes its topic or purpose, this meets WCAG 2 Success Criterion 2.4.2 Page Titled (Level A).

Why this matters

Clear structure and a meaningful content hierarchy help screen reader users, people with learning and intellectual impairments, and neurodivergent people understand and navigate content.

When this applies

What all screens need

Screen titles: Clear, descriptive titles for each screen
Heading hierarchy: Logical H1, H2, H3 structure for content sections
Reading order: Content that flows logically from top to bottom
Content grouping: Related content is grouped together

Key structural elements

Main navigation: Clearly identified and consistent
Content sections: Distinct areas with descriptive headings at the correct level
Forms: Grouped fields with section headings

Design

Checklist for accessible screen structure

Design a clear visual hierarchy that matches heading structure.
Group related content consistently, visually and programmatically.
Ensure logical reading order from top to bottom.
Design clear screen titles and section headings that describe topic or purpose.
Avoid skipping heading levels — for example, don’t jump from H1 to H3.
Make headings descriptive and unique within each screen.

Design resources

Read the following platform guidance on structuring content:

iOS — Layout — Human Interface Guidelines — Apple Developer Documentation.
Android — Layout basics — Mobile — Android Developers
Android — Principles for improving app accessibility — App quality — Android Developers
For web-oriented guidance on heading accessibility, read Making headings accessible — Web Content Type: Headings.

Development

iOS implementation

For technical guidance on layout, grouping and headings, refer to the following from Apple Developer Documentation:

For technical guidance on meeting relevant WCAG Success Criteria, read:

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

For technical guidance on layout, grouping and headings, refer to the following from Android Developers:

For technical guidance on meeting relevant WCAG Success Criteria, read:

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These quick steps will help verify that your app’s screen structure and headings are clear, logical and easy to navigate.

Turn on your device’s screen reader (VoiceOver on iOS, TalkBack on Android).
Navigate by heading — using the Rotor in VoiceOver or the Reading controls in Android, can you move from heading to heading? Is every visual heading included?
Read just the headings — can you understand the screen’s structure from the headings alone?
Follow the reading order — does the content make sense in the order it’s announced?
Check grouped content — do grouped content areas make sense when announced together?
Review relationships between different content sections — do they make sense?

Testing resources

The most practical way to test the accessibility of your app’s content and heading structure, screen titles and reading order is to use the built-in screen reader.