E-mail List Archives
Thread: Help with ARIA-Live
Number of posts in this thread: 2 (In chronological order)
From: Mark Guisinger
Date: Thu, Apr 01 2010 1:00PM
Subject: Help with ARIA-Live
No previous message | Next message →
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
From: Travis Roth
Date: Fri, Apr 02 2010 2:54PM
Subject: Re: Help with ARIA-Live
← Previous message | No next message
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.