我致力于为盲人提供与屏幕阅读器 Jaws 和声音合成器交互的 Web 可访问性。我正在使用带有 wai-aria 和 JavaScript 的 x/html 来设计问卷用户测试的可访问网页。
在这类应用中，主要的难点是面对不同浏览器上的不同行为，以及不同版本的 Jaws 屏幕阅读器会产生不同的行为。
但是，问题在 Firefox 4（以及下一个 4.01）发布后开始出现。
新版 Firefox 4.01 浏览器不再适用盲人 Web 问卷页面的相同代码。
似乎尚不支持 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>