Rendere un sito accessibile: primi passi

Claudio Santori
(Ottimizzare.com)

Chi si avvicina all'accessibilità per la prima volta rischia un po' di perdersi, nell'apparente complessità e vastità della materia.

La realizzazione di siti accessibili presuppone la conoscenza approfondita delle Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG10/) realizzata dal WAI.
Ma la teoria da sola non basta; per garantire l'accessibilità di un sito è necessaria esperienza diretta utilizzando screen reader come JAWS, nuovi devices alternativi al PC come i "Computer palmari" le WebTv o un Browser diverso da Internet Explorer.

Sì, perchè un problema di accessibilità può essere la semplice incompatibilità con un menu in Flash, o caratteri difficili da leggere perchè visualizzati troppo piccoli. Chiaramente per chi è a digiuno di standard e linee guida W3C tutto il materiale da studiare potrebbe scoraggiare e far sembrare l'accessibilità una chimera, quando invece l'accessibilità di un sito può essere aumentata "a piccole dosi"

Gli ALT sono importanti

Gli screen reader non riescono a capire cosa rappresenti un'immagine ed è quindi necessario aggiungere un ALT per descriverla (es.: <img src="logo.gif" alt="Logo dell'Istituto">). Per rendersi conto dell'importanza degli alt basta navigare in un sito con le immagini disabilitate, per esempio in certi siti di pubblica utilità.

Dopo aver commentato le immagini (ma anche i video, gli script e gli oggetti inseriti) il sito sarà più accessibile e i motori di ricerca avranno altro materiale da analizzare, soprattutto se le immagini sono anche dei link. Quest'ultimo aspetto non deve essere sottovalutato perchè se molte modifiche sono invisibili agli occhi di alcuni utenti, non passano inosservate ai motori di ricerca.

Non fidarsi dei colori

"Clicca sul tasto verde per andare avanti" potrebbe non aver senso per un utente daltonico. Considerato che l'8% della popolazione soffre di una qualche forma di daltonismo stiamo parlando di quasi un utende su dieci. Inoltre alcuni utenti si potrebbero connette con schermi monocromatici (es.: gli schermi dei cellulari) o con screen reader, e i riferimenti ai colori sarebbero inutili e frustranti.

Fare attenzione al contrasto tra colori: sfondo e testi non devono confondersi. Usare colori ad alto contrasto ed evitare l'uso di immagini complesse come sfondo (ed una raccomandazione: nessuna animazione!!). La lettura dei contenuti deve essere agevolata, non ostacolata.

Attenzione ai caratteri

Regola N.1: non tutti gli utenti sono giovani. Sebbene la maggior parte dei webmaster siano giovani, lo stesso non si puo' dire di tutti gli utenti.
Quindi la grandezza dei caratteri dev'essere impostata con valori relativi (em e %) e non assoluti (pixel). Tutto questo per agevolare la lettura agli ipovedenti ed in generale a chi ha difficoltà a leggere testi piccoli su un monitor.

Regola N.2: per i titoli non serve l'uso di caratteri più grandi, meglio sfruttare il linguaggio html corretto tramite gli Headers, impostando i titoli con con <h1>Titolo</h1> e a seguire <h2>Sottotitoli</h2>, <h3>....</h3>, fino a <h6>....</h6>.

Tabelle e Frames

Si possono usare strumenti migliori dei frame per ripetere parti del sito in tutte le pagine (es: server side includes) ma se proprio non si riesce a farne a meno è importante che ogni frame (e ogni pagina del frameset) abbia un nome sensato e non la solita "Untitled Page". La soluzione ideale è comunque l'eliminazione dei frame.

In quanto alle tabelle, meglio non utilizzarle per posizionare gli elementi del sito: un maggiore controllo si può ottenere utilizzando i Fogli di Stile.

Altri piccoli trucchi per gli screen reader

Gli screen reader hanno bisogno di sapere in che lingua parla il sito ed è perciò necessario specificare la lingua della pagina con < ...lang="en">. Eventuali cambiamenti di lingua all'interno del sito vanno segnalati. Esempio: "Ciao a tutti e benvenuti su <span lang="en">News on line for People!</span>".

Alcune immagini non aggiungono nulla alla navigazione e sono presenti nel sito solo per migliorarne la grafica: dovrebbero essere commentate con un alt vuoto (alt=" ") in modo che lo screen reader possa ignorarla senza appesantire la navigazione dell'utente.

Flash - usare con cura

Alcuni utenti non hanno il plug-in istallato o semplicemente non hanno l'ultima versione. Altri utilizzano screen reader che non riescono a leggere i testi contenuti nella animazioni (solo la versione MX produce animazioni Flash accessibili) ed altri ancora hanno computer lenti che visualizzano le complesse animazioni vettoriali a scatti. Quindi bisogna usare Flash con molta cura e valutare se l'utilizzo è indispensabile. Aggiungere testo alternativo per commentare le animazioni ed un eventuale immagine come mappa che simuli il menu in flash per gli utenti che non possono visualizzarlo. E attenzione: quell'introduzione in Flash a chi serve?

Passi successivi

L'accessibilità è obiettivamente un argomento complesso e non si può prescindere dalla conoscenza delle Linee Guida WAI. Ad ogni modo i suggerimenti proposti in questo articolo possono rivelarsi utili per chi vuole iniziare la realizzazione di siti accessibili. Il prossimo passo sara' quello di scrivere codice valido secondo gli standard, e separare il contenuto dalla presentazione utilizzando i fogli di stile.

Per approfondimenti: Ottimizzare.com (http://www.ottimizzare.com/usability/)

19/10/2002

E-mail: info@ottimizzare.com