Accessibilità

Nella creazione di un sito è importante fare in modo che la maggior parte dei navigatori possa accedere senza problemi alle pagine che compongono il sito stesso.

Rendere un sito "accessibile" significa permettere l'accesso anche ad utenti che non hanno le tradizionali periferiche di input e di output. Per esempio molti utenti utilizzano dei "screen reader" cioè dei lettori che aiutano l'accesso ai non-vedenti. In questa pagina parleremo appunto di tutti gli accorgimenti necessari per ottenere, appunto, un sito accessibile.

Il World Web Consortium (W3C) attraverso la web accessibilty initiative ha creato la Web Content Accessibility Guidelines (WCAG), così come il governo americano che ha inserito all'interno della section 508 del Rehabilitation Act le indicazioni per rendere un sito accessibile. Sostanzialmente entrambe le specifiche sono identitiche e la scelta è di tipo politico a seconda del paese al quale il sito è rivolto.

Ecco le regole base da seguire

Per ogni immagine fornire un testo alternativo che la descrive

Il tag html IMG ha attributo un attributo, ALT, creato specificatamente per fornire una descrizione dell'immagine. Da notare che con Internet Explorer, ma non con Firefox, questo testo viene visualizzato anche al passaggio del mouse sull'immagine stessa. Per ottenere questa funzionalità sarebbe meglio utilizzare l'attributo TITLE secondo quanto indicato dalle specifiche XMTML.

<img src="test.jpg" alt="Solo un test" title="solo un test" />

Se l'immagine non è importante impostare il campo con un valore vuoto

Consiglio per .NET programmer: Il control Image ha un apposita proprietà per generare un commento vuoto

<asp:Image ImageUrl="test.jpg" runat="server" GenerateEmptyAlternateText="true" />

Attraverso l'attributo AlternateText è possibile specificare una pagina HTML che fornisce maggiori informazioni sull'immagine.

Usare colori decisi ed ad alto contrasto

Tenere conto che non tutti riesco a percepire sfumature tenui dei colori. Usare quindi colori semplici ed ad alto contrasto

Non utilizzare mai una grandezza fissa per i font

Nello specificare l'altezza di un font ci sono due possibilità: definirla in maniera fissa (per esempio font-size:12px)o relativa (esempio font-size: small). Nel secondo caso il browser può ingrandire a piacimento la grandezza dei font mantendo le proporzioni in base a quando da noi indicato. Nel primo caso invece il browser visualizzerà sempre il testo nella grandezza da noi indicata.

Se avete Internet Explorer provate a cambiare la grandezza del font di questa pagina cliccando sul menù "Visualizza/Dimensioni testo".

Creare un layout fluido che permetta sempre di essere leggibile anche modificando la grandezza del font

Questa è una conseguenza di quanto detto in precedenza. Con il modificare del font l'impaginazione della pagina cambia e per questo motivo è necessario pensare ad un disegno fluido che possa sempre essere leggibile (no a posizioni fisse).

Non utilizzare client script

Nonostante sia una cosa molto in voga in questo momento, le specifiche WCAG e 508 non permettono l'utilizzo di script lato cliente.

Impostare sempre un campo di inserimento di default su cui impostare il cursore

In termini tecnici questo si chiama impostare il focus sul primo campo disponibile per l'input.

Consiglio per .NET programmer: i form hanno la proprietà DefaultFocus per questa impostazione.

Specificare il bottone legato alla pressione del tasto ENTER

Per evitare l'utilizzo del mouse, specificare sempre il tasto legato al tasto ENTER

p>Consiglio per .NET programmer: i form hanno la proprietà DefaultButton per questa impostazione

Indicare link con significato

Evitare link del tipo "clicca qui" ma specificare l'azione che viene eseguita (per esempio "contina al prossimo form"). Questo accortezza è necessaria perchè uno screen reader legge tutti i link per poi fornire una scelta al navigatore. Un insieme di comandi come il precedente non forniscono indicazioni utili.

Definire degli access key per i campi di input e impostare un seguenza di entrata

L'utilizzo del mouse molte volte non velocizza la fase di input. Per questo motivo è meglio fornire dei tasti di accesso rapido per passare da un campo ad un altro.

Campo 1
Campo 2
Campo 3

Nel esempio precedente è possibile spostarsi da un campo ad un altro premendo i tasti ALT+1 ALT+2 ALT+3. Premendo semplicemente TAB si passa invece da un campo ad altro ed stato anche impostato il primo campo come default per l'input.

Utilizzare messaggi significativi in caso di errore

Quante volte per indicare la mancanza di un campo di input avete visto un semplice asterisco (*) come messaggio di errore? Sicuramente molte volte è la cosa non è una buona regola per l'accessibilità. Molto meglio fornire una spiegazione dettagliata (esempio "non è stato indicato il campo nome")

Impostare campi aggiuntivi per le tabelle

Le tabelle (nel senso di tag html TABLE) hanno campi aggiuntivi che non necessariamente vengono visualizzati ma che sono molto importanti per migliorare l'accessibilità

Esempio di caption
Intestazione 1	Intestazione 2
dati colonna 1	dati colonna 2

La tabella precedente è rappresentata da:



<table>
<caption>Esempio di caption</caption>
<thead><tr><td>Intestazione 1</td><td>Intestazione 2</td></tr></thead>
<tbody>  
<tr><td>dati colonna 1</td><td>dati colonna 2</td></tr>
</tbody>
</table>

Dare la possibilità di muoversi all'interno della pagina

Una combinazione di anchor (<a id="ancor" />) e link (<a href="#ancor" />) permette di muoversi rapidamente all'interno della pagina. Per dare poi questa informazione solo ad uno screen reader è possibile legare un testo ad una immagine vuota.


<a href=”#skip” />
 <img alt="Salta data base" width="0" height="0" />
<a id=”skip” />