This guideline section is required (normative).
Headings How-To Guidance
Use headings and sub-headings for your text (formerly WCAG 2.4.10)
The following tabbed sections contain helpful information, but are not required (informative).
Headings — including titles and subtitles — organize words and images on a web page.
Types of content that may use a heading (Content may be presented individually or in a connected group):
- Web pages
- 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.
- 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.
- 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.]
A restaurant menu heading structure
- Layer 1 - Menu
- Layer 2 - Appetizers
- Layer 3 - Soups
- Layer 3 - Salads
- Layer 2 - Entrees
- Layer 3 - Fish
- Layer 3 - Meats
- Layer 3 - Specials
- Ensure that people can quickly find information within your product's text.
- Headings 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.
- Ensure that the text of your product is structurally organized.
- The visual styling of the different heading levels also helps to organize the content.
- Visual styling needs to be coded semantically, that is, the code communicates the level of the headings to non-visual users. This is more of a developer responsibility, but it can be a common issue if the design team "owns" the CSS, which could force a developer to use a non-semantic code element to get the appearance the designer wants.
HOW - Guide:
Link to Style Guide(s)
Video: Clear Layout and Design from Web Accessibility Initiative's Perspectives Video Series
User Testing & Meaningful Involvement:
- Ensure that the section headings are coded semantically — not just visual styling, so that assistive technology can correctly interpret them.
- Ensure that the headings are organized in a logical outline.
- Enable users to quickly find what they are looking for.
Examples and Tutorials
Tutorial: Headings from Web Accessibility Tutorials from the Web Accessibility Initiative
Test & Audit
- Ensure that headings exist and are logical
- Structure the content so users know what to expect in each section.
Manual Testing Tips:
Testing with Users:
TBD - different from user reeearch or testing, this is tips for QA testing by PwD.
Applicable Techniques from WCAG 2.1