Organizing a page using headings (1.3.1 and 2.4.6) #3530

TheUntamed · 2023-11-02T11:32:13Z

TheUntamed
Nov 2, 2023

Hello,
I'm currently trying to figure out what I'm allowed to do with Heading elements (<h1> to <h6>) and what not.
My understanding I get from this WCAG 2.2 entry:
https://www.w3.org/WAI/WCAG22/Techniques/general/G141.html
is, that the headings have to be in order
(h1 followed by h1 or h2, h2 followed by h2 or h3 etc.)
without gaps (h2 followd by h4 etc.)
or declines (h3 followd by h2 etc.)
unless the elements are part of different page sections.

But then in the example shown, a h3 is followed by an h2:

<body>
    <h1>Cooking techniques</h1>
    ... some text here ...
    <h2>Cooking with oil</h2>
    ... text of the section ...
    <h3>Sautéeing</h3>
    ...
    <h3>Deep frying</h3>
    <h2>Cooking with butter</h2>
    ... text of the section ...
  </body>

Now I'm confused and hope someone can clear things up.

Thanks.

Aircl0wn · 2023-11-02T11:59:42Z

Aircl0wn
Nov 2, 2023
Collaborator

It's not a fail to have something like H2 > H4 with a gap if the content is still relevant. The structure is still conveyed (SC 1.3.1). Even on Level AAA, this would not fail, as SC 2.4.10 only states headings need to be used, but doesn't say anything on the order.
It's not very user-friendly, of course.

If the content is no longer relevant, this would constitute a failure. This can be problematic if you have an intermittent call-out component, for example, that refers to some other article or different content because that content does not relate to the preceding heading.

A level up, so H3 > H2 indicates a new subject/section under the H1 so this content should no longer be (closely) related to the previous H2. So it really depends on the content here whether that could be considered a failure.

In the example here, the second H2 introduces a new topic under the H1 “cooking techniques”, namely cooking with butter instead of oil.

1 reply

TheUntamed Nov 2, 2023
Author

Oh ok, so a new section in the semantic is enough, I thought a new section actually has to be created with syntax (like

elements).

JAWS-test · 2023-11-02T13:01:27Z

JAWS-test
Nov 2, 2023

It's not a fail to have something like H2 > H4 with a gap if the content is still relevant.

Please note that H2 > H4 is not a WCAG violation, but

not good from an accessibility point of view
a violation of the HTML specification:

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Organizing a page using headings (1.3.1 and 2.4.6) #3530

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Organizing a page using headings (1.3.1 and 2.4.6) #3530

TheUntamed Nov 2, 2023

Replies: 2 comments · 1 reply

Aircl0wn Nov 2, 2023 Collaborator

TheUntamed Nov 2, 2023 Author

JAWS-test Nov 2, 2023

TheUntamed
Nov 2, 2023

Replies: 2 comments 1 reply

Aircl0wn
Nov 2, 2023
Collaborator

TheUntamed Nov 2, 2023
Author

JAWS-test
Nov 2, 2023