Tag Archives: WAI ARIA

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

Useful 10 minutes of WAI ARIA

I would like to post here a selection of resources that might help you start using ARIA in your web applications or websites – although ARIA is still a draft. you can start using it and some AT will know how to read it.

Introduction to WAI ARIA

Written by Gez Lemon for Opera Developer, this article is the best post you can start with. You will understand why ARIA was created in the first place and you will understand some basic terms like: roles, states, properties, and my favorite, ARIA regions.

ARIA Roles 101

Now that you know the basics of ARIA, you can start implementing ARIA roles in your applications. A full list of the roles definitions can be seen here, at the W3C WAI ARIA 1.0 specs website.

Supported states and properties

Learning about ARIA properties is the next logical step, and the W3C WAI ARIA specifications are really helpful even if the first impression is that you read the Constitution or something 🙂

Try some demos: ARIA Live Regions Screen Reader Demo

A very useful video by Aaron Cannon (from cannonaccess.com) about using ARIA live regions in a correct way, the difference between aria-live=”polite” and aria-live=”rude” and how this whole thing works. You need to know that now aria-live=”rude” is not part of the specs anymore (it was really too rude) and we are left with “off”, “polite” and “assertive”.

You might wanna read ARIA and Progressive Enhancement written by Derek Featherstone for A List Apart because the small examples that you will find there will help you understand better the roles and the properties of ARIA.

If you wanna go back to reading the Constitution, WAI-ARIA 1.0 Authoring Practices – An author’s guide to understanding and implementing Accessible Rich Internet Applications is the next step, a page full of examples for you to learn from and best practices when it comes to implementing ARIA – pay special attention to Section 3: Keyboard and Structural Navigation, Section 4: Relationships and Section 5: Managing Dynamic Changes which is really really important.

Learn from examples

  • JQuery Widget Samples – a collection of common JQuery widgets made accessible with ARIA: sliders, progress bars, accordions, trees, carousels, tabs, etc….
  • jQuery-Accessible-RIA – adds some more ARIA examples: a form, a lightbox, tables, etc.

Update with more minutes of WAI ARIA

Aaron Gustafson also has a video with NVDA reading his now famous TabInterface.

TabInterface in Firefox using NVDA screenreader from Aaron Gustafson on Vimeo.

Check the Spanish version of this post:
10 minutos útiles de WAI ARIA