This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Structured content)
Structured content
Use headings, sections, and sub-headings to organize your text.
Summary
Headings organize content on a section of a web pagetext, images, application controls, and other types of content. A section is a self-contained portion of content that deals with one or more related topics or thoughts.
Types of content that may use a heading (Content may be presented individually or in a connected group):
- Documents
- Web pages
- eBooks
- Paragraphs
- Lists
- Subsections
- Images
- Multimedia
- Application controls
Form fields, menus and checkboxes are not headings. For more information on using these components, please see [TOD} user interface components.
Why
- Headings help people understand and navigate what you write.
- Headings make it easier to find updated content.
- Users find it easier to scan material with clear marked 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.
- Be sure the heading gives structure and context to its related content.
- Write headings that clearly and concisely describe the topic in the subsequent content.
- Use subheadings to organize content within sections.
- Include headings and subheadings in site maps and table of contents.
- Use chapters — like a printed book — for longer blocks of text.
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, disorganized headings, or headings without a navigational focus make it more difficult. Review heading content and relevance in your usability testing.
Tips for collaboration
- Editors and Content Managers know how to keep headings focused on structure.
- Search Engine Optimizers (SEO) know how to maximize the increase in search engine visibility provided by headings. However, the ability to leverage this increase cannot cause any heading guidelines to be broken.
- Designers submit an appropriate organization and heading design as part of the overall product design.
- Developers use semantic heading elements -- not just text that is visually styled as a heading.
- UX team knows to evaluate content organization.
- QA testers know to test for appropriate heading structure, including semantic code evaluation.
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 are:
- Visually styled headings that are not semantic. This prevents assistive technology (like screen readers) from being able to tell that the text is a heading. The developers need to research the appropriate semantic code. In HTML, that would be an h tag at some level between 1 and 6. For other technologies, see the Method for that technology.
- Headings that are semantic, but coded at an inappropriate level. For example, jumping from an h2 tag to an h4 tag.
- Headings that contain irrelevant information to the text below the heading. For example, an h3 tag that says “win a vacation” when the subsequent paragraph is about repairing cotton candy machines.
- Headings that have been chosen for styling over navigation. For example, “For the Win” being set to an h2 because h2 font styling is desirable for that text, not because it is naturally content that should be associated with a heading tag.
- Headings that are too long. While there is no fixed character length for headings, they should not contain an entire paragraph.
Design responsibilities
- Ensure your product content 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 can be a shared responsibility with developers. However if the design team
owns
the CSS, that could force a developer to use a non-semantic code element to get the appearance the designer has specified. - Coordinate with SEO teams to balance heading requirements against the search ranking component afforded by headings
Designer tips
Design the headings in the same font and consistent color scheme with descending font sizes based on the heading level. Making sure the font sizes and colors align with the overall design of the website is essential to bringing consistency and cohesion to the design.
User testing and meaningful involvement
- Can the user perceive the different content sections delineated by headings if they are using assistive technology and cannot see the headings?
- Ask a user to find a specific piece of content by only reviewing a list of headings.
- Can the understand the different content sections delineated by headings?
- Can the user move to a heading deeper in the content hierarchy without waiting for the content from an earlier heading to announce?
Technical responsibilities
- Ensure that the section headings are coded semantically — not just visually styled as headings, so that assistive technology can correctly interpret them.
- Ensure that headings are organized in a logical hierarchy.
- Ensure that headings meet the goal of enabling users to quickly locate desired content.
- Reject headings that don’t meet these guidelines.
- Video: Clear Layout and Design from Web Accessibility Initiative's Perspectives Video Series
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
Resources are for information purposes only, no endorsement implied.