Preserving what is important from the transient bits and bytes of the interwebs. Photo by Patrick H lauke
Sometimes useful things on the web disappear, but in some cases they are preserved in HTML by the WayBack machine. 2 such articles (written by me) from the W3C HTML Wiki are re-birthed here:
- Use h1 to h6 to identify document structure
- Include a heading to identify article and section elements
Use h1 to h6 to identify document structure
Using only h1 elements in a HTML document results in a flat document outline as heading element semantics are conveyed to users as per the numeric in the heading element tag name.
Example code: using nested section and h1 elements
<body> <h1>top level heading</h1> <section><h1>(intended) 2nd level heading</h1> <section><h1>(intended) 3nd level heading</h1> </section> </section>
Intended document outline:
→ top level heading → → 2nd level heading → → → 3rd level heading
Actual document outline exposed by browsers and assistive technology
→ top level heading → top level heading → top level heading
Example code: to convey intended document outline
<body> <h1>top level heading</h1> <section><h2>(intended) 2nd level heading</h2> <section><h3>(intended) 3nd level heading</h3> </section> </section>
Heading semantics exposed by browsers
The following popular browsers expose the semantics of h1 to h6 elements to assistive technology (e.g. screen readers), by reference to the numeric in their Tag Names (h1
= heading level 1 and so on):
- Firefox
- Chrome
- Edge
- Safari
- Internet Explorer
Heading semantics conveyed by screen readers
The following popular screen readers expose the semantics of h1 to h6 elements to users based on the information provided by graphical browsers (h1
= heading level 1 and so on):
- JAWS
- NVDA
- VoiceOver
- Narrator
Notes
Some related HTML and browser implementation bugs:
- Suggest adding a warning about outline algorithm (WHATWG) Issue
- initial pass at article definition rewrite – HTML5.1 bug
- What to do about the document outline? – HTML5.1 bug
- Do not recommend using nested sections with h1 – HTML5.1 bug
- modify required heading mappings to reflect reality – HTML spec bug
- expose (heading) level in acc layer based on heading elements outline depth – chrome bug
- expose heading level in acc layer based on outline depth not heading numeric value – Firefox bug
- AX: expose (heading) level based on heading elements outline depth – Webkit bug
A few articles about the document outline:
- Computer says NO to HTML5 document outline
- A decade + a year of heading backwards
- There Is No Document Outline Algorithm
Include a heading to identify article and section elements
General guidance
As a general rule, include a heading (h1-h6) as a child of each section and article element.
Screen readers expose the heading hierarchy of document to users by announcing the heading level (1 to 6) of each heading they find. During calculation of a document’s outline, sections and articles with missing headings result in an outline with a malformed heading hierarchy in which some heading levels are skipped—as the heading level of each heading reflects its outline depth.
Example code: simple document with an section that has a missing heading
<body> <h1>top level heading</h1> <section> <!-- empty section -> <section><h3>(intended) 2nd level heading is calculated as a level 3 heading due to being nested in an empty section </h3> </section> </section>
Expected document outline exposed by browsers and assistive technology for the above example
→ level 1 heading → → → level 3 heading
A user’s perspective on missing headings
The heading hierarchy is the best way to understand the relationship between different sections of content. If the hierarchy is logical (cascades without skipping levels), then those relationships are easy to determine. Headings also assist with content location. Moving between headings that have a logical hierarchy enables you to drill down into the page content, narrowing down the part of the page you need to examine in detail to find the content you’re looking for. If the page doesn’t have a logical heading hierarchy, then neither of these things is possible. This significantly reduces the UX from the point of view of a blind person. Léonie Watson
Web Content Accessibility Guidelines advice
To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.). Organizing a page using headings
Guidance from the HTML specification
section element advice
Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
article element advice
A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. Each article should be identified, typically by including a heading(h1-h6 element) as a child of the article element.