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)
Method: Headings in HTML
Platform
- Documents such as PDF, word processing documents, ePub, and slideware.
- Web-based languages such as HTML, and ARIA.
- Platforms such as iOS, and Android.
Technology
HTML
Summary
Assistive Technologies like screen readers rely on semantics in the code to properly help their users understand and navigate the material. For example, screen reader users can bring up a list of headings on the page to browse and navigate to the material they want without having to listen to everything.
How it solves user need
Properly coded headings allow assistive technology users to understand the hierarchy of content and navigate to the section most likely to have the material of interest.
Outcome
This method supports the outcome Convey hierarchy with semantic structure.
Detailed description
Every page should have only one perceivable H1-type heading. There may be more than one in the code, but only one is in view or in the accessibility tree at one time.
There are two ways to approach providing structure in HTML:
- Native HTML semantic tags, such as
<h3>or<main> - ARIA attributes for HTML tags
- Use one or the other. Don’t use both in the same tag or element.
Headings are not only used for organizing text. Headings are also used to organize forms, controls, multimedia and complex applications. They help people locate the information or controls they need.
Exception for fixed page sections:
In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important.
Dependencies
None.
Page Structure Code Example
Three examples
- Simple example (Space Teddy Inc)
- Three column example (Stock Market Up)
- ARIA example of level 7 heading (Apples)
Simple example (Space Teddy Inc)
The following HTML code yields a heading structure that corresponds to this list:
- Space Teddy Inc.
- Navigation Menu
- An inside look at the new Space Teddy 6
- Table of Contents
- Cotton Fur
- Related Articles
- Latest Articles
<body>
<header>
<h1>Space Teddy Inc.</h1>
</header>
<nav aria-labelledby="mainnavheader">
<h2 id="mainnavheader">Navigation Menu</h2>
…
</nav>
<main>
<article>
<h2>An inside look at the new Space Teddy 6</h2>
<nav aria-labelledby="tocheader">
<h3 id="tocheader">Table of Contents</h3>
…
</nav>
<p>…</p>
<h3>Cotton Fur</h3>
<p>…</p>
<aside aria-labelledby="relatedheader">
<h3 id="relatedheader">Related Articles</h3>
<ul>
<li>…</li>
</ul>
</aside>
</article>
<aside aria-labelledby="latestheader">
<h3 id="latestheader">Latest Articles</h3>
<ul>
<li>…</li>
</ul>
</aside>
</main>
</body>
Three column example (Stock Market Up
In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.
Note: It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.
<head> <title>Stock Market Up Today </title> </head> <body> <!-- left nav --> <div class="left-nav"> <h2>Site Navigation </h2> <!-- content here --> </div> <!-- main contents --> <div class="main"> <h1>Stock Market up today </h1> <!-- article text here --> </div> <!-- right panel --> <div class="left-nav"> <h2>Related links </h2> <!-- content here --> </div> </body>
ARIA example of level 7 heading
[Copied from ARIA12] This example demonstrates how to implement a level 7 heading using role=heading
and the aria-level attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.
... <h5>Fruit Trees </h5> ... <h6>Apples </h6> <p>Apples grow on trees in areas known as orchards... </p> ... <div role="heading" aria-level="7">Jonagold/div> <p>Jonagold is a cross between the Golden Delicious and Jonathan varieties... </p>
Atomic Tests
Unit Tested: Visual headings
Method: Create a percentage of the visual headings within a view that have correctly coded as a heading, are coded at the correct level, and can be used as navigation.
Using h1-h6 to identify headings
This test is measured by the number of visual headings on a page, screen, or view
Test results are by percentage (# passed/total # of headings)
Procedure [for each test]
- Check that heading markup is used when content is a heading and the heading markup indicates the appropriate heading level for the content.
- Check that heading markup is not used when content is not a heading
Expected Results
Checks #1 and #2 are true.
Using ARIA role=heading to identify headings
This test is measured by the number of visual headings on a page, screen, or view.
Test results are by percentage (# passed/total # of headings)
Procedure [for each test]
- Examine each element with the attribute role="heading".
- Determine whether the content of the element is appropriate as a heading.
- If the element has an aria-level attribute, determine whether the value is the appropriate hierarchical level.
Expected Results
Checks #2 and #3 are true.
Test for accuracy of heading levels
- Don’t skip levels when going deeper into the hierarchy (i.e. don’t go from H2 to H4).
- You may skip levels when going higher into the hierarchy if it is internally consistent with your header structure (i.e. you may go from H4 to H2).
- Avoid having two headers immediately adjacent with no content in between them.
Procedure [for each test]
- Check that each heading is at the correct level.
Expected Results
Check #1 is true
Test that each heading can be used for navigation purposes
Procedure
- Check that each heading can be used for navigation purposes.
Expected Results
Check #1 is true.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
W3C Resources
Non-W3C Resources
- None currently documented.
Status
Updated: 11 May 2020 to illustrate new architecture proposal.
Change Log
- 11 May 2020 (changes for new architecture proposal)
- 19 March 2020 (first draft)