WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: guidance on headings hierarchy

for

From: Guy Hickling
Date: May 20, 2019 5:00PM

Catherine,

Besides the logo, you were asking about the rest of the heading structure
as well, which raises the issue of the headings in the column sidebar.

To take the simplest case, suppose your sidebar was on the right side of
the page (and we will assume the markup for it therefore follows the main
content markup in the HTML source, as would usually be the case barring
floats and suchlike). To use h3 elements would be telling screen reader
users that they were logical subheadings under the last h2 heading, which
is not normally the case for sidebar headings. Often a sidebar is repeated,
unchanged, on most pages of a website. In which case any headings it has
are clearly not logical subheadings of whatever just happens by chance to
be the last h2 on any particular page!

So, in our hypothetical righthand sidebar we could not use <h3> (or
anything lower). Equally we could not use h1 elements since there should
only be one <h1> on a page. The only choice then is to use h2, and use CSS
to achieve the font-size wanted for them.

Now put the sidebar back where you have it on the left side of the page.
That should not change the heading elements, so still use h2. It seems
counter-intuitive to use h2 headings before the h1, but that is the same
problem as with sites that have a carousel or hero image at the top, with
the main page h1 heading below that. The carousel headings should all be h2
even though they come before the h1 heading. I guess screen reader users
are well used to that structure (though one screen reader, NVDA I think,
gets that wrong when displaying a list of the headings). So I would argue
the headings in your sidebar should both be changed from h3 to h2.

Regards,
Guy Hickling