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.

Uncategorized

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

914 823 3361