Get Started
Section Headings
Use headings and sub-headings for your text (formerly WCAG 2.4.10)
Summary
Section headings — including titles and subtitles — organize words and images on a web page.
Types of content that may use a heading:
- Documents
- Web pages
- Paragraphs
- Images
- Graphics
Why
- Headings help people understand and navigate what you write.
- Headings make it easier to find updated content.
- Mobile users find it easier to scan material with clear headings.
- Headings allow readers to skim longer passages of text and choose which parts they want to read.
Who it helps
- Visually impaired and blind people use headings to navigate sections.
- People with cognitive disabilities use headings to understand how writers organize their thoughts.
- People who use keyboard navigation use headings to jump to content they want to read.
- All readers benefit from clear organization and navigation, especially when their time and energy are limited.
How
- Organize your text into sections and give each of them a heading.
- Write a heading that clearly and concisely describes the topic in the section below.
- Use subheadings to organize within sections.
- Include your headings and subheadings in your site map or table of contents.
- Use chapters — like a printed book — for longer blocks of text.
Exceptions
- You don't need to insert headings into documents you upload from another author, or in a place where they won't work for artistic reasons. But remember to add them where you can—your readers will appreciate it.
- Don’t just use a heading because it’s catchy; be sure the heading gives structure and context to its related content.
- Form fields, menus and checkboxes are not headings. For more information about how to do these, please see user interface components. [Editor Note: We haven't worked out how to display definitions yet, so for now, they just all link to WCAG.]
Examples
A restaurant menu heading structure
Plan
Section Headings
Use headings and sub-headings for your text.
See Get Started for basic information.
Planning Responsibilities:
- You must ensure that people can quickly find information within your product's text.
- Headings must make it easier for people to find information. Too many headings or disorganized headings make it more difficult. Review headings in your usability testing.
- If your organization wants to qualify for a certain conformance level of Silver, then see the Methods section.
Tips for Collaboration
- Editors or people responsible for writing text know to keep it well organized.
- Designers include an appropriate organization and design of headings for your product.
- Developers use semantic heading elements -- not just text that is visibly styled as a heading.
- UX team knows to evaluate the organization of the text
- QA testers know to include testing for appropriate heading structure, including semantic code (if available)
Planning for Each Stage:
How to get started early: Early project meetings need to discuss accessibility and the importance of improving the usability of the site for people with disabilities. Writing, designing, and coding well organized text content will help all users.
How to remediate: The most common problem with headings is visually styled headings that are not semantic, so assistive technology (like screen readers) cannot tell that the text is a heading. The developers need to research the appropriate semantic code. In HTML, that would be an h1, h2, h3 tag. For other technologies, see the Method for that technology.
Methods
Design
Section Headings
Use headings and sub-headings for your text.
See Get Started for basic information.
Design Responsibilities
- You must ensure that the text of your product is structurally organized. The visual styling must also be semantic, that is, the code must communicate the level of the headings to non-visual users.
- This must ...
HOW - Guide:
Link to Style Guide(s)
Video: Clear Layout and Design from Web Accessibility Initiative's Perspectives Video Series
Designer Tips:
User Testing & Meaningful Involvement:
Methods
- Usability: Evaluating the usability of headings
- Method 2...
- Method 3...
Develop
Section Headings
Use headings and sub-headings for your text.
See Get Started for basic information.
Technical Responsibilities
- You must ensure that the section headings are coded semantically — not just visual styling, so that assistive technology can correctly interpret them.
- You must ensure that the headings are organized in a logical outline.
- This must allow users to quickly find what they are looking for.
Methods
Examples and Tutorials
Tutorial: Headings from Web Accessibility Tutorials from the Web Accessibility Initiative
Test & Audit
Section Headings
Use headings and sub-headings for your text.
See Get Started for basic information.
Testing Responsibilities
- You must ensure that...
- This must ...
Auto-Testing Tips:
Includes links to 3rd party/crowd-sourced tips?
Manual Testing Tips:
Includes links to 3rd party/crowd-sourced tips?
Testing with Users:
Testing with Users:
Is this duplication of User Testing in Designer tab or different?
Methods for Evaluating and Scoring: