Headings How-To Guidance

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

• 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

• Layer 1 - Menu
  • Layer 2 - Appetizers
    • Layer 3 - Soups
    • Layer 3 - Salads
  • Layer 2 - Entrees
    • Layer 3 - Fish
    • Layer 3 - Meats
    • Layer 3 - Specials

Plan

Planning Responsibilities:

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

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

• Headings in HTML using aria
• Evaluating the usability of headings (TBD)

• General: Organizing a page using headings (WCAG 2.1 Technique G141)
• HTML: Providing heading elements at the beginning of each section of content (WCAG 2.1 Technique H69)