WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Does WCAG require headings start at 1?

for

Number of posts in this thread: 17 (In chronological order)

From: Krista Greear
Date: Fri, Jul 23 2021 1:40PM
Subject: Does WCAG require headings start at 1?
No previous message | Next message →

Perhaps this question is a bit silly but I'm looking for confirmation -

Is there any where in the WCAG that says that web page headings need to
start with an h1? There are numerous examples on the W3's site that have
headings start with an h2.

Thanks!

--
Krista Greear
Accessibility and Inclusivity Crusader
ATHEN Executive Council Vice President
Access Technology Higher Education Network <https://athenpro.org/>

From: Colleen Gratzer
Date: Fri, Jul 23 2021 1:59PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

Krista, are you referring to example number 2 here?

https://www.w3.org/WAI/WCAG21/Techniques/html/H42


Colleen Gratzer, Creative Boost
- Host of the Design Domination podcast
- Mentor to designers
- Accessibility course instructor
creative-boost.com

On 7/23/21 3:40 PM, Krista Greear wrote:
> Perhaps this question is a bit silly but I'm looking for confirmation -
>
> Is there any where in the WCAG that says that web page headings need to
> start with an h1? There are numerous examples on the W3's site that have
> headings start with an h2.
>
> Thanks!
>

From: Jonathan Avila
Date: Fri, Jul 23 2021 1:59PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

You may find this article useful about headings: https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/

Jonathan

From: Birkir R. Gunnarsson
Date: Fri, Jul 23 2021 2:08PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

Yeap, it's a great article.
The short answer is, no.
1.3.1 basically says that text that looks like heading should be
marked up as headings and text that looks bigger should be presented
as lower level headings.
The largest heading on the page, tyipcally the title of the main
contnet, should have the lowest heading level (typically h1).

Anything that looks smaller than that should have a higher heading level.
If two headings visually look to have the same emphasis (they get the
same visual treatment) they should have the same heading level.

The best/most predictable heading structure is to have the main
content of the page start with an h1 heading.
Sometimes you have headings as part of the header navigation (e.g. to
separate sections), I'd use h2 or h3 headings for those (and, yes, to
someone navigating the page with a screen readers they will come
first).


On 7/23/21, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> You may find this article useful about headings:
> https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/
>
> Jonathan
>
>

From: David Engebretson Jr.
Date: Fri, Jul 23 2021 5:11PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I agree with Birkir,

We often suggest there be one heading level 1 that reflects the title element of the page, and that it is at the beginning of the main region; the spot where visually oriented folks are meant to be drawn to initially.

Then all major subsections of the page are at heading level 2, sub sub sections are at heading level 3, the most important thing is that the major sections and subsections follow a numerically logical order. It's an "outline" of the information on the page/document.

If there are heading levels before the one heading level 1 then that is okay. Most assistive technology users know that the one heading level 1 on the page is the beginning of the main content.

Peace,
David

From: L Snider
Date: Fri, Jul 23 2021 5:28PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I take a whole different view, and ignore WCAG. Everyone I have known
who uses a screen reader every day wanted a Heading 1 on the page at
the top and as the first heading. So I always advise clients to do
this...Plus, for me, headings were given numbers to indicate
importance, otherwise what is the point of the numbers? People who are
blind, Deaf-Blind and low vision have told me over the years that they
have to figure out what the developer or content person was trying to
do, and they have enough barriers thrown at them every day on social
media platforms, websites, documents, etc. I do many things that
aren't WCAG, including checking for colour blindness combinations,
since we have had simulators since 2000.

Others do things differently than me.

Cheers

Lisa

On Fri, Jul 23, 2021 at 4:40 PM Krista Greear
< = EMAIL ADDRESS REMOVED = > wrote:
>
> Perhaps this question is a bit silly but I'm looking for confirmation -
>
> Is there any where in the WCAG that says that web page headings need to
> start with an h1? There are numerous examples on the W3's site that have
> headings start with an h2.
>
> Thanks!
>
> --
> Krista Greear
> Accessibility and Inclusivity Crusader
> ATHEN Executive Council Vice President
> Access Technology Higher Education Network <https://athenpro.org/>
> > > >

From: glen walker
Date: Fri, Jul 23 2021 5:38PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I don't think anyone disagrees with you. We all push for proper headings.
But the original question was whether it failed WCAG, and it doesn't.

That doesn't mean it doesn't fail usability.

On Fri, Jul 23, 2021 at 5:28 PM L Snider < = EMAIL ADDRESS REMOVED = > wrote:

> I take a whole different view, and ignore WCAG. Everyone I have known
> who uses a screen reader every day wanted a Heading 1 on the page at
> the top and as the first heading. So I always advise clients to do
> this...Plus, for me, headings were given numbers to indicate
> importance, otherwise what is the point of the numbers? People who are
> blind, Deaf-Blind and low vision have told me over the years that they
> have to figure out what the developer or content person was trying to
> do, and they have enough barriers thrown at them every day on social
> media platforms, websites, documents, etc. I do many things that
> aren't WCAG, including checking for colour blindness combinations,
> since we have had simulators since 2000.
>
>
>

From: Barry
Date: Sat, Jul 24 2021 3:20AM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I agree with Lisa... mostly. There is some argument for having a h2 for the breadcrumb, which is usually above the start of content.

Cheers

Barry

From: Barry
Date: Thu, Jul 29 2021 3:20AM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

A classic example of a site that follows WCAG and gets 100% on Google Lighthouse is H&M, but the headings are all over the place. Two h1s and skipping from h1 to h3 on the landing page, and no h1 at the start of content with only h3s on the home page.
https://www.hm.com/entrance.ahtml?orguri=%2F

Cheers

Barry

From: glen walker
Date: Thu, Jul 29 2021 7:40AM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

Totally off topic from the original post but scanning the H&M site is a
good example of how scanners can't find everything. Notice all the
language names on the page? None of them have the LANG attribute (WCAG
3.1.2).

And just to sidetrack even more, here's a fun tongue in cheek article about
perfect lighthouse scores -
https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/


On Thu, Jul 29, 2021 at 3:20 AM Barry via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> A classic example of a site that follows WCAG and gets 100% on Google
> Lighthouse is H&M, but the headings are all over the place. Two h1s and
> skipping from h1 to h3 on the landing page, and no h1 at the start of
> content with only h3s on the home page.
> https://www.hm.com/entrance.ahtml?orguri=%2F
>
> Cheers
>
> Barry
>

From: Barry
Date: Thu, Jul 29 2021 7:47AM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

Hi Glen


Yeah, sorry about that. It may have drifted a little with the conversation, but I wouldn't say it was totally off topic. My example was to demonstrate that WCAG, which I believe Googles Lighthouse uses for its algarythms, does not require that headings start at one.

Cheers

Barry

From: glen walker
Date: Thu, Jul 29 2021 10:18AM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

No, I meant *my* comments were going to be off topic, not yours :-)


On Thu, Jul 29, 2021 at 7:48 AM Barry via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi Glen
>
>
> Yeah, sorry about that. It may have drifted a little with the
> conversation, but I wouldn't say it was totally off topic. My example was
> to demonstrate that WCAG, which I believe Googles Lighthouse uses for its
> algarythms, does not require that headings start at one.
>
> Cheers
>
> Barry
>

From: Schulz, Leslie
Date: Thu, Jul 29 2021 1:46PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I believe that Lisa is on the right track of what users need.

I would like to point out that even though the w3.org is the organization responsible for creating the WCAG guidelines, this does not mean that every single page on the website was designed to serve as an example. Any website that large was written by many different people at many different times.
If there are failures on the site, please contact the w3.org and let them know, especially if that page is within the WCAG guidelines.

Automatic tools can give passing grades for headings if they find that no headings are skipped.

Only people can determine the logic of headings.

I once worked with a Bootstrap template that definitely passed automatic tools, but the headings were not logical for an outline.
Bootstrap is designed as rows.
The first "row" of the template had the h1.
The second row had h2's.
The 3rd row had h3's, etc. All the way to h6.

Think of headings as an outline of the page.
The h1, which should be at or close to the top, should state the main topic.
Then consider the outline.
H2's should be logical.
H3's should be related to the h2 they are under.

H1
H2
H3
H4
H3
H4
H2
H3

And, whatever you do, NEVER set a heading because you like the size you get when you do.
That is what css is for.

All that being said, this is an excellent article from the Paciello Group on what does and does not fail WCAG.

https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/
They state that the only actual failures are
1. Heading-like text that isn't marked up as headings
2. Illogical heading order
3. Non-descriptive headings

That being said, I still vote for the logic of one h1 on the page.

Thanks,
Leslie


From: Colleen Gratzer
Date: Thu, Jul 29 2021 1:51PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

That was great, Glen. Thanks for sharing.


Colleen Gratzer, Creative Boost
- Host of the Design Domination podcast
- Mentor to designers
- Accessibility course instructor
creative-boost.com


On 7/29/21 9:40 AM, glen walker wrote:
> And just to sidetrack even more, here's a fun tongue in cheek article about
> perfect lighthouse scores -
> https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/

From: Don Mauck
Date: Thu, Jul 29 2021 3:24PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

I'll ad my opinion. The explanation of headings here is well done. I will also state that as a Screen Reader user in very complex applications, if there are no headings or they are terribly out of order, it adds a much bigger challenge for complex page understanding. When I look at outside web sites, if they don't have good headings, I just won't use nor shop on that site.

From: David Engebretson Jr.
Date: Thu, Jul 29 2021 8:52PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | Next message →

Are there any basic tutorials for how to create a logical Table Of Contents from logical heading structure? I can think of a couple of methods but I wouldn't want to interrupt the love fest going on here for heading level 1's outside of the beginning of the main region *smile* (breadcrumb regions at heading level 2 have been the only time I allow it to pass, and that is just about to change). I'm all about consistency of UI and UX and sometimes our designers put them before the heading level 1, sometimes after... not consistent.

Hopefully you all still agree there should be one heading level 1 with heading level 2 as the main sections and heading level 3 as subsections of heading level 2, etc.

If not then maybe I just don't understand what the original question was asking...

I thought the original question was asking if it was okay to put heading levels other than heading level 1 as the first heading on the page.

The intent of my initial response was to say that it's okay to put headings other than heading level 1 before the one heading level 1 per page that should be at the beginning of the main region. This is where a visually oriented persons eyes will be drawn to by the designer. Then heading level 2 will be the main sections, heading level 3 subsections of heading level 2, etc... all logical numerically.

But before and after the semantic main region you'll often see content. If you put headings in there then cool. Just don't put heading level 1 in there. Heading level 1 is one per page and at the beginning of the main region only.

Just remember to start your semantic header and footer regions with heading level 2 then you'll have no issue as long as you follow the logic.

Peace,
David

From: David Engebretson Jr.
Date: Thu, Jul 29 2021 8:54PM
Subject: Re: Does WCAG require headings start at 1?
← Previous message | No next message

+1! Consistency is key to accessibility.