Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Test header and footer
in section element with screen readers

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

Here's the example 2 footer material


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

footer material

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.



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA