WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Query on heading hierarchy

for

From: Osmo Saarikumpu
Date: Mar 21, 2018 8:24AM

On 20/03/2018 16:28, glen walker wrote:
> +1 to Birkir. The purpose of the guideline is to make sure the semantic
> heading levels match the visual presentation.

"The intent of this Success Criterion is to ensure that information and
relationships that are implied by visual or auditory formatting are
preserved when the presentation format changes." (Understanding SC 1.3.1)

If I read you both correctly, you'd be saying that the underlying code
should "support" or "confirm" the visual presentation? The way I read it
is: it's all about the underlying information and it's relationship to
the context, where visual formatting is just an aid for the visually
capable. Or as the prose in
<https://webaim.org/techniques/semanticstructure/#contentstructure> says:

"When encountering a lengthy web page, sighted users often scroll the
page quickly and look for big, bold text (headings) to get an idea of
the structure and content of the page. Screen reader and other assistive
technology users also have the ability to navigate web pages by heading
structure, assuming true headings are used (as opposed to text that is
styled to be big and/or bold). This means that the user can view a list
of all of the headings on the page, or can read or jump by headings, or
even navigate directly to top level headings (<h1>), next level headings
(<h2>), third level headings (<h3>), and so on."

> It doesn't say it has to be
> h1 followed by h2 followed by h3.

Right, not in the "Success Criterion", but in the "Semantic Structure"
article (referenced URL) it says:

"Pages should be structured in a hierarchical manner, generally with one
1st degree headings (<h1>) being the most important (usually page titles
or main content heading), then 2nd degree headings (<h2> - usually major
section headings), down to 3rd degree headings (sub-sections of the
<h2>), and so on. Technically, lower degree headings should be contained
within headings of the next highest degree (i.e., one should not skip
heading levels, such as from an <h2> to an <h4>, going down the document)."

The "WAVE Web Accessibility Tool" reflects the former quote. When I
navigate to a page that skips a heading level, it says:

*Alerts*
Skipped heading level

*What It Means*
A heading level is skipped.

*Why It Matters*
Headings provide document structure and facilitate keyboard navigation
by users of assistive technology. These users may be confused or
experience difficulty navigating when heading levels are skipped.

*How to Fix It*
Restructure the document headings to ensure that heading levels are not
skipped.

*The Algorithm... in English*
A heading level is skipped (e.g., an <h1> is followed by an <h3>, with
no intermediate <h2>).

> While that's certainly ideal, there are
> lots of situations where it makes sense to skip a level.

I'd argue that no such cases exist. This is due to the underlying markup
language, that says:

"Subsequent headings of equal or higher rank start new implied
subsections that are part of the previous section's parent section.
Subsequent headings of lower rank start new implied subsections that are
part of the previous one. In both cases, the element represents the
heading of the implied section.

h1–h6 elements must not be used to markup subheadings, subtitles,
alternative titles and taglines unless intended to be the heading for a
new section or subsection."

<https://www.w3.org/TR/html52/sections.html#headings-and-sections>

--
Best wishes, Osmo