HTML 5 Headings Behavior With Screen Readers

Recently I have observed a slightly but significant difference in JAWS behavior while browsing a website developed on HTML 5. Below are my findings and recommended solution.

HTML 5 have became a hot topic in the web developer community. One of the reasons for its strength is semantic tags. In prior versions of HTML <div> has played a vital role. In the process of replacing <div> with more appropriate tags HTML 5 have brought some new tags such as <article>, <section> etc.

The hierarchy of headings are announced inconsistently when these tags are used. Let me explain the behavior with different screen readers.

I have tested this with JAWS 13, NVDA 2013.1, Talkback on android and Voiceover on IOS 6. Except JAWS 13 the remaining screen readers showed a similar experience.

When you write a <h1> within a <div> it will be announced as heading level one by JAWS. It is consistent across any tag, meaning JAWS will announce heading level one if you write <h1> within any other tags.

This behavior is not similar when you write <h1> within <section>, <article>, <aside> tags of HTML 5. The screen reader JAWS announces one level below the provided hierarchy, meaning if <h1> is written in a <section> JAWS announces it as heading level two. It further decreases one more level if the same <h1> is written inside <article> when <article> is inside <section>.

Recommended Solution

I am able to resolve the same using Accessible Rich Internet Applications (ARIA). Use role as heading and aria-level as “n” (where n= 1 to 6) as shown below.

<section>
<h1 role=”heading” aria-level=”1″>This is a level one heading</h1>
<article>
<h2 role=”heading” aria-level=”2″>This is a level two heading under article within section</h2>
</article>
</section>

Note

  1. Use same aria-level as the level of heading you want to actually announce.
  2. Role=”heading” announces as heading by the screen reader where as aria-level takes care of the hierarchy of level.
  3. Screen readers will not announce it twice as both role heading and heading tag are used.

Comments are closed.