|
punto 1) Tutte le funzionalità rese disponibili utilizzando il javascript devono essere disponibili anche nel caso di assenza del javascript. Un esempio è il riempimento delle combo a cascata. Immaginate il caricamento delle province dopo aver selezionato una regione. Si può pensare di passare alla pagina web l’elenco di tutte le province e far gestire al javascript il filtro perché la combo delle province venga popolata solo dalle province appartenenti alla regione. Nel momento in cui javascript non è disponibile si deve prevedere un pulsante per ricaricare la combo lato server (utilizzando il tag <noscript>).
<select name="Regione" onChange="popolaProvincia(this.value)">
<option value="12">Lazio</option>
<option value="13">Marche</option>
<option value="14">Molise</option>
</select>
<noscript><input type="submit" value="Popola Provincia"/></noscript><br/><br/>
<select name="Province" >
</select> 
Il pulsante “Popola Provincia” comparirà nel caso in cui il browser non supporti gli script o siano stati disattivati dall’utente. punto 2)
Evitare che il contenuto delle pagine cambi senza che sia stato l’utente ad effettuare una azione che comporta il cambiamento. Nel caso
- di contenuti che si aprono in una finestra pop-up (quando proprio non è possibile evitarlo) avvisare l’utente;
- in cui un link apra una nuova finestra avvisare l’utente;
- in cui il sito web utilizza una sessione che scade informare l’utente del tempo di validità della sessione.
punto 3)
Inserire sempre il testo alternativo alle immagini (attributi Alt e Longdesc) e a tutti gli oggetti visivi utilizzati all’interno del sito (aspetto da tener presente anche quando si utilizzano sistemi di Content management). punto 4)
Nelle form associare in maniera esplicita le etichette ai rispettivi controlli. L’etichetta relativa ad un controllo in una Label va posizionata a sinistra del controllo stesso. Con il tag Label utilizzate l’attributo for facendo riferimento all’id del controllo associato. Solo nel caso di option box o check box la label va posta a destra dell’oggetto.
Il seguente codice è estratto dall’esempio visto in precedenza:
<p>
<label for="nome-utente">Nome utente</label>
<input type="text" id="nome-utente"
size="40" />
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password"
size="40" />
</p>
Se provate a selezionare la voce “Nome utente” con il mouse vedrete il focus passare nella relativa textbox. Se selezionate la voce “Password” il focus passerà alla textbox corrispondente.
A chi volesse approfondire l’accessibilità dei moduli consiglio di consultare la sezione dedicata alla realizzazione di form accessibili del lau (laboratorio di accessibilità ed usabilità).
punto 5)
Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto, oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative. Per esempio, sono da evitare i link «clicca qui». Inoltre i collegamenti devono essere selezionabili e attivabili tramite comandi da tastiera o sistemi di puntamento diversi dal mouse. Se il link serve a scaricare un file scegliere formati come .txt e .html, in quanto non hanno bisogno dell’istallazione di programmi o plug-in. Nel caso in cui ciò non fosse possibile dare indicazioni dell’applicazione con cui aprire il file. In entrambi i casi è consigliabile fornire l’informazione delle dimensioni del file.
punto 6)
Per gli elementi multimediali prevedere una descrizione testuale che per lo meno riassuma i contenuti dell’elemento.
punto 7)
Per quanto riguarda le tabelle utilizzate per presentare dati ci sono 3 accorgimenti da rispettare:
- inserire l’attributo summary esplicitando il numero delle colonne come prima informazione e poi enunciando il contenuto ed il tipo di ogni colonna;
- utilizzare th per indicare la riga di intestazione;
- associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne. I tag da utilizzare sono scope=rows/cols per tabelle con due livelli logici e id-header per tabelle con più livelli logici.
Esempio di codice che genera una tabella accessibile
<table border="1" summary="Cinque colonne. Da sinistra, il radiobutton per selezionare la voce, l'identificativo della voce, la denominazione, la provincia, il comune">
<tr>
<th id="sel">
Seleziona
</th>
<th id="id-az">
ID
</th>
<th id="den">
Denominazione
</th>
<th id="prov">
Provincia
</th>
<th id="com">
Comune
</th>
</tr>
<tr>
<td headers="sel cod01" class="ct">
<input type="radio" name="nomeazienda" id="rad01" />
</td>
<td headers="id-az cod01">
<label for="rad01">01</label>
</td>
<td id="cod01" headers="den">
Voce n. 1
</td>
<td headers="prov cod01">
LI
</td>
<td headers="com cod01">
Livorno
</td>
</tr> </table>
I non vedenti utilizzano uno strumento in grado di leggere le informazioni riportate nella pagina html: lo Screen Reader. Vediamo come questo interpreta i comandi riportati nell’esempio. Lo Screen Reader leggerà il contenuto della cella che ha come id lo stesso contenuto dell’attributo header. La prima volta che lo Screen Reader incontrerà l’attributo header all’interno della pagina (headers="sel cod01") leggerà “Seleziona” “Voce n. 1”, ovvero il contenuto della cella con id sel e il contenuto della cella con id cod01 e così via.
Visualizza il codice dell’intera pagina.
Visualizza la pagina generata.
La creazione delle tabelle per lo sviluppatore si traduce il più delle volte nella necessità di inserire all’interno dell’elenco dei risultati un id univoco, composto esclusivamente da lettere e numeri, per ogni elemento dell’elenco e informazioni relative al numero ed al contenuto delle colonne.
Vorrei sottolineare ancora una volta che questi non sono tutti gli aspetti che interessano l’accessibilità ma solo quelli che lo sviluppatore dovrebbe tenere in considerazione. Non perché lo sviluppatore debba occuparsi della grafica delle pagine, ma perché sia in grado di mettere a disposizione del grafico tutti gli elementi perché si possano generare pagine accessibili.
|
Documentazione
>
