Qualche consiglio per rendere il vostro sito accessibile a tutti e non solo per chi ha un computer desktop e vede benissimo..

Rendere un sito accessibile a tutti direi che è anzitutto un gesto umano immenso.
Ci sono persone al mondo che non hanno la fortuna di essere completamente sani ed autonomi come molti di noi, ma hanno problemi di vista, problemi alle articolazioni ed altro, ed anche loro hanno il diritto di poter navigare ed informarsi attraverso questo stupendo gingillo chiamato Internet.
Poi ci sono moltissime persone che lavorano tutto il giorno fuori sede ed hanno la necessità di consultare internet dal treno, o da altre postazioni e non tutti hanno un portatile, che è grosso ed ingombrante, ma un cellulare, ed anche queste persone hanno tutto il diritto di potersi godere una buona informazione su Internet.
Ma il problema dove nasce? Non tutti i siti sono accessibili da Screen Reader, cellulari, palmari ed altri dispositivi che molti definiscono “non standard”, addirittura ci sono ancora molti designer che valutano i computer Apple fuori standard.
Ma non è così, tutti questi dispositivi che ho citato e anche altri sono standard, cioè hanno tutte le caratteristiche per poter navigare su internet e tutti fanno riferimento agli Standard Web raccomandati dal W3C ed alle regole di Accessibilità.

Ma vediamo come rendere il nostro sito più accessibile.

Partiamo dall’inizio, convertiamo il nostro sito da HTML a XHTML 1 Transitional, sempre che non sia già stato fatto e togliamo le tabelle, cerchiamo di costruire una navigazione, come la chiamo io a libro, cioè cerchiamo di avere nel nostro markup solo la parte strutturale del sito e dividiamolo dalla sua presentazione. La parte presentazionale sarà fatta con l’ausilio dei fogli di stile conosciuti come CSS.
Facendo in questo modo, già i browser per cellulari e palmari daranno una migliore navigabilità al sito.
Altra piccola regola è inserire il link Salta la Navigazione subito prima del menu principale e ancoriamolo al contenuto, in questo modo:

<a href="#contenuto">Salta la navigazione</a>
<!-- Menu -->
<div id="contenuto">
   Contenuto
</div>

Poi nascondiamo il link “Salta la Navigazione” tramite CSS, tanto servirà a chi naviga con uno Screen Reader o lynx o un cellulare/palmare.
Ma perché questo? Semplice, l’utente che utilizza uno Screen Reader, ad esempio, può in questo modo evitare che gli venga letto il menu tutte le volte che entra dentro una nuova pagina.
Andando avanti vediamo che è obbligatorio inserire l’attributo alt alle immagini, ma il suo contenuto non deve essere messo a caso o proprio perché si deve come ad esempio alt=”immagin001.jpg” oppure alt=”img_01_la_torre_pendente”, questo è inutile. Immaginatevi lo Screen Reader che recita all’utente: Immagine: i emme gi underscore la underscore torre undercore pendente, come potete notare non è molto utile in questo modo. Scriviamo invece cose che possono essere utili all’utente che non può vedere le vostre foto come: alt=”Fotografia che ritrae Dimitri da piccolo mentre beve un’aranciata”. Ecco questo sì che è un testo alternativo valido!
Ma non è ancora finita, un’altro attributo non obbligatorio ma necessario è accesskey; questo attributo da al link al quale è stato applicato, la possibilità di accedervi tramite la pressione di un tasto specifico, ad esempio:

<a href="#" accesskey="h">Home Page [H] </a>

Premendo quindi il tasto h all’interno del sito sarà come cliccare sul link con il puntatore del mouse.
E’ buona regola inserire anche la lettera accanto al nome del link, in modo che gli utenti vedano quali lettere utilizzare per potervi navigare, questo perché la maggior parte dei browser non visualizza ancora in automatico i tasti di accesso, se non erro, solo il browser Opera ha questa funzionalità.

Altro attributo necessario è il tabindex, questo farà in modo che il vostro sito sia navigabile anche con il tasto tab.
Normalmente, è già navigabile con questo tasto, ma l’ordine di selezione degli elementi potrebbe risultare molto confuso. Ad esempio se avete un form a metà pagina, senza impostare il tabindex il navigatore dovrà premere almeno 30 volte il tasto tab prima di arrivare al primo campo del form, mentre, se utilizzate ad esempio:

<input type="text" name="nome" tabindex="2"/>

l’utente arriverà a quel campo alla seconda pressione del tasto tab. Questa operazione risulterà comoda a molti, non solo a persone con problemi alle articolazioni ma rende più veloce la navigazione anche all’utente normale senza alcuna disabilità fisica.

Questa lezione di accessibilità finisce qui, ma ci sono ancora altri accorgimenti da prendere per rendere la vita del web facile a tutti, ne riparleremo più avanti.