WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple H1 tags in an HTML5 web page

for

From: Jared Smith
Date: Mar 10, 2014 2:59PM

Greg Gamble wrote:

> If the relevant content in a section deserves an H1, as per the current specification (spec), how would this be a problem for a user?
> What difficulties, if any, would they have navigating a page?

Really what you're asking is, "Do heading levels matter?" I argue that
they do. And our survey results strongly support this.

When visually browsing a page, the biggest, boldest heading (an <h1>)
typically indicates the document title. The next-smaller headings
(typically <h2>s) indicate the major document sections. Visually, one
can quickly scan the document to determine what the document as a
whole is about and what the major document sections are.

If the main document heading and each section's headings visually
appeared identical, it would suggest that the document heading and the
section headings are equal/parallel in meaning and importance. How
would one know that a document title applies to the document as a
whole as opposed to only the text immediately below it if it appears
exactly the same as all sub-headings? Of course one can easily address
this visual issue with CSS (just make section H1s smaller). Not so for
screen reader users.

By using <h1>s for each section, you are semantically stating to
screen reader users that the sub-sections are equal to and parallel to
the document title. This is just not correct. Now if the outlining
mechanisms worked, the browser would appropriately present the section
H1s as second level headings. But it doesn't work. There is no
difference in how a heading structure would be presented in an
HTML4/XHTML document headings and in an HTML5 document with sectioning
elements (excepting that one version of JAWS that tried and failed
miserably to implement the outlining mechanism). So at present, using
<h1>s everywhere results in an incorrect document structure as
presented to screen reader users regardless of the flavor of HMTL
used.

You asked how this impacts users...

It is a common strategy for screen reader users to quickly navigate to
the first <h1> in a document (typically by pressing the 1 key) to
quickly determine the document title. This almost always places focus
directly at the beginning of the main content area. They can also then
navigate the <h2>s in a document (typically by pressing the 2 key),
etc. to determine the major page sections and sub-sections.
Additionally, the user can open a list of the headings and can
navigate/filter those headings by level.

If H1s are used to begin each sub-section, this functionality becomes
much more difficult as they cannot differentiate document and section
headings (and potentially sub-section and sub-sub section). The
ability to quickly jump to the document title and beginning of the
main content is diminished. How can they know which of all the <h1>s
is the document title and which are section headings if they are
presented identically?

This can also impact users that use keyboard enhancement extensions or
voice control to navigate by headings. They would expect that headings
that appear smaller and below larger headings to be sub-headings, when
in your presented structure they would be parallel headings.

Also, search engines use heading levels to determine content
importance. An h1 is assumed to be the site or document title.
Multiple h1s could negatively impact search engine rankings.

So, there are several ways that users would be impacted by using this
approach. Can you name one way in which users would be benefited by
using your approach? I can't.

I apologize for the long response; I didn't have time to write a short reply.

Jared