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).

Get Started

Summary

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):

Why

Who it helps

How

Exceptions

Examples

A restaurant menu heading structure

Plan

Planning Responsibilities:

Tips for Collaboration

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.

Design

Design Responsibilities

  1. Ensure that the text of your product is structurally organized.
  2. The visual styling of the different heading levels also helps to organize the content.
  3. 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

Designer Tips:

TBD

User Testing & Meaningful Involvement:

TBD

Develop

Technical Responsibilities

  1. Ensure that the section headings are coded semantically — not just visual styling, so that assistive technology can correctly interpret them.
  2. Ensure that the headings are organized in a logical outline.
  3. 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

Testing Responsibilities

  1. Ensure that headings exist and are logical
  2. Structure the content so users know what to expect in each section.

Auto-Testing Tips:

TBD

Manual Testing Tips:

TBD

Testing with Users:

TBD - different from user reeearch or testing, this is tips for QA testing by PwD.

Methods

New Methods

Applicable Techniques from WCAG 2.1