Description

A html5 recommends a interim way to code a heading and subheading in a <header> section element like this:

<header>
<h1>Main heading</h1>
<p>some secondary heading information<p/>
</header>

It is attractive, but raises some concerns. Screen readers map the <header> element to role="banner" , which is an ARIA Landmark. If the above type of heading group is identified by screen readers as a banner it could be confusing and not accurate.

In response it was proposed that it should be in a <section> or <article> element so it will not report as a landmark and that authors should know this. Below are tests.

Findings

The <header> element can be used to wrap a heading and subheading without adverse effects to the Landmarks list **IF** it is placed in <section> or <article> elements, otherwise it will show up as an extra unintended banner landmark which will complicate the UI for screen reader users. The example in HTML should be something like this to avoid messing up screen reader users:

<section><header>
<h1>Main heading</h1>
<p>some secondary heading information<p/>
</header><p>More content</p> </section>

Conclusion

Getting screen readers to recogize the sub heading and gettiing authors to always use <Section> or <article> is a tall order. I suggest we move to some sort of subheading element or role.

---

Example 1: Heading and subheading inside header without any section or article element around it.

Here's example 1 header content

Here's the subheading

here's example 1 content

---

Example 2 header and footer elements in a section element

Here's example 2 header content

Here's the subheading

here's example 2 content

---

Example 3 header and footer elements in an article element

Here's example 3 header content

Here's the subheading

here's example 3 content

---

Code Used

Example 1

<header class="removetemplatestyle">
<h4>Here's example 2 header content<h4>
<p>Here's the subheading</p></header> <p>here's example 2 content</p>

Example 2

<section>
<header class="removetemplatestyle"><h4>Here's example 2 header content<h4>
<p>Here's the subheading</p></header>
<p>here's example 2 content</p>
<footer class="removetemplatestyle">Here's the example 2 footer material</footer>
</section>

Example 3

<article>
<header class="removetemplatestyle"><h4>Here's example 2 header content<h4>
<p>Here's the subheading</p></header>
<p>here's example 2 content</p>
<footer class="removetemplatestyle">Here's the example 2 footer material</footer>
</article>

Results

Accessibility Support technology used

• Table cells with a * and red background = fail

	Example 1: Heading and subheading inside header without any section or article element around it	Example 2 header and footer elements in a section element	Example 3 header and footer elements in an article element
IE11/JAWS16	Shows up inaccurately as a banner landmark	OK	OK
CHROME41/JAWS16	Shows up inaccurately as a banner landmark	OK	OK
FF36/JAWS16	Shows up inaccurately as a banner landmark	OK	OK
CHROME41/NVDA2015.1	Shows up inaccurately as a banner landmark	OK	OK
IE11/NVDA2015.1	OK	OK	OK
FF36/NVDA2015.1	Shows up inaccurately as a banner landmark	OK	OK
VoiceOver in Safari	OK	OK	OK
VoiceOver in Chrome	Shows up inaccurately as a banner landmark	OK	OK
VoiceOver on iPhone	Shows up inaccurately as a banner landmark	OK	OK

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.