Ciao,
Lavoro sull'accesibilità web per non vedenti che interagiscono con screen reader Jaws e sintetizzatore vocale.
Sto usando x/html con WAI-ARIA e Javascript per rendere accessibili le pagine di un questionario web per uno user-test fatto con non vedenti.
La maggiore difficoltà è scontrarsi con diversi comportamenti dei vari browser e con le varie versioni di Jaws.
I problemi sono cominciati dopo aver installato la versione di Firefox 4 (e successiva 4.01).
Lo stesso codice che prima funzionava con le release precedenti, non funziona più con Firefox 4.01.L'impressione è che qualcosa di javascript non sia più supportato.
Infatti anche quando provo ad interagire con lo screen reader spento, usando il Tab (tipico tasto usato) per cambiare il focus da un elemento ad un altro, l'interazione si blocca.
Con le versioni precedenti a Firefox 4, il codice funzionava, mentre con Internet Explorer 8 e 9 aveva dei problemi.
Mistero perché credo di aver usato elementi html standard.
A fine messaggio ho inserito un estratto del codice.
BREVE SPIEGAZIONE:
La form racchiude gli elementi di un questionario, con radio button, combo-boxes, checkboxes, textarea ed il bottone submit.
Il comportamento del radio button nell'esempio riportato sotto dovrebbe essere il seguente:
Il non vedente usa il "tab" per saltare da una scelta del rdio button ad un'altra.
1) Quando l'utente raggiunge l'ultima scelta, se l'utente non ha selezionato nulla, un alert vocale dice: 'Please, define your visual disability!'
ed il focus va sulla prima scelta del radio button di nuovo.
2) Altrimenti, se il non vedente seleziona una scelta, il focus va sul successivo elemento all'interno della form.
Ogni elemento della form (ad esempio il radio button), considera due eventi:
• onFocus, quando il focus dell'utente va per la prima volta su l'elemento x/html (nell'esempio il radio button).
• onBlur, quando si cambia focus dal radio button.
C'è qualcosa di sbagliato o che non sto considerando con la nuova versione di firefox?
Molte grazie per le risposte,
Giulio Mori
UN ESTRATTO DEL CODICE:
<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></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</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</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</label>
</div><br/>
…
</form>
</body>
</html>
Topic: Strano comportamento di Firefox 4 con x/html e javascript (Letto 3246 volte)