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 12:05PM

Lisa ... that's good to see. Those answers tell me that the use of multiple H1's is the way to go.

Thanks for the link.


Greg Gamble
SBCTC - Olympia | Information Services
p - 360-704-4376
 think before printing


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Lisa Snider
Sent: Monday, March 10, 2014 10:49 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Multiple H1 tags in an HTML5 web page

Hi Greg,

You may have already seen this before, but I found it interesting to see what screen reader users said (albeit a couple of years ago and pre HTML 5) about multiple H1s:

http://webaim.org/projects/screenreadersurvey3/
under heading structures

Might apply?

Cheers

Lisa


2014-03-10 12:43 GMT-05:00 Greg Gamble < <EMAIL REMOVED> >:

> Jared Smith Wrote:
> " Greg was, I believe, instead referring to the fact that you could
> give each sectioning element its own independent heading structure
> beginning with an <h1> (or really any heading level for that fact) and
> the outline presented to the user would be 'reset' and adjusted to
> reflect a proper outline regardless of the heading levels actually used in markup."
>
> Yep, that's what I was talking about ... so what's shown below would
> be valid mark up, but how would this be interpreted by a user using a
> screen reader. When I listen in NVDA "browse" mode and listen to the
> headings it works fine. What would a real user expect to hear? How
> would having multiple H1's be a problem? :
>
> <!doctype html>
> <html>
> <head>
> <meta charset='utf-8' />
> <title>Multi H1 Test</title>
> </head>
> <body>
>
> <h1>Top of page</h1>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
> do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
>
> <section>
> <h1>Some Section header text</h1>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
>
> <h2>Secondary Header</h2>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
>
> <h3>Third Header</h3>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
> </section>
>
> <section>
> <h1>Some Section header text</h1>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
>
> <h2>Secondary Header</h2>
> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
> </section>
>
> <h2>Main Page subheader</h2>
>
> </body>
> </html>
>
> Found an interesting article too:
>
> http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-mult
> iple-h1.html
>
>
> Greg
>
>
>


--
Lisa Snider
Electronic Records Archivist
Harry Ransom Center
The University of Texas at Austin
P.O. Box 7219
Austin, Texas 78713-7219
P: 512-232-4616
www.hrc.utexas.edu