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
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.
Tenere conto che non tutti riesco a percepire sfumature tenui dei colori. Usare quindi colori semplici ed ad alto contrasto
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".
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).
Nonostante sia una cosa molto in voga in questo momento, le specifiche WCAG e 508 non permettono l'utilizzo di script lato cliente.
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.
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
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.
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.
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.
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")
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à
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>
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” />
