Tag Radio e accessibilità

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:

Se ti piace la musica classica scegli Si altrimenti scegli No

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:

Musica ?
Se ti piace la musica classica scegli Si
altrimenti scegli No


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:

Musica ? [ Help ]
Se ti piace la musica classica scegli Si altrimenti scegli No

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”