Firefox 4.01 使用 x/html 和 javascript 的奇怪行为
我致力于为盲人提供与屏幕阅读器 Jaws 和声音合成器交互的网络可访问性。 我使用 x/html 与 wai-aria 和 JavaScript 来设计问卷用户测试的可访问网页。
在这种应用程序中，主要的困难是面对不同浏览器上的不同行为，并且不同版本的 Jaws 屏幕阅读器会生成不同的行为。
然而，在 Firefox 4（以及下一个 4.01）发布后，问题就开始出现了。
盲人网页问卷页面的相同代码在新版本的 Firefox 4.01 浏览器中不再起作用。
似乎尚不支持 JavaScript 的相同功能。 事实上，即使屏幕阅读器关闭，与“tab”键的交互也会被阻止。 :-(
在 Firefox 4 之前，交互效果很好。 相反，在 Internet Explorer 上，与“tab”键的交互在版本 8 和 9 上也被阻止......我不知道为什么。 :-(
最后，有一段代码摘录，其中表单内有一个单选按钮。 该表格是用户测试的调查问卷，包括单选按钮、组合框、多选复选框、测试区域和提交按钮。
单选按钮和表单中其他元素的行为应如下所示： 盲人使用“tab”键从一个单选按钮选项跳到另一个。 当用户到达最后一个选择时，如果用户未选择任何内容，则会发出声音警报：“请定义您的视力障碍！” 焦点再次转到单选按钮的第一个选择上。 否则，如果盲人选择了一个选项，则将焦点放在表单内的下一个元素上。
表单的每个元素（例如单选按钮）都会考虑两个事件：
- onFocus，当用户焦点“移开”时 第一次在这个元素上。
- onBlur，当焦点改变时。
有什么问题我没有考虑到吗？
代码摘录：
<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)
{
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 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)
{
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我可以指出一个问题，每个单选按钮都标有 aria-required="true"，即使用户只需要选择一个。请改用无线电组。
我知道您问了一个不同的问题，但从代码来看，这是一个更大的可访问性问题。很抱歉没有直接回答这个问题，但我希望您能从我的回答中获得一些价值。
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.