Categories
HTML Accessibility

Preserved in HTML

Doctor swallow framed on the wall of a chapel in a stately home. there is another picture on the wall as well, Padme.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

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:

A few articles about the document outline:


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.

2 replies on “Preserved in HTML”

Thanks for writing this.

I have one question where I have seen people mentioning that there should be only one heading tag, and that’s is for the whole page.
So, I wonder is it OK to include another h1 inside your article tag? I don’t think there’s such a hard rule not to include, and mdn docs says it’s ok.

What are your thoughts on this? Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *