W3C home > Mailing lists > Public > wai-xtech@w3.org > June 2011

Re: Strange behaviour of Firefox 4.01

From: Victor Tsaran <vtsaran@yahoo-inc.com>
Date: Wed, 15 Jun 2011 10:21:27 -0700
To: Giulio Mori <giulio.mori@iit.cnr.it>
CC: W3C WAI-XTECH <wai-xtech@w3.org>
Message-ID: <27542C4A-C4BA-4617-A4E2-F57EC83876A5@yahoo-inc.com>
You may want to verify if the behavior is still observed in the nightly releases of Firefox 6 as this is where many of the accessibility fixes are going in.
Good luck,
Victor

On Jun 14, 2011, at 4:01 AM, Giulio Mori wrote:

Hello,

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?

Many thanks for the answers,
Giulio Mori


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>
_________________________________________

╔══╗ ♫      Ing. Giulio Mori
║██║ ♪♪
║██║♫♪      Institute for Informatics and Telematics (I.I.T.)
║ ◎♫♪♫     Italian National Research Council
╚══╝
(C.N.R. PISA)
Via Moruzzi, 1
56124 PISA

(Building:  B - Room:  B67a)
Tel. +39 050 315 3507
Tel. +39 050 315 3458

Fax. +39 050 315 2593

Email: giulio.mori@iit.cnr.it<mailto:giulio.mori@iit.cnr.it>





*** *** *** ***

Victor Tsaran Yahoo<http://www.yahoo.com>!
Sr. Accessibility Program Manager
http://accessibility.yahoo.com

Twitter: @YahooAccess<http://twitter.com/yahooaccess>

*** *** *** ***



Received on Wednesday, 15 June 2011 17:22:28 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 27 April 2012 13:16:12 GMT