Valutazione dell’accessibilità di un sito web - Parte Seconda, controlli di base
Traduzione dell'articolo originale "Evaluating Website Accessibility Part 2, Basic Checkpoints" di Roger Johansson, www.456bereastreet.com.
30 Marzo 2006
Questo è il secondo articolo, di una serie di tre, che spiega come valutare l'accessibilità di un sito web. Per avere un po' di background e per assicurarvi che abbiate installati gli strumenti cui mi riferirò, vi consiglio di leggere Valutazione dell'accessibilità di un sito web - Parte Prima, storia e preparazione prima di iniziare questo articolo.
I controlli proposti in questo articolo coprono alcuni aspetti dell'accessibilità che possono essere testati con degli strumenti automatici ed altri che sono relativamente facili da eseguire manualmente.
Un valutazione completa dell'accessibilità è più delicata ed implica più punti da controllare, alcuni dei quali saranno trattati nel terzo articolo di questa serie. Comunque, questi controlli iniziali sono un buon punto di partenza:
- Validate l'HTML ed i CSS
- Non usate i frames, per favore
- Strumenti per il controllo automatico dell’accessibilità
- Immagini e testo alternativo
- Assicuratevi che il JavaScript sia discreto
- Aumentate le dimensioni del testo
- Cercate la marcatura semantica
- Disattivate i CSS
- Usate Fangs per emulare un lettore di schermo (screen reader)
1. Validate l'HTML ed i CSS
Usate il validatore di W3C per controllare se l’HTML ed i CSS sono validi. Per farlo è molto comodo usare l’estensione Web Developer: Strumenti – Validate CSS e Strumenti – Validate HTML (Tools - Validate CSS e Tools - Validate HTML). Vi consiglio di associare delle scorciatoie da tastiera (Opzioni – Scorciatoie) a queste due operazioni visto che le userete molto spesso.
Ovviamente potete anche usare i siti del W3C per convalidare le vostre pagine:
Tenete presente che è difficile da validare l’HTML di molti siti web costruiti malamente, in quanto spesso non è dichiarato né il DOCTYPE, né la codifica dei caratteri. Per questi siti potrebbe essere necessaria una validazione manuale.
Ancora peggio sono quei siti che bloccano completamente l’acceso ai validatori. Sì, ho visto siti che fanno anche questo. Perchè vogliate nascondere un sito ad un validatore è oltre la mia capacità di comprensione. Ad ogni modo, in questi casi dovrete usare Strumenti – Convalida CSS salvato localmente e Strumenti – Convalida HTML salvato localmente (Tools – Validate Local CSS e Tools – Validate Local HTML). A seconda di quanto sia invalido l’HTML, potrebbe essere necessario usare Strumenti – Convalida CSS salvato localmente anche per alcuni siti che non bloccano i validatori: con certi errori di marcatura il validatore CSS si rifiuta di funzionare.
L’estensione HTML Validator vi permetterà di validare i siti che bloccano il validatore del W3C. Questa estensione effettua la validazione senza mandare nulla al server, quindi è una ottima scelta per i siti che sono dietro ad un firewall o richiedono un login.
L’estensione HTML Validator vi avviserà automaticamente per ogni errore e per ogni possibile problema di accessibilità per tutte le pagine che caricherete nel browser. Nel pannello “Options” potete modificare il livello degli avvertimenti riguardanti problemi di accessibilità. Dovreste però ricordare che l’estensione HTML Validator si basa su Tidy. Questo significa che in alcuni casi non segnalerà degli errori che sarebbero rilevati dal validatore del W3C.
Siate consapevoli che validità non equivale ad accessibilità. Ho visto numerosi siti che risultano validi, ma che sono lontani dall’essere accessibili. Questo scenario è particolarmente comune in quei siti basati su certi CMS (Content Management System, sistemi di gestione dei contenuti) i cui sviluppatori sembra abbiano frainteso lo scopo di usare gli standard web.
Perchè? Perchè una marcatura valida è importante per assicurare una indipendenza dai mezzi, uno dei blocchi fondamentali del web. Usare una marcatura valida è il modo più sicuro per garantirsi che l’informazione possa essere interpretata in maniera corretta dalla maggior parte degli strumenti di navigazione.
2. Non usate i frames, per favore
In Firefox, per vedere se un sito usa i frames potete utilizzare il menu contestuale oppure potete guardare il sorgente della pagina. Se la pagina contiene dei frames, il menu contestuale di Firefox conterrà un’opzione chiamata “Questo Frame”. Gli iframes sono un po’ più complicati da rilevare siccome è necessario cliccare con il tasto destro nell’area occupata dall’iframe per vedere l’opzione “Questo Frame” nel menù contestuale. Fortunatamente l’estensione Web Developer ha un comando (Contorna – Contorna Frame) che traccerà i contorni degli iframe utilizzati nella pagina corrente.
Perchè? Anche se i frames (e gli iframes) non sono completamente inaccessibili, generalmente rendono un sito meno accessibile ed usabile, e dovrebbero essere evitati. I frames sono anche un’indicazione che il sito è stato sviluppato da uno sviluppatore con una carenza di conoscenza sia di accessibilità sia di usabilità. Leggete l’articolo “Who framed the web - frames and usability” per avere ulteriori informazioni su come i frames influenzino l’usabilità.
3. Strumenti per il controllo automatico dell’accessibilità
Gli strumenti per il controllo automatico dell’accessibilità sono usati generalmente dai principianti. E’ perfettamente comprensibile – non sarebbe bello se controllare l’accessibilità di un documento fosse così facile come validare un documento? Il problema è che gli strumenti per il controllo automatico dell’accessibilità sono ancora lontani dall’essere perfetti e non ci si dovrebbe fidare dei loro risultati.
Questi strumenti aiuteranno a rivelare alcuni problemi, e possono essere usati come guida per ottenere una veloce e sommaria descrizione dell’accessibilità di un sito web. Questo è il motivo per cui penso che utilizzare questi strumenti sia utile. Ricordate che esistono molti problemi di accessibilità che questi strumenti non saranno in grado di rilevare,e che qualche volta riporteranno dei problemi che non sono veramente dei problemi. Un’azione manuale supplementare è sempre necessaria.
Quindi, gli strumenti sottoelencati non devono essere completamente creduti, ma almeno possono fornire alcune indicazioni su quali siti web siano più o meno accessibili, ed in quali aree ci siano più problemi:
- TAW
- WebXACT (precedentemente Bobby)
- Cynthia Says
Giusto per far chiarezza: un sito web che passa tutti i controlli automatici sull’accessibilità non è necessariamente un sito accessibile.
Perchè? Gli strumenti automatici vi aiutano ad individuare dei problemi di accessibilità che richiederebbero molto più tempo per essere individuati manualmente. Assicuratevi di valutare i resoconti generati automaticamente e di ispezionare manualmente le aree che evidenziano dei problemi.
4. Immagini e testo alternativo
Il validatore HTML e gli strumenti citati in questa sezione vi diranno se in qualche immagine è assente il testo alternativo siccome l’attributo alt è obbligatorio. Se il validatore non riporta nessun attributo alt mancante, potete essere certi che tutte le immagini presenti nel documento hanno un attributo alt. Comunque, potrebbero ancora esserci dei problemi, quindi è necessario che controlliate come l’attributo alt è usato.
Usate l’estensione Web Developer per mostrare il testo alternativo di ogni immagine presente nel documento: Immagini – Sostituisci immagini con informazioni alt (Images - Replace Images With Alt Attributes). Poi provate a comprendere il sito web. Inoltre controllate che i testi alternativi siano effettivamente visibili quando le immagino non sono visualizzate – molti browsers visualizzano il testo alternativo usando il colore del testo specificato per l’immagine (o per un suo genitore (parent)). Se quei colori sono troppo simili al colore dello sfondo che appare quando le immagini non sono visualizzate, il testo alternativo sarà molto difficile (se non impossibile) da leggere. Questa situazione si presenta in particolar modo in quei siti web che usano tante immagini per lo sfondo.
Molte persone fraintendono il significato dell’attributo alt. Lo scopo di questo attributo è di fornire del testo informativo e significativo che dovrebbe essere usato come alternativa quando un’immagine o altri oggetti grafici non possono essere visualizzati. Non deve essere usato per fornire il testo mostrato in una tooltip. L’attributo alt è obbligatorio per gli elementi img ed area.
Immagini informative dovrebbero avere un breve descrizione dell’immagine. Immagini decorative non dovrebbero avere alcun testo alternativo. Ho visto siti web che nell’incauto tentativo di essere utili descrivono con grande cura ogni immagine decorativa (anche le GIF spacer). Visitate dei siti web come questi con un lettore di schermo o con dei browsers testuali per rendervi conto quanto questo sia fastidioso.
Per una descrizione più approfondita dell’attributo alt e del suo parente, l’attributo
Perchè? Perchè se non è specificato alcun testo alternativo, o se è specificato in maniera impropria, chiunque non possa vedere le immagini perderà dell’informazione o sarà investito da una marea di informazioni inutili.
5. Assicuratevi che il JavaScript sia discreto
E’ ora di usare nuovamente l’estensione Web Developer Extension. Disabilitate i JavaScript (Disattiva - Disattiva JavaScript), poi provate ad utilizzare il sito. Alcuni siti sono impossibili da usare quando JavaScript non è disponibile. Tra i siti del settore pubblico il problema più comune che ho incontrato è che i link di navigazione funzionano solo con JavaScript. Inoltre tanti siti usano JavaScript per caricare i fogli di stile (dopo aver identificato il browser utilizzato, moda del 20esimo secolo), che significa che navigherete in un documento senza stili se JavaScript è disabilitato.
Inoltre uso Lynx, che no ha supporto per JavaScript, per testare se un sito è usabile anche senza l’utilizzo di JavaScript.
Perchè? Un modesto numero di persone hanno disattivato il supporto per JavaScript o utilizzano degli strumenti per la navigazione che non supportano JavaScript. Anche loro dovrebbero essere in grado di usare il sito web.
Questo non significa che non potete utilizzare JavaScript. Certo che potete. Fatelo, ma assicuratevi di utilizzarlo in maniera giudiziosa e discreta e di fornire una buona degradazione se JavaScript non è disponibile.
6. Aumentate le dimensioni del testo
Per controllare questo aspetto è necessario utilizzare Internet Explorer su Windows o controllare i CSS usati nel sito web. Quello che state cercando è come sono specificate le dimensioni del testo.
Le dimensioni dei font specificate con delle unità relative (come em o %) permettono che il ridimensionamento del testo funzioni in tutti i browsers. Se le dimensioni dei font sono specificate in pixel, gli utenti di Internet Explorer su Windows non possono cambiare le dimensioni del testo, senza prima cambiare dei settings nel loro browser (Opzioni Interent > Generale > Accesso Facilitato > Ignora le dimensioni dei caratteri specificati sulle pagine web). Modifica che ben pochi fanno.
Quindi, se potete caricate il sito web su Internet Explorer per Windows e provate a ridimensionare il testo (Ctrl + Rotella del mouse oppure Visualizza – Carattere – Molto grande). Se non succede nulla, probabilmente il sito web specifica le dimensioni dei font in pixel.
Se non avete la possibilità di provare il sito web su Internet Explorer di Windows, controllate i CSS. Usate ancora una volta l’estensione Web Developer: CSS – Modifica CSS. Cercate l’unità usata per definire in ogni dichiarazione font-size. Se vedete px, il sito web non usa unità relative (tecnicamente lo fa, ma non per lo scopo di questo articolo). Voi volete vedere em e %.
Se i browser debbano ridimensionare il testo specificato in pixel oppure no è una questione completamente differente, ed è stata dibattuta per anni. Una di queste discussioni può essere trovata nell’articolo Setting font size in pixels.
Anche se la dimensione dei font è specificata con unità relative potrebbero esserci dei problemi legati al cambiare le dimensioni del testo. Il layout della pagina deve essere disegnato considerando la possibilità che l’utente aumenti la dimensione del testo. Molti layout diventano inutilizzabili all’aumentare del testo. Ovviamente tutti i layout si romperanno prima o poi, ma un buon layout dovrebbe essere in grado di rimanere usabile anche se le dimensioni del testo aumentano di un paio di volte. Non deve apparire perfetto come con il testo nelle dimensioni normali, ma nessuna parte del contenuto dovrebbe scomparire o diventare illeggibile.
Perchè? Perchè molte persone hanno bisogno o vogliono del testo più grande per poterlo leggere in maniera confortevole. Potrebbero essere delle persone con delle menomazioni visive, avere più di 40 anni o avere il piacere di stare sdraiati indietro sulla sedia mentre navigano sul web.
7. Cercate la marcatura semantica
Per determinare se un sito utilizza una marcatura semantica, guardate i sorgenti e cercate i titoli (<h1> - <h6>), le liste ( <ul>, <ol>, <dl>), le citazioni (<blockquote>, <q>), e le evidenziazioni (<strong>, <em>). Solitamente potete rilevare queste marcatura abbastanza velocemente siccome siti che non usano una marcatura semantica tendono ad avere dei costrutti tipo <span class="titolorossograndegrassetto">Titolo</span> dove un documento con marcatura semantica avrebbe <h1>Titolo</h1>.
Perchè? Una marcatura semantica è importante in quanto fornisce agli strumenti per la navigazione una possibilità di interpretare e presentare i contenuti in funzione del loro significato. Come vantaggio addizionale, i motori di ricerca tendono a favorire pagine con una marcatura semantica.
Un uso appropriato dei titoli permetterà agli strumenti di assistenza di creare una struttura del documento che può essere molto utile agli utilizzatori di lettori di schermo.
Anche se gli strumenti di assistenza non utilizzano tutti le informazioni semantiche che sono fornite, se un sito web non usa una marcatura semantica con la quale iniziare è impossibile per qualsiasi strumento derivare qualsiasi significato dal testo.
8. Disattivate i CSS
Disattivate i CSS utilizzando l’estensione Web Developer: CSS - Disattiva fogli di stile – Disattiva tutti i fogli di stile. Questo vi permetterà di vedere la struttura dell’HTML sottostante con i gli stili di default del vostro browser.
Se disabilitando i CSS succede veramente poco, probabilmente state guardando un documento che usa delle tabelle per la sua struttura e una gran quantità di marcatura di presentazione. Con un documento come questo, probabilmente non arriverete a questo controllo senza aver già incontrato una moltitudine di problemi legati all’accessibilità.
Perchè? Un documento accessibile dovrebbe essere ben strutturato, significativo e leggibile anche senza CSS.
9. Usate Fangs per emulare un lettore di schermo (screen reader)
Se non avete la possibilità di provare un lettore di schermo, un buon metodo per avere una ragionevole impressione di come il sito che state valutando suonerà a qualcuno che usa un lettore di schermo è di usare Fangs. Fangs è un’estensione per Firefox (che vi ho consigliato di scaricare ed installare nella prima parte di questa serie di articoli) che emula uno dei più usati lettori di schermo, mostrando l’output come testo anziché come parlato.
Perchè? I lettori di schermo sono un importante tecnologia d’assistenza. Sapere come un lettore di schermo leggerà i contenuti del sito web che stiamo valutando vi aiuterà a determinare se l’ordine dei contenuti ha un senso, se i collegamenti ed i titoli sono usati in maniera corretta e se i testi alternativi sono usati in maniera appropriata.
Valutate i risultati
Quando avrete finito i controlli di presentati in questo articolo avrete trovato molti dei problemi tecnici che riguardano l’accessibilità del sito web esaminato. Se siete gli sviluppatori del sito web, fate ciò che vi è possibile per riparare i problemi che avete trovato ed effettuate nuovamente i controlli presentati in questo articolo. Se voi non siete gli sviluppatori del sito web esaminato, contattate il responsabile dello sviluppo del sito e riferitegli che avete trovato qualche problema che dovrebbe essere riparato.
Ci sono ancora molti possibili problemi di accessibilità. In Valutazione dell’accessibilità di un sito web – Parte Terza, scavando a fondo, il terzo ed ultimo articolo di questa serie, considererò quegli aspetti che sono difficilmente valutabili tramite degli strumenti automatici e che richiedono un po’ più di tempo per essere valutati manualmente. Inoltre, discuterò anche su qualcosa che spesso si trascura quando si parla di accessibilità: i contenuti.
Ti è piaciuto questo articolo? Aggiungilo a: del.icio.us
