带有x / html和javascript的Firefox 4.01的奇怪行为

Question

I work on web accessibility for blind people interacting with a screen reader Jaws and a vocal synthesizer. 我为盲人与屏幕阅读器Jaws和人声合成器进行交互的网络可访问性工作。 I am using x/html with wai-aria and JavaScript to design accessible web pages of a questionnaire user test. 我正在使用带有wai-aria和JavaScript的x / html来设计调查表用户测试的可访问网页。

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. 在这种应用程序中，主要困难是面对不同浏览器上的不同行为，而且Jaws屏幕阅读器的版本也会产生不同的行为。

However, problems started after the release of Firefox 4 (and next 4.01). 但是，问题是在Firefox 4（及后续的4.01）发布之后开始的。

The same code of a web questionnaire page for blind doesn't work again with new release of Firefox 4.01 browser. 新版Firefox 4.01浏览器无法再次使用针对盲人的网络问卷页面的相同代码。

It seems like the same functions of JavaScript is not yet supported. 似乎尚不支持JavaScript的相同功能。 In fact even if the screen reader is turned off, interaction with “tab” key is blocked. 实际上，即使关闭了屏幕阅读器，也会阻止与“ tab”键的交互。 :-( :-(

Before that release 4 of Firefox, interaction was good. 在Firefox的第4版之前，交互性很好。 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. 相反，在Internet Explorer上，与“ tab”键的交互在版本8和9中也被阻止了……我不知道为什么。 :-( :-(

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. 单选按钮和表单中其他元素的行为应如下：盲人使用“ tab”键从单选按钮选择项跳到另一项。 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. onFocus，当用户第一次将“焦点”移到元素上时。
onBlur, when focus changes. onBlur，当焦点改变时。

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>

Answer 1

I can point out one problem, each radio button is labeled with aria-required="true" even though the user need only select one. 我可以指出一个问题，即使用户只需要选择一个，每个单选按钮也都标记有aria-required =“ true”。 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的奇怪行为

问题描述

1 个解决方案

解决方案1
1 2011-06-17 18:50:59

带有x / html和javascript的Firefox 4.01的奇怪行为

问题描述

1 个解决方案

解决方案1 1 2011-06-17 18:50:59

解决方案1
1 2011-06-17 18:50:59