Странное поведение Firefox 4.01 с x / html и javascript - PullRequest
Новая
       33

Странное поведение Firefox 4.01 с x / html и javascript

0 голосов
/ 16 июня 2011

Я работаю над доступностью в Интернете для слепых, взаимодействующих с программой для чтения с экрана Jaws и синтезатором вокала Я использую x / html с wai-aria и JavaScript для разработки доступных веб-страниц пользовательского теста вопросника.

В этом типе приложений основная трудность состоит в том, чтобы сталкиваться с различным поведением в разных браузерах, а также версии программы чтения с экрана Jaws генерируют различное поведение.

Однако проблемы начались после выхода Firefox 4 (и следующих 4.01).

Тот же код страницы веб-анкеты для слепых больше не работает с новой версией браузера Firefox 4.01.

Похоже, что те же функции JavaScript еще не поддерживаются. На самом деле, даже если программа чтения с экрана выключена, взаимодействие с клавишей «tab» блокируется. : - (

До этого выпуска 4 Firefox взаимодействие было хорошим. Напротив, в 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>

1 Ответ

1 голос
/ 17 июня 2011

Я могу указать на одну проблему, каждая радиокнопка помечена aria-required = "true", даже если пользователю нужно выбрать только одну. Используйте радиогруппу вместо .

Я знаю, что вы задали другой вопрос, но, глядя на код, это стало большей проблемой доступности. Извиняюсь за то, что не ответил на вопрос напрямую, но я надеюсь, что вы получите некоторую пользу от моего ответа.

...