Strange behaviour of Firefox 4.01 with x/html and javascript
I work on web accessibility for blind people interacting with a screen reader Jaws and a vocal synthesizer. I am using x/html with wai-aria and JavaScript to design accessible web pages of a questionnaire user test.
In this kind of application, main difficulty is to face with different behaviors on different browsers and also versions of Jaws screen reader generate different behaviors.
However, problems started after the release of Firefox 4 (and next 4.01).
The same code of a web questionnaire page for blind doesn't work again with new release of Firefox 4.01 browser.
It seems like the same functions of JavaScript is not yet supported. In fact even if the screen reader is turned off, interaction with “tab” key is blocked. :-(
Before that release 4 of Firefox, interaction was good. On the contrary on Internet Explorer, interaction with “tab” key it was blocked also on version 8 and 9... and I don’t know why. :-(
Here at end, there is an extract of the code, with a radio button inside a form. The form is questionnaire for a user test including radio buttons, combo-boxes, multi select checkboxes, test areas and a button for submit.
The behavior of the radio button and other elements in the form should be the following: The blind uses “tab” key to skip from a the radio button choice to another. When user reach last choice, if the user have not selected anything, a vocal alert say: 'Please, define your visual disability!' and the focus go on the first choice of the radio button again. Otherwise, if the blind have selected one choice, focus go on the next element inside the form.
Each element of the form (for example the radio button), considers two events:
- onFocus, when the user focus “goes” for the first time on the element.
- onBlur, when focus changes.
Is there something wrong I am not considering?
AN EXTRACT OF CODE:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<script type = "text/javascript">
<!-- hide me from older browser>
function removeOldAlert()
{
var oldAlert = document.getElementById("alert");
if (oldAlert)
document.body.removeChild(oldAlert);
}
function addAlert(aMsg)
{
removeOldAlert();
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("aria-live", "rude");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode(aMsg);
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
}
…
function checkValidity3(aID, num, aMsg)
{
var elem = document.getElementById(aID);
var invalid = true;
for (var loop = 0; loop < window.document.questionario_conoscitivo.tipo_disabilita.length; loop++)
{
if (window.document.questionario_conoscitivo.tipo_disabilita[loop].checked == true)
{
invalid = false;
}
}
if (invalid) {
elem.setAttribute("aria-invalid", "true");
if (num==window.document.questionario_conoscitivo.tipo_disabilita.length-1)
addAlert(aMsg);
} else {
elem.setAttribute("aria-invalid", "false");
removeOldAlert();
}
return invalid;
}
function proseguire(msg1, … msg3, … msg16)
{
if(msg1 == true)
{
…
}
…
else if(msg3 == true)
{
开发者_StackOverflow社区 window.document.questionario_conoscitivo.tipo_disabilita[0].focus();
}
…
else if(msg16 == true)
{
…
}
}
function checkRisposta(invalid, … invalid3, … invalid16)
{
result = !(invalid) && … && !(invalid3) && … !(invalid16);
return result;
}
// show me -->
</script>
</head>
<body onload="invalid = true; … invalid3= true; … invalid16= true;">
<form id="questionario_conoscitivo" name="questionario_conoscitivo" action="http://...questionario.php" method="POST" onsubmit="return checkRisposta(invalid,… invalid3, … invalid16);">
…
<div role="dialog" aria-labelledby="messaggio3">
<h2 id="messaggio3"><b>3) Kind of visual disability:</b><br/><br/></h2>
<input type="radio" aria-required="true" id="tipo_disabilita0" name="tipo_disabilita" value="Blind" onFocus="proseguire(invalid, … invalid3, … invalid16);" onblur="invalid3 = checkValidity3('tipo_disabilita0', 0, ‘Please, define your visual disability!');" />
<label for="tipo_disabilita0">Non vedente<br/></label>
<input type="radio" aria-required="true" id="tipo_disabilita1" name="tipo_disabilita" value="Visually Impaired" onblur="invalid3 = checkValidity3('tipo_disabilita1', 1, 'Please, define your visual disability!');" />
<label for="tipo_disabilita1">Ipovedente<br/></label>
<input type="radio" aria-required="true" id="tipo_disabilita2" name="tipo_disabilita" value="None" onblur="invalid3 = checkValidity3('tipo_disabilita2', 2, 'Please, define your visual disability!');" />
<label for="tipo_disabilita2">Nessuna<br/></label>
</div><br/>
…
</form>
</body>
</html>
I can point out one problem, each radio button is labeled with aria-required="true" even though the user need only select one. Use a radio group instead.
I know you asked a different question, but from looking at the code, this was a bigger accessibility issue. Apologies for not answering the question directly, but I hope you get some value from my answer.
加载中,请稍侯......
精彩评论