WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple H1 tags in an HTML5 web page

for

From: Lisa Snider
Date: Mar 10, 2014 11:48AM

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-multiple-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