How screen readers speak a page with HTML5 and ARIA

After seeing how AT reads a content generated with CSS pseudo-elements I was thinking to move on to HTML5. And since there are a lot of people saying we should mix HTML5 with ARIA in order to increase the accessibility of a website, then why not test and see what happens?

A piece of code…

...
 
<header id="header" role="banner">  
    <div id="logo">Logo here</div>
    <nav role="navigation">
        <ul id="mainnav">........</ul>
    </nav>
</header>
 
<section id="content" role="main">  
 
    <h1>A level one heading here please</h1>
 
    <div role="application"><p>Here is where an application will be coded. </p></div> 
 
    <article role="article">             
            <h2 class="index-headings">Blog entry no 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article role="article">
            <h2 class="index-headings">Blog entry no 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside role="complementary">  
    <h2>Sidebar</h2>
    <ul>......................</ul>
</aside>
 
<footer id="footer"  role="contentinfo">This is where the footer will stay.</footer>     
...

This is the page containing both HTML5 elements:

  • header
  • nav
  • section
  • article
  • aside
  • footer

and ARIA roles (learn about ARIA):

  • role=”banner” – for the header element
  • role=”navigation” – for the nav element
  • role=”main” – attached to the section
  • role=”application” – in case I need to add a widget
  • role=”article” – for the article element
  • role=”complementary” – for the aside
  • role=”contentinfo” – for the footer

How NVDA, JAWS and Window Eyes read the HTML5-only version

Long story short, no screen reader noticed the HTML5 elements – as expected. They all behaved like those elements were simple DIVs and read the webpage accordingly.

How NVDA, JAWS and Window Eyes read the HTML5 + ARIA version

Much better this time, ARIA is doing wonders although I don’t understand why Window Eyes doesn’t even pronounce the existence of the headers…I am a newbie in this field so maybe I did something wrong? I do not want to do WE any injustice so let’s say the results are inconclusive regarding this software.

The difference

So what was the difference between the two versions? What ARIA brought from this point of view?

The banner area: role=”banner”

NVDA – “banner landmark logo here navigation landmark list with 4 items visited link home……. ”
JAWS – “banner landmark logo here navigation landmark list with 4 items visited link home……. ” At the beginning it also says that there are 8 landmarks, hurray!!!

The main area: role=”main”

NVDA – “main landmark heading level one …”
JAWS – “main landmark heading level one …”

The application area: role=”application”

NVDA – the application role was not read at all.
JAWS – “application landmark here is where….”

The articles: role=”article”

NVDA – the article was not mentioned in any way.
JAWS – “article landmark heading level….”

The sidebar: role=”complementary”

NVDA the sidebar was read like this: “complementary landmark heading level 2…..”
JAWS – “complementary landmark heading level 2…..”

The footer: role=”contentinfo”

– and the footer: “content info landmark this is where the….”
JAWS – “content info landmark this is where the….”

So far JAWS was the only one able to speak all the landmarks while NVDA missed the article and the application. Like I mentioned before, Window Eyes din not read ARIA elements but maybe it’s just me being a newbie…Your opinion is much appreciated, maybe together we can make it work :)

Check the Spanish version of this post:
Cómo leen los lectores de pantalla una página con HTML5 y ARIA

6 thoughts on “How screen readers speak a page with HTML5 and ARIA”

  1. Great article – a pity about Windows Eyes. I’m not great with it either, but given all its options there could well be something you missed.

    The one thing I’d say is that the role=”application” might have done something if you’d added a new element to it with aria attributes (using Javascript). I’m still trying to get my head around Aria with JS but there are some aria roles specifically for new elements. Maybe role=”application” works that way. Just a thought.

  2. Nope, the application div was empty – I put it there just to hear it. Regarding Window Eyes, I agree there are options I haven’t checked yet but I find it harder to use than other screen readers :( While a lot of people are experts in Window Eyes I think there are also a lot using it as it comes – in my case it didn’t work as expected, but hey: I’m learning.

  3. Thanks for this article! A nice review. It’s useful to have videos with audio demonstrating exactly what the screen readers say, especially with the latest versions of JAWS and NVDA.

    Regarding NVDA not reading “article” as a landmark, strictly speaking this is the correct behaviour as the “article” role is a document structure role as opposed to a landmark role (http://www.w3.org/TR/wai-aria/roles#document_structure_roles).

    And as far as Window-Eyes goes, well, that’s just Window-Eyes these days, which suffers from some fairly serious bugs when HTML5 and ARIA roles are used together, and in some instances, simply when ARIA roles are used. Some of this I’ve documented at http://www.accessibleculture.org/research/html5-aria/. I don’t think Window-Eyes is going to have real ARIA support until version 8, and it’s just coming out with version 7.5 now.

    It is interesting that NVDA does not even recognise “application” as a landmark. This I didn’t know. Apparently, it does not even appear in the Elements List (press NVDA+F7) as a landmark. It does make sense, though, I think, given the way that NVDA treats role=”application”, namely by having it not engage the virtual buffer at all. The “application” landmark would not be available to NVDA’s landmark navigation commands since it is outside the buffer, as it were. Nor would it be announced by NVDA while reading a page’s document content.

    Cheers.

  4. Thank you Eleg for the info and the link. Did you use that in one of your projects? Can you show us one link or an example? I am curious to see how screen readers speak 2 ARIA roles :)

  5. It is interesting that NVDA does not even recognise “application” as a landmark. This I didn’t know. Apparently, it does not even appear in the Elements List (press NVDA+F7) as a landmark. It does make sense, though, I think, given the way that NVDA treats role=”application”, namely by having it not engage the virtual buffer at all. The “application” landmark would not be available to NVDA’s landmark navigation commands since it is outside the buffer, as it were. Nor would it be announced by NVDA while reading a page’s document content.

    by
    pluskb webdesigning

Comments are closed.