Girovagando per la rete ho trovato un form che mi ha suggerito un’idea…
Problema: Campi radio tipo “SI” e “NO” con una label senza campo associato per entrambi i campi ed un testo descrittivo più dettagliato. ecco un esempio di come si presenta attualmente la struttura (semplificata) in Plone:
Codice:
<div> <label>Musica ?</label> <div>Se ti piace la musica classica scegli Si altrimenti scegli No</div> <input type="radio" name="musica" id="musicasi" value="si" /> <label for="musicasi">Si</label> <input type="radio" name="musica" id="musicano" value="no" /> <label for="musicano">No</label> </div>
Lo screen reader Jaws, quando è in modalità ediitazione, ignora la prima label non associata ad alcun campo ed il div con classe formHelp e legge solo Si e No. L’utente non vedente è come se dovesse “firmare un assegno in bianco..”.
L’unica cosa che può fare è uscire dalla modalità editazione leggere i testi e rientrare in modalità editazione… Questa operazione diventa particolarmente pesante per form con molti campi.
Primo aggiustamento: Questo tipo di campi devono essere racchiusi in un fieldset. il tag legend verrà letto da Jaws:
Codice:
<div>
<fieldset>
<legend>Musica ?</legend>
<div>Se ti piace la musica classica scegli Si
altrimenti scegli No</div>
<input type="radio" name="musica" id="musicasi" value="si" />
<label for="musicasi">Si</label>
<input type="radio" name="musica" id="musicano" value="no" />
<label for="musicano">No</label>
</fieldset>
</div>
Ora Jaws in modalità editazione legge meglio il form, ma salta ancora il div di classe formHelp.
Da notare che quando Jaws legge i campi SI e NO, ora antepone sempre il testo della LEGEND; pronuncia qualcosa tipo “Musica ? SI” e “Musica ? NO”.
Soluzione proposta: Prendendo spunto da un form visto in rete ho pensato fattibile inserire un link nella legend che punti al div col testo di aiuto:
Codice:
<div>
<fieldset>
<legend>Musica ? [ <a href="#aiuto_musica" title="ulteriori
informazioni sulla compilazione del campo">Help</a> ]</legend>
<div id="aiuto_musica">Se ti piace la musica
classica scegli Si altrimenti scegli No</div>
<input type="radio" name="musica" id="musicasi" value="si" />
<label for="musicasi">Si</label>
<input type="radio" name="musica" id="musicano" value="no" />
<label for="musicano">No</label>
</fieldset>
</div>
Verificato con Jaws, il link viene letto correttamente e consente, premendo il tasto invio, di uscire automaticamente dalla modalità editazione e leggere il testo di aiuto.
Per gli utenti vedenti è possibile nascondere tramite css il link “[Help ]” in quando non necessario:
<span>[ <a...>Help</a> ]</span>
Risultato:
Pro: l’utente non vedente se vuole può accedere facilmente al testo di aiuto e viene indicato subito il fatto che tale testo esiste. Non c’e’ bisogno che esca manualmente dalla modalità editazione e cerchi manualmente se esiste qualcosa che Jaws non ha letto.
Contro: in questo modo la legend viene letta come detto prima prima di ogni campo radio e con la legend anche il testo del link: “Musica ? Aiuto SI” e “Musica ? Aiuto NO”