WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple H1 tags in an HTML5 web page

for

From: Greg Gamble
Date: Mar 10, 2014 3:47PM

Jared ... your long response is much more appreciated then any short one would have been ;-)

But you mentioned h1 as the biggest and boldest. I can do the same with a span tag, but I get what you're saying ... I just don't see site structure/markup and site presentation as the same thing.

As for my being such a pain for you and Steve:

http://goo.gl/hAIJOR

Google SEO and Multiple H1's:
http://youtu.be/GIn5qJKU8VM

and lastly, but first a quote:
I would in fact prefer, instead of <h1>, <h2> etc for headings [those come from the AAP DTD] to have a nestable <section>..</section> element, and a generic <h>..</h> which at any level within the sections would produce the required level of heading.
- Tim Berners-Lee

http://goo.gl/rQlJb


This is what makes me question the validity of the old school? view of headings, pertaining to HTML5. As for the one way in which users would be benefited ... read a properly formatted HTML5 blog. I did with NVDA, and it made sense to me. But I don't rely on AT, so what I think works means very little.

Greg


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

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