WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JAWS and ARIA's application role

for

From: Ney André de Mello Zunino
Date: Jul 6, 2011 2:57PM

On 06/07/2011 17:50, Ney André de Mello Zunino wrote:

> This might be a problem with my mail user agent, but in case you are
> also unable to see the 3 files I attached in my earlier, post, here is a
> RAR archive with them. I hope it goes through correctly this time.

I give it up. Here are the contents of the 3 files. Sorry about the noise.

=== BEGIN test.html ==
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">

<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1">
<title>ARIA - application role test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<script type="text/javascript" src="test.js"></script>
</head>

<body onload="onBodyLoad()">
<h1>ARIA - <a
href="http://www.w3.org/TR/wai-aria/roles#application">application
role</a> test</h1>
<p>
This page is meant to test the behavior of JAWS when dealing
with ARIA's
<a
href="http://www.w3.org/TR/wai-aria/roles#application">application</a>
and <a
href="http://www.w3.org/TR/wai-aria/roles#document">document</a>
roles.
</p>
<p>
The sample menu below is embedded in a container
<code>div</code> with an
<code>role="application"</code> attribute/value pair. Upon
entering that
container, the screen reader should switch to application mode.
</p>
<p>
With Firefox 5, both JAWS 11 and 12 do not give the expected
results. When
focus arrives at the menu widget, keystrokes are not properly
passed onto
the application as they should. Instead, JAWS handles them in
the usual way,
e.g., for left and right arrow keys, it reads out each letter
when those
keystrokes should actually be handled by the widget's
associated script.
</p>
<p>
Simply moving the <code>role="application"</code>
attribute/value pair up
to the <code>body</code> element produces the desired behavior.
</p>
<div role="application">
<ul id="fruits" role="menu" tabindex="0" aria-activedescendant="1">
<li id="1" role="menu-item" class="selectedItem"
tabindex="-1">Apple</li>
<li id="2" role="menu-item" class="item"
tabindex="-1">Orange</li>
<li id="3" role="menu-item" class="item"
tabindex="-1">Guava</li>
<li id="4" role="menu-item" class="item"
tabindex="-1">Banana</li>
</ul>
</div>
</body>

</html>

=== END test.html ==

=== BEGIN test.css ==
body {
margin: 10% 15%;
font-family: sans-serif;
font-size: 100%;
min-width: 25em;
}

ul[role="menu"] {
margin: 0;
border: 2px solid gray;
padding: 5mm;
}

ul[role="menu"] li.item, ul[role="menu"] li.selectedItem {
display: inline;
padding: 2mm;
}

ul[role="menu"] li.selectedItem {
color: white;
background-color: gray;
}

=== END test.css ==

=== BEGIN test.js ==
const DOM_VK_LEFT = 37;
const DOM_VK_RIGHT = 39;
var fruitItemsCount = 0;

function onBodyLoad() {
var fruitsElem = document.getElementById("fruits");
fruitsElem.addEventListener("focus", function(e) {
onFruitsFocus(e); }, false);
fruitsElem.addEventListener("keydown", function(e) {
onFruitsKeyDown(e); }, false);
fruitItemsCount = fruitsElem.getElementsByTagName("li").length;
}

function onFruitsFocus(event) {
var elem = event.target;
var activeId = elem.getAttribute("aria-activedescendant");
var active = document.getElementById(activeId);
active.focus();
}

function onFruitsKeyDown(event) {
var elem = event.currentTarget;
var active = elem.getAttribute("aria-activedescendant");
var fruitNum = active;
event.preventDefault();
if (event.keyCode === DOM_VK_RIGHT) {
++fruitNum;
if (fruitNum > fruitItemsCount) {
fruitNum = 1;
}
} else if (event.keyCode === DOM_VK_LEFT) {
--fruitNum;
if (fruitNum < 1) {
fruitNum = fruitItemsCount;
}
}
if (fruitNum != active) {
var currItem = document.getElementById(fruitNum);
document.getElementById(active).className = "item";
currItem.className = "selectedItem";
elem.setAttribute("aria-activedescendant", fruitNum);
currItem.focus();
}
}

=== END test.js ==

Cheers!

--
Ney André de Mello Zunino
Pesquisa e Desenvolvimento
Softplan/Poligraph
Sistema da Qualidade Certificado ISO9001:2008
Fone/Fax: 0xx(48) 3027-8000
http://www.softplan.com.br/