WebAIM - Web Accessibility In Mind

E-mail List Archives

Help with ARIA-Live

for

From: Mark Guisinger
Date: Apr 1, 2010 1:00PM

Can someone tell me why the following implementation of ARIA-Live is not allowing the message to be "read" when the additional message is displayed on the page. I'm using JAWS 10 and FireFox 3.5.8 and IE 7.0. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input hint accessibility test</title>


<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.1).
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="javascript">
$(function(){
$('input').bind('focus', function(){
var hint=$(this).attr('class');
$('span#'+hint).fadeIn(500);
});
$('input').bind('blur', function(){
var hint=$(this).attr('class');
$('span#'+hint).fadeOut(300);
});

$('a.tip,a.tip1').bind('focus', function(){
//console.log('hello');
var test=$(this).attr('class');
//$(this).attr('aria-expanded',"true");
$('span#'+test).fadeIn();
});
$('a.tip,a.tip1').bind('blur', function(){
//console.log('goodbye');
var test=$(this).attr('class');
$('span#'+test).fadeOut();
//$(this).attr('aria-expanded',"false");
});
$('a.tip,a.tip1').mouseover(function() {
var test=$(this).attr('class');
//$(this).attr('aria-expanded',"true");
$('span#'+test).fadeIn();
});
$('a.tip,a.tip1').mouseout(function() {
var test=$(this).attr('class');
$('span#'+test).fadeOut();
//$(this).attr('aria-expanded',"false");
});


});
</script>
</head>

<body>
<label for="email">Email:</label><input class="hint" name="email" type="text" style="position:absolute;left:100px;"/>

<br/><br/>

<div id="container1" >
<label for="pswd">Password:</label><span id="hint2" aria-live="assertive" style="display:none; position:absolute; left:275px;top:50px;border:1px thin blue; width:400px; background-color:#ffffcc;">Your password must contain atleast one of the following: a capital letter, a lower case letter, a number, and a special character (e.g. $, &, #)</span>
<input class="hint2" id="pswd" name="pswd" type="text" style="position:absolute;left:100px;" />
</div>

<br/><br/>

<div id="container" >
<label for="ssn">SSN:</label><span id="hint1" aria-live="polite" style="display:none; position:absolute; left:275px;top:110px;border:1px thin blue; width:400px; background-color:#ffffcc">Enter your SSN with the formatting characters</span>
<input class="hint1" id="ssn" name="ssn" type="text" style="position:absolute;left:100px;"/>
</div>
<br /><br />
<div id="container3">
<a href="#" class="tip">my link</a>
<span id="tip" class="tip" role="link" aria-live="assertive" style="display:none; background-color:#ffffcc; color:#00000;width:200px; height:30px;border:1px solid #999999;position:absolute; top:190px; left:20px; padding-left:10px;">This is your tip</span>
</div>
<div id="container4">
<a href="#" class="tip1">my link</a>
<span id="tip1" class="tip" aria-live="assertive" style="display:none; background-color:#ffffcc; color:#00000;width:200px; height:30px;border:1px solid #999999;position:absolute; top:210px; left:20px; padding-left:10px;">Whatzzzzzzz happening????</span>
</div>
</body>
</html>

Thanks in advance,
Mark