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 11:43AM

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