Notizie e suggerimenti pratici per un web accessibile a tutti. L’accessibilità della rete è un dovere dei designer e un bene condiviso.
Esistono vari modi di ridimensionare il testo di una pagina web tramite CSS: in pixel, em e in percentuale.
Tramite un post di Jonathan Snook ho scoperto l’esistenza di una nuova unità di misura introdotta con i CSS3, chiamata rem. Questa unità si comporta in maniera molto simile a em, senza ereditarne i punti deboli.
PhpBB è una piattaforma molto diffusa per la gestione di forum online. La risorsa che voglio segnalare oggi è un tema accessibile per phpBB realizzato da uno sviluppatore italiano: Francesco Carzedda.
Accessibile (Accessible nella versione inglese) è il primo tema per phpBB che rispetta la nostra legge Stanca (4/2004) e le più recenti WCAG 2.0: non ho trovato altre risorse simili disponibili gratuitamente, e questo fa onore al lavoro di Francesco che ha deciso di distribuire il suo lavoro in rete.
WebAIM ha pubblicato i risultati di un nuovo sondaggio effettuato con 1245 utenti di screen reader nel mese di Dicembre 2010. Questo sondaggio era stato già effettuato negli anni precedenti e nel 2009 erano emersi alcuni risultati interessanti, come l’inaccessibilità dei CAPTCHA e l’uso diffuso di screen reader anche sui dispositivi mobili.
Continua a leggere Screen reader: sondaggio 2010 di WebAIM »
L’attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all’interno delle caselle input di tipo testo e delle textarea. Quando la casella riceve il focus, il testo sparisce e lascia spazio ai caratteri digitati dall’utente.
Il progetto di Your Inspiration Magazine è importante nel panorama italiano: una rivista di qualità per web designer non è facile da realizzare, e le persone coinvolte nel progetto si stanno impegnando a fondo per creare qualcosa di veramente notevole. Ne avevo già parlato in occasione dello scorso numero, e torno volentieri a parlarne per una nuova uscita.
Anche questa volta sono stato coinvolto direttamente con un articolo su web design e daltonismo su cui mi farà molto piacere ricevere i vostri pareri. Avevo già affrontato l’argomento su questo blog, ma rimanevano ancora varie cose da sottolineare e questa mi è sembrata un’ottima occasione per poter parlare di accessibilità ad un più ampio numero di lettori.
In questo numero di YIM sono tanti gli articoli da leggere: dedicate un po’ di tempo a sfogliare la rivista e se vi piacciono i contenuti condividetela tra i vostri amici e conoscenti.
VoiceOver è lo screen reader di casa Apple introdotto sui sistemi operativi della mela fin dalla versione 10.4. E’ installato anche su iPhone ed iPad, ed in questo articolo capirete come l’abbinamento lettore di schermo – touchscreen sia una soluzione molto comoda per chi ha delle difficoltà visive.
Questo articolo non vuole essere promozionale: vedere come si comporta un utente di screen reader con in mano un dispositivo touchscreen è sempre utile, soprattutto per chi si occupa di accessibilità. E’ fondamentale anche per avere un riferimento concreto al mondo reale: fa sempre bene studiare la teoria, ma soprattutto in questo settore è l’esperienza sul campo che fa la differenza.
Qualche giorno fa l’argomento è stato affrontato anche su Melablog: è interessante vedere come certe tematiche inizino ad acquisire la necessaria importanza.
Per molto tempo l’utilizzo degli access key è stato considerato un requisito fondamentale per un sito accessibile. Fornire delle scorciatoie da tastiera potrebbe a prima vista sembrare una soluzione intelligente, ma nella realtà dei fatti non è sempre così.
Associando ad un elemento di tipo a, area, button, input, label, legend e textarea l’attributo accesskey=”…” , è possibile indicare al browser una scorciatoia per raggiungere quell’elemento. Generalmente per utilizzare l’access key è necessario premere alt in combinazione con il tasto indicato.
Il problema fondamentale è che non è mai stato definito uno standard su quali elementi di un sito debbano essere raggiungibili tramite access key. Considerando poi che non esiste nemmeno una regola su quali lettere utilizzare, il risultato è decisamente caotico.
Non solo un utente dovrebbe imparare per ogni sito degli access key diversi, ma potrebbe anche trovare dei conflitti con altre scorciatoie già definite dal sistema. Ogni browser infatti ha delle abbreviazioni predefinite per accedere ai menu (File, Modifica, ecc…), ed ognuno di loro si comporta in maniera diversa: in certi casi gli access key hanno la precedenza, in altri no.
Un altro fattore da considerare è che gli utenti utilizzatori di screen reader utilizzano molte altre scorciatoie, anche queste da aggiungere alla lista.
Inserire degli access key in una pagina non assicura quindi la possibilità di raggiungere velocemente determinati link, ma potrebbe aumentare la confusione. Se siete interessati ad approfondire il discorso, vi consiglio di leggere parte del capitolo 14 del libro “Accessibilità: guida completa” di Michele Diodati, dove questi problemi vengono descritti ampiamente. Il testo è di qualche anno fa ed alcuni esempi non sono aggiornati, ma è ancora oggi utilissimo.
E’ comunque importante fornire dei metodi per muoversi all’interno di una pagina anche senza mouse. La soluzione migliore, ormai largamente diffusa, è quella di inserire degli skip link per saltare al contenuto principale di una pagina o al menu di navigazione. Solitamente queste scorciatoie sono posizionate ad inizio pagina, nascoste via CSS, e permettono a chiunque di andare immediatamente al contenuto desiderato.
Una soluzione di questo tipo è inserita anche nelle tecniche consigliate per adempiere al punto 2.4.1 delle WCAG 2.0.
La possibilità di utilizzare gli access key rimane, ma da requisito è passata a suggerimento: considerando i possibili problemi il mio consiglio è di trovare soluzioni alternative e non utilizzarli. Su questo sito ad esempio è presente uno skip link per saltare al contenuto, visibile anche premendo il tasto tab dopo il caricamento della pagina.
[foto di alcomm]
Quest’estate è stata avviata un’interessante iniziativa made in Italy: è nata infatti Your Inspiration Magazine, una rivista digitale realizzata dai ragazzi di Your Inspiration Web.
Il primo numero è stato pubblicato per sondare il terreno e stabilire degli obiettivi: adesso che l’esperimento è stato avviato con successo si comincia a fare sul serio.
Mi fa molto piacere essere stato invitato a dare il mio contributo, ed è proprio per questo motivo che troverete anche un mio articolo tra quelli del numero di settembre. Il titolo è “Accessibilità: quali sono gli errori più comuni?”.
Vi invito a dare un’occhiata al progetto: in passato altri hanno provato a realizzare qualcosa di simile, ma nessuna rivista ha raggiunto degli standard così elevati (ricordate che è tutto gratis).
Il progetto grafico è eccellente così come il sito, e partecipano all’iniziativa autori di tutto rispetto. Non voglio citare nessuno perché c’è davvero l’imbarazzo della scelta: tra l’altro nei prossimi numeri ci saranno anche interessanti new entry. Io vi posso già dire che darò il mio contributo anche nel numero di ottobre: è ancora presto per parlarne, ma continuerò a scrivere di accessibilità della rete.
Se avete commenti sulla rivista o sul mio articolo non esitate a scrivermi. Trovate il numero di settembre a questo indirizzo: buona lettura!
Il tag HTML noscript è spesso considerato uno dei migliori metodi per fornire contenuti alternativi al JavaScript di una pagina web. In realtà nella maggior parte dei casi questo tag viene ancora oggi utilizzato per messaggi imbarazzanti come:
il tuo browser non ha i requisiti necessari per visualizzare questo contenuto
Questo testo però è decisamente poco interessante per l’utente, ed ancora meno utile dal punto di vista dell’accessibilità.
Il modo migliore per sfruttare questo tag è inserire al suo interno un contenuto realmente alternativo.
Nel caso di una mappa interattiva con dei punti di interesse, all’interno del noscript sarebbe sufficiente elencare questi punti senza troppe complicazioni:
<script type="text/javascript">
// mappa interattiva
[...]
</script>
<noscript>
<ul>
<li><a href="...">Punto di interesse 1</a></li>
<li><a href="...">Punto di interesse 2</a></li>
[...]
</ul>
</noscript>evitando messaggi come:
<noscript>Il tuo browser non supporta JavaScript!</noscript>C’è però un’alternativa migliore al tag noscript, ed è l’utilizzo del progressive enhancement. Fornire un contenuto alternativo può essere una soluzione valida intervenendo su un sito esistente, ma se state realizzando un progetto da zero, è molto più utile pensare fin da subito a certe problematiche.
E’ necessario pensare ad HTML e JavaScript come due livelli distinti, da tenere ben separati. Il procedimento migliore è infatti inserire tutti i contenuti HTML, e solo successivamente usare JavaScript per aggiungere effetti grafici e animazioni.
In questo modo anche con JavaScript non disponibile i contenuti resteranno accessibili, e soprattutto non dovrete preoccuparvi di realizzare delle versioni alternative.
Sulla separazione di HTML e Javascript c’è un interessante articolo di A List Apart del 2006: Behavioral Separation, scritto da Jeremy Keith.
Se utilizzate JavaScript in maniera non intrusiva potete benissimo dimenticarvi di noscript. Il tag però rimane ancora valido (ed è riconosciuto anche in HTML5) per garantire la retrocompatibilità.
Ci sono poi situazioni in cui l’utilizzo del noscript è insostituibile: basti pensare a tutti i casi in cui il codice JavaScript viene fornito da un sito esterno e non è modificabile.
E voi cosa ne pensate? Nel panorama italiano parlare di progressive enhancement è ancora un’utopia?
Parlando di immagini ed accessibilità è fondamentale considerare il testo alternativo (alt=”…”), spesso indispensabile. C’è però un caso particolare: le community fotografiche come Flickr, che hanno al centro di tutto delle immagini senza altri contenuti testuali.
In questo tipo di contesto, l’alt text è davvero indispensabile? L’argomento viene trattato in maniera molto interessante su Rebuilding the Web, con alcune riflessioni degne di nota.
Il testo alternativo serve per comunicare lo stesso significato di un’immagine quando quest’ultima non è visibile. Questo è un concetto fondamentale: molti infatti si confondono, pensando che l’alt text serva a descrivere un’immagine aggiungendo altri significati.
Il fattore determinante è il contesto in cui viene inserita l’immagine, che ne influenza il significato.
Prendiamo un’immagine come esempio:
Se fosse affiancata dal testo “Il mio gatto dorme sempre”, un testo alternativo valido potrebbe essere “E’ su un letto a fare l’ennesimo pisolino”. Oppure se il testo fosse “Ho un gatto da 7 anni”, potrei usare come alt “Dorme spesso ed è bianco”.
Questi esempi non sono assoluti, le combinazioni possibili sono tante e non è sempre intuitivo stabilire il testo alternativo migliore per un’immagine. Chiarire il concetto non è semplice, ma se vi vengono in mente esempi migliori fatemi sapere!
Nel caso di immagini non accompagnate da alcun testo invece le cose diventano più complicate, proprio perché non esiste un contesto in cui inserire il testo alternativo.
Aggiungere un alt text come “Il mio gatto mentre dorme sul letto nella casa al mare in Versilia” comunicherebbe sicuramente informazioni utili, ma nel modo sbagliato. Il testo alternativo (lo dice la parola) deve servire a trasmettere un significato equivalente, senza aggiungere dettagli non intuibili altrimenti.
Proprio per questo motivo l’alt text perde significato sulle community che hanno al centro di tutto delle immagini. Qual è la soluzione migliore? Non è facile dare una risposta, ma una pratica corretta potrebbe essere sfruttare i campi destinati a titolo e descrizione per spiegare la foto, lasciando l’alt vuoto.
Prendendo l’esempio di Flickr, nell’ultimo redesign l’alt delle foto è “photo”. Serve a qualcosa? Non direi, sarebbe stato meglio lasciarlo vuoto. Sono presenti però titolo e descrizione, che se usati correttamente potrebbero proprio servire allo scopo desiderato.
In un sito simile, il problema di spiegare il significato di un’immagine non è una questione di accessibilità, ma di usabilità. Non sono infatti solo gli utenti non vedenti a voler conoscere il soggetto di un’immagine: anche tutti gli altri visitatori hanno bisogno di dettagli che non sono intuibili dal contesto.
Una parte di questo problema sarà progressivamente risolto grazie all’uso della tecnologia: basti pensare al gps che ricava la posizione di una foto ed ai dati exif, che vengono già mostrati in automatico. Per quanto riguarda il resto al momento non ci sono soluzioni: solo con una descrizione testuale aggiuntiva sarà possibile avere delle pagine veramente informative, usabili ed accessibili.