WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with ARIA-Live

for

From: Travis Roth
Date: Apr 2, 2010 2:54PM

Hi Mark,

I can't answer your exact question here as I can't quite tell what the
jQuery is doing to display the messages. My assumption is that an error
message displays upon invalid input? Or does the span fade in and out based
on focus?

Two items I notice are that aria-atomic is not set on the span. I am not
certain how required this attribute is or if certain AT likes it but it may
not hurt to add aria-atomic='true'.
And, aria-relevant is not defined. Since the default is "add" this may be
part of the problem as I am not sure if setting "Display:none" to
"Display"visible" meets a browser's or AT's definition of an element being
added?


Here's some more explanation:
http://wiki.codetalks.org/wiki/index.php/How_to_use_ARIA_Live_Regions_for_dy
namic_content

An indirect answer to your question may be to have a look at this article:
http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-ale
rt/
It isn't using live regions, instead using an alert but it may suit your
purposes...

Hope this helps. And when you get this working please let me know what
works.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Mark Guisinger
Sent: Thursday, April 01, 2010 1:01 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Help with ARIA-Live

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