5 passi (almeno) per migliorare l’accessibilità

Non si parla mai abbastanza di accessibilità: ecco perchè, nella sua sintetica semplicità, ho ritenuto utile l’articolo scritto da Alexsey Donets, che ringrazio per avermi permesso di tradurne i punti chiave e pubblicarli qui in italiano.

La prima indagine globale (PDF) sull’accessibilità dei siti web, condotta da Nomensa per conto delle Nazioni Unite nel 2006, ha concluso che su 100 homepage di siti web esaminati, appartenenti a 20 paesi, il 97% non ha raggiunto il livello A di accessibilità – la valutazione di base delle Web Content Accessibility Guidelines del W3C (WCAG).

Oggi questo non è più pensabile, eticamente parlando.

Ecco 5 linee guida, semplici ma pratiche, per migliorare l’accessibilità del proprio sito web.

1. Colore

La prima cosa da considerare è il colore. Solo negli Stati Uniti ci sono circa 10,5 milioni di uomini e seicentomila donne che soffrono di Daltonismo. Deuteranopia e Protanopia sono i tipi più comuni di cecità ai colori: le persone che hanno problemi di questo tipo incontrano difficoltà a distinguere tra colori verde, rosso e simili. Durante la progettazione del sito, quindi, si dovrebbero tenere a mente questi fattori.

Molto utile, per ridurre l’impatto di questo tipo di problemi, fare un test del sito web: esistono molti web tools (gratuiti) che permettono la simulazione, attraverso filtri differenti, della visione in soggetti daltonici:

• http://colorfilter.wickline.org/
• http://michelf.com/projects/sim-daltonism/
• http://www.etre.com/tools/colourblindsimulator/
• http://www.vischeck.com/

Mantenere poi un forte contrasto tra la gamma di colori che si è deciso di utilizzare, può essere d’aiuto: le Web Accessibility Guidelines suggeriscono un rapporto di 4,5:1 tra i colori del testo (e immagini di testo) e sfondo. Il rapporto ideale resta comunque di 7:1.
Ancora meglio: testo nero su sfondo bianco.

2. Link

Molte persone fanno uso di screen readers e la maggior parte di questi strumenti offrono l’opzione di navigare un sito saltando da un link ad un altro, con lo scopo di rendere più veloce ed efficace la ricerca di contenuti a cui si è interessati. Ciò che viene letto, quindi, è di fatto il testo di descrizione di ciascun link, non il contenuto ad essi associato. È di scarsa utilità, per non dire fastidioso, far ascoltare agli utenti descrizioni del tipo “leggi articolo completo” oppure “clicca qui”, oltre a non dar loro nessuna anticipazione del contenuto sottostante o nessuna indicazione su dove verranno direzionati.
Utili suggerimenti per un corretto utilizzo di link e descrizioni ad essi associate: 15 Usability Guidelines For Designing Web Site Links (in inglese).

3. Contenuto alternativo

Il video tutorial di Nomensa spiega l’importanza dell’uso dei tag “alt”

Uno dei principi più importanti dell’accessibilità nel web è fornire contenuti fruibili e usabili per tutti, indipendentemente dale necessità di ogni utente. Ci sono diverse tecniche per raggiungere questo obbiettivo, ma una delle più semplici, forse, è rappresentato dal corredare con del testo (descrizioni) elementi che testo non sono, come ad esempio le immagini, i video, etc. attraverso l’utilizzo di corretti tag HTML.

4. Navigazione

Through eyes of a screen reader – fonte psasbyliz (YouTube Username)

Una considerazione speciale va fatta in relazione al menu navigazionale: andrebbe posizionato in modo che sia ben visibile e intuitivo, e che non vi siano ambiguità nei suoi percorsi. È altrettanto importante definirne lo stile e la gerarchia, in modo da differenziare in modo chiaro i contenuti dai sottotitoli a dai titoli principali.

Una risorsa importante e spesso dimenticata è rappresentata dall’attivazione di attributi HTML “tabindex”, che rendono fruibili, aumentandone il controllo, le compilazioni di form. Questa utilità è valida anche se pensiamo alle persone che hanno abilità motorie fini ridotte (i tipici esempi sul web sono rappresentati dalla selezione di radio buttons e check boxes).

5. Testing

Non c’è niente di meglio e utile che testare con persone reali. In mancanza di questo, o a complemento, esistono comunque dei tools automatizzati ma efficaci che possono analizzare, da un punto di vista dell’accessibilità, il codice del nostro sito web. In questo post 10 Free Web Based Accessibility Tools è possibile trovare una lista di free tools con le relative descrizioni, che comunque per semplicità elenco qui sotto:

1. Accessibility Valet
2. Accessibility Checker
3. Cynthia Says
4. EvalAccess
5. FAE
6. MAGENTA
7. OCAWA
8. TAW
9. WAVE
10. Web Accessibility Checker

Conclusioni

Quando si parla di accessibilità, è bene esplicitare la differenza [e la relazione] tra usabilità e accessibilità. Perché un sito web sia considerato usabile, deve necessariamente essere innanzitutto accessibile. Questo è il motivo principale per cui progettare siti accessibili va a beneficio di tutti i nostri utenti, e non soltanto a beneficio di coloro che hanno disabilità.

Sappiamo davvero usare bene il nostro iCoso?

Prendo spunto da un interessante articolo postato da Mike Madaio sul sito di UxBooth.com
per condividere consigli preziosi sull’utilizzo di dispositivi mobile touch-screen.
Non ho tradotto l’intero post, pur avendo ricevuto il benestare da parte di Madaio, che ringrazio (thank you Mike), ma ne ho tratta una sintesi alla quale ho aggiunto un paio di tips che ho ritenuto altrettanto pratiche.

Ci sono molti gesti e comportamenti che gli utilizzatori di dispositivi iPad e iPhone non conoscono: sono semplici gesti di base, ma che possono rendere l’utilizzo di questi strumenti molto più pratico e soddisfacente.

Jared Spool ha reso bene l’idea quando ha coniato il concetto di “gap di conoscenza“, inteso come la differenza tra la conoscenza reale di un utente e la conoscenza-obiettivo (tutto ciò che è necessario mettere in atto per completare un dato compito), e ha affermato che il design, per essere considerato intuitivo, deve colmare questa lacuna (gap) – che poi è il compito primario di un UX designer.

La genialità di Apple consiste senza dubbio nell’aver individuato modalità intuitive e facili all’uso nell’utilizzo dei loro prodotti, riuscendo a rendere la tecnologia trasparente, ma si possono intravedere comunque lacune di conoscenza anche nell’uso di interfacce di dispositivi touch-based.

Gli esempi sono sicuramente molti: Mike ha osservato alcune criticità d’uso, che ci spiega dandoci alcuni suggerimenti.

1. Utilizzo di due dita per far scorrere un DIV incorporato

Ogni volta che c’è una zona di scorrimento (un DIV, cioè una sezione, un blocco tipicamente di testo) che è incorporata all’interno di una pagina web, è possibile leggerne tutto il contenuto “nascosto” facendo scorrere verso l’alto, o verso il basso, due dita contemporaneamente:

in alto a sinistra il box con scrolling nascosto

scorrimento a due dita

2. Una “strisciata a sx” rivela i sottomenu

Una tecnica comune utilizzata dai progettisti per nascondere le opzioni dei menu è nascosta dietro ad una strisciata, da destra verso sinistra, del dito (o delle dita): un tipico esempio è la cancellazione di un messaggio e-mail (nel lettore di default iOS), che rivela un pulsante “Elimina”:

swipe verso sinistra

Questo gesto (strisciata o swipe) funziona soprattutto per visualizzare i menu (o sottomenu) nascosti nelle apps mobile, vediamo ad esempio quella per Twitter:

comparsa sottomenu app di Twitter

Twitter e Facebook gestiscono questo problema in due modi diversi.

L’applicazione per iPhone di Twitter non mostra assolutamente nessuna indicazione che un “colpetto verso sinistra” farà comparire un menu nascosto. L’applicazione iPhone per Facebook, invece, mostra un’icona [+]sulla destra di ogni voce:

icona per app di FB

Toccando (tap) questa icona si apre un menu nascosto con le opzioni “Mi piace” e “Commenta”. Il menu risulta molto più evidente, ed è certamente più usabile per gli utenti che non conoscono il gesto swipe.

3. Previous / Next per muoversi tra i campi di una form

Non c’è nessun tasto tab (tabulazione) sulla tastiera iOS. Vi sono tuttavia i pulsanti “Prec” (o Previous) e “Succ” (Next) presenti nella parte superiore sinistra, il modo più semplice per spostarsi da un campo all’altro quando siamo in presenza di una form multi-campo, soprattutto se la dimensione dei campi è ridotta e il “tapping” risulta complicato:

E’ presente anche il tasto “Riemp.autom.” (o AutoFill) che riempie i campi in maniera automatica, senza doverli digitare ogni volta, con dati inseriti in precedenza (es. nome, cognome, email, etc.).

4. Correzione automatica e modifica del testo utilizzando la “lente di ingrandimento”

L’opzione di correzione automatica dei nostri dispositivi ci viene spesso in aiuto, ma a volte è anche motivo di errori inconsapevoli (talvolta ridicoli) e di generazione di stati ansiosi (quando tentiamo ennemila volte di correggere l’errore generato dal sistema):

C’è uno strumento che ci permette di governare con estrema precisione le correzioni al testo che stiamo digitando, ed è l’opzione “lente di ingrandimento”:

tenendo premuto il dito sopra il testo da correggere, compare una piccola bolla che simula una lente. E’ proprio guardando attraverso quella lente che riusciamo a governare gli spazi – anche piccolissimi – tra una lettera e l’altra, spostando quasi impercettibilmente il dito sul touch-screen. E’ più semplice da provare che da descrivere, ma è di una banale quanto sconcertante facilità (a saperlo).

5. Screenshot

Quante volte abbiamo bisogno di avere a disposizione un’immagine che rappresenti ciò che in quel momento stiamo visualizzando sul nostro schermo, che sia una pagina di un sito web, un elenco di messaggi dal canale Twitter, una lista di post su Facebook? Con il computer è un gioco per tutti, ormai.

Ma come si fa con un dispositivo mobile?

E’ sufficiente cliccare contemporaneamente il tasto di spegnimento (nella parte superiore dell’iPhone o iPad) e il pulsante “home” (nella parte inferiore), fino a sentire un click, che simula il suono dello scatto fotografico:

Lo screenshot, sottoforma di immagine, viene automaticamente archiviato nella cartella Immagini (Foto salvate).

6. Vocali accentate

Un’altra opzione molto utilizzata, ma ignorata dalla gran parte degli utenti, è quella dedicata alle vocali accentate. E’ possibile scegliere tra una rosa di accenti (e in qualche caso di caratteri speciali) semplicemente tenendo premuta per qualche secondo la lettera prescelta:

e poi spostarsi con il dito, senza rilasciare, fino a selezionare la lettera desiderata. Vale anche con i numeri (es. 6, 6°, 6^…).

E’ possibile scaricare una guida in pdf, incompleta, dei gesti comunemente utilizzati con dispositivi touch-screen (grazie Luke).

Design pulito. E gentile.

Dell’ultimo summit italiano di architettura dell’informazione mi e’ rimasta nella testa una frase, su tutte, che probabilmente ne riassume l’anima: “L’usabilità come amorevole gentilezza”, di @yvonnebindi.

Gentilezza nell’aiutare le persone a trovare le informazioni che desiderano con facilità e in breve tempo. Soprattutto oggi, che abbiamo tutti la sensazione di essere investiti da uno tsunami di contenuti di ogni tipo e forma e non sappiamo bene cosa afferrare, perché ci e’ necessario, e cosa invece lasciare andare con la corrente, perché superfluo.

Anche il design può essere gentile, pulito e quindi di aiuto.
Un articolo semplice e interessante sul clean design ci spiega in pochi passaggi come realizzarlo.

CLEAN DESIGN, ovvero mettere ordine
Il pensiero visuale e’ piu’ veloce e immediato del pensiero logico: la causa principale di un design disordinato e poco chiaro e’ la non marcata (o assente) DIFFERENZIAZIONE tra gli elementi che compongono il nostro prodotto, sia questo un sito web, una brochure, una presentazione, un invito a un party… (esempio immediato qui sotto)

Tre sono le caratteristiche sulle quali lavorare.

1. la DIMENSIONE
Usare maggiore contrasto tra elementi che hanno tra loro ruoli diversi (esempio titolo, sottotitolo, paragrafo…): e’ importante rendere ovvie le diverse proporzioni tra loro

2. la PROSSIMITÀ

La Gestalt ci insegna che elementi posti vicini tra loro formano percettivamente un gruppo, assumono visivamente una relazione spaziale. Raggruppiamo quindi visivamente i contenuti che hanno un collegamento, una correlazione

3. l’ALLINEAMENTO
Proprietà cruciale per donare un aspetto chiaro e organizzato al nostro design

Infine, eliminiamo tutto ciò che NON serve. Se abbiamo rispettato i tre cardini appena descritti, abbiamo ottenuto un design nitido e ordinato.
Usabile.
Gentile.
More is mess.

Approfondimenti: “Universal principles of design”, Lidwell – Holden – Butler