带有x / html和javascript的Firefox 4.01的奇怪行为 [英] Strange behaviour of Firefox 4.01 with x/html and javascript
问题描述
我致力于为盲人与屏幕阅读器Jaws和人声合成器进行交互的网络可访问性提供帮助。
我正在使用带有wai-aria和JavaScript的x / 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.
在这种应用程序中，主要困难是要面对不同浏览器上的不同行为，并且Jaws屏幕阅读器的版本也会产生不同的行为。
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.
但是，问题是在Firefox 4（以及后续的4.01）发布之后开始的。
However, problems started after the release of Firefox 4 (and next 4.01).
适用于盲人的网络问卷页面的相同代码在新版本的Firefox 4.01浏览器中不再起作用。
似乎还不支持JavaScript的相同功能。
实际上，即使关闭屏幕阅读器，也会阻止与 tab键的交互。 ：-（
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. :-(
在Firefox版本4之前，交互效果很好。
相反，在Internet Explorer上，与 tab键的交互也被阻止了在版本8和9上...我不知道为什么。：-（
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.
单选按钮和表单中其他元素的行为应如下：
盲人使用 tab键从单选按钮选择项跳至另一项选择。
当用户到达最后一个选择项时，如果用户没有选择任何东西，则发出声音警报：请定义您的视力障碍！
，焦点再次移至单选按钮的第一选择上
否则，如果盲人有选择一个选项，将焦点放在表单内的下一个元素上。
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，当用户首次将焦点转到
时 - 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>
推荐答案
我可以指出一个问题，每个单选按钮是标有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.
这篇关于带有x / html和javascript的Firefox 4.01的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
