WebAIM - Web Accessibility In Mind

E-mail List Archives

The HTML5 outline algorithm and JAWS

for

From: Alistair Duggin
Date: Mar 11, 2014 4:33AM

Hi,

I was recently made aware that a couple of version of Jaws (12 - 14?) implements the HTML5 outline algorithm which causes the wrong heading levels to be exposed in IE and Firefox when an author explicitly specifies the heading levels.

There are a couple of article about it here:
http://accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/
http://juicystudio.com/article/html5-outline-algorithm-jaws.php

There is a fix for this - to use role=“heading” and to set aria-level to the expected level.

<section>
<h2 role=“heading” aria-level=“2">Section Heading</h2>
</section>


Is it best practice to apply role and aria level to all headings on a website that is using HTML5 elements? Or is this considered an AT bug and as such to be ignored?
I have only seen one website implemented this fix.

I’ve created some demo pages to illustrate the problem and the fix:

This page demonstrates the problem
http://moneyadviceservice.github.io/accessibility-sandbox/heading-hierarchy/no-aria.html

This page has the wai-aria fix directly added to the markup
http://moneyadviceservice.github.io/accessibility-sandbox/heading-hierarchy/aria-hard-coded.html

This page has the wai-aria fix added with javascript
http://moneyadviceservice.github.io/accessibility-sandbox/heading-hierarchy/aria-added-with-js.html


cheers,
Al