WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple H1 tags in an HTML5 web page

for

From: Chagnon | PubCom
Date: Mar 10, 2014 2:02PM

"you can use a properly-leveled heading structure that always has and always
will work."

Interesting discussion, but there's one factor that yet hasn't been
mentioned.

What kind of document are you discussing? An entire webpage? One story on a
webpage? A Word document? A magazine? Or what?

If this is a webpage with multiple stories on it, like a portal webpage for
a newspaper, our testers have requested that each story get its own H1 tag.
The stories are independent from each other on different unrelated topics.
They have nothing in common other than that they are news at that point in
time. In an hour, the webpage's structure will change.

If this is a document (Word or PDF) with sidebars, or a webpage with
sidebars, sometimes it's not so easy to wrangle everything into a strict
hierarchical heading structure. Some sidebars are directly related to the
main story, so they're pretty easy to fit into the structure as <H2> or
<H3>. But other sidebars are not so clearly related to the main story.

What if the sidebar is only remotely related to the main story? An <H2> tag
gives the connotation that it's more directly related than it really is. Or
what if the publisher just wants to include another topic on the page, as in
"if you're reading Topic A, then you might be interested in Topic X in this
sidebar." Tagging it as part of the main hierarchy could be incorrect.

Most webpages and many document pages (like brochures, magazines, and
newspapers) have so many different pieces of content on them that don't fit
the hierarchy.

How do you propose handling heading structure and hierarchy in these common,
but complex, situations?

-Bevi Chagnon
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
www.PubCom.com - Trainers, Consultants, Designers, Developers.
Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
New Sec. 508 Workshop & EPUBs Tour in 2014 - www.Workshop.Pubcom.com

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jared Smith
Sent: Monday, March 10, 2014 3:24 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Multiple H1 tags in an HTML5 web page

Greg Gamble wrote:
> I understand, but the numbers pointing to the use of a single H1 on a page
as less desirable then having multiple H1's.

No, the data doesn't indicate this at all. It only indicates that 13% more
users prefer the site name/logo AND the document title as being <h1>s, over
just the document title.

> The idea that a single H1 on a page is correct has changed with HTML5.

No, not really. I refer back to Steve's quoting of the
recommendations: "Sections may contain headings of any rank, and authors are
strongly encouraged to use headings of the appropriate rank for the
section's nesting level."

> So adding them per the HTML5 spec seems to me the way to go, if it makes
sense to do so.

It doesn't make sense, at least from an accessibility perspective. You can
present a heading structure that could cause confusion and that relies on
functionality that doesn't exist, or you can use a properly-leveled heading
structure that always has and always will work. Assuming there is no barrier
to you shifting the heading levels appropriately, I can see no advantage to
maintaining the structure you've presented over properly-leveled headings.

> Another survey with HTML5 markup and multiple H1's in sections would be
interesting to read ...

Yes, but only if the outlining mechanism is put in place and supported. In
the meantime, please refer to
http://webaim.org/projects/screenreadersurvey4/#levels which clearly
indicates a strong preference for properly-leveled headings.

Jared