Accessibilità e Usabilità, queste sconosciute

In questo articolo proveremo a ipotizzare alcuni quesiti che potrebbe porsi il gestore di un sito in merito all’accessibilità e all’usabilità, argomenti molto discussi ma tuttavia ancora poco chiari nella loro applicabilità.

IL MIO SITO È ACCESSIBILE? È USABILE? COME FACCIO A SAPERLO?

Il termine accessibilità viene utilizzato impropriamente nel web, soprattutto per indicare quanto sia pratica la navigazione all’interno dei siti e spesso viene confuso col termine usabilità che, per quanto anche questa caratteristica abbia a che fare con la navigazione, è qualcosa di molto diverso.

Cerchiamo di chiarire, almeno in ambiente web, il loro vero significato e la reale importanza che possono avere queste due differenti caratteristiche nella creazione di un sito web.

Accessibilità

Sin dalla nascita dei sistemi operativi con l’interfaccia grafica, si è sentita la necessità di permettere anche alle persone disabili di poter intercettare, con l’ausilio di tecnologie assistive, e di conseguenza consultare, tutti gli elementi presenti in una pagina web.

L’accessibilità di ogni elemento di una finestra non riguarda solo le pagine web ma vale anche per i sistemi operativi e i software installati. Un’accessibilità non curata lascia l’utente nell’incapacità di ricevere le informazioni regolarmente riportate sul monitor.

Quindi, per accessibilità si intende la possibilità, per qualsiasi tipologia di utenza, adeguatamente fornita di hardware e software assistivi, di poter consultare completamente il contenuto di qualsiasi finestra a schermo, senza che esistano settori non riportati o non letti correttamente.

TUTTO QUI? SERVE SOLO AI DISABILI?

Assolutamente no, l’accessibilità serve a tutti!

Oltre a rendere un sito fruibile per gli ausili informatici, seguire le normative dell’accessibilità e la conformità con le regole del W3C, permette di aver la garanzia che le proprie pagine web vengano visualizzate con qualsiasi dispositivo, qualsiasi browser, qualsiasi sistema operativo.

Quante volte vi sarà capitato di riuscire ad aprire un link con il computer e di non riuscirci con lo smartphone?

O di trovare link che non funzionano, magari visualizzati scorrettamente?

O addirittura un pulsante che non si attiva.

Poi veniamo a sapere che il nostro amico con un altro dispositivo invece attiva gli stessi pulsanti e link correttamente. Questi possono essere il risultato di una scarsa accessibilità dei vari elementi che compongono una determinata pagina web.

L’accessibilità di un sito web, quindi, è strettamente legata alla cross-browser compatibility, la compatibilità fra diversi browser. I browser non fanno altro che leggere il codice di una pagina, interpretarlo e formattarlo cercando di dare un ordine agli elementi per essere visualizzati.

Ogni browser però opera in modo differente. Anche le diverse versioni dello stesso browser possono visualizzare a schermo risultati differenti. Io posso anche non possedere un dispositivo Android, magari utilizzo solo Apple, e, se il codice è corretto, ho la certezza che anche sui dispositivi Android le mie pagine verranno visualizzate correttamente.

Come faccio a far visualizzare il mio sito correttamente ovunque?

È di fondamentale importanza creare le nostre pagine con un codice che venga interpretato da tutti i browser correttamente.

Non si intende che si debba intervenire manualmente nella scrittura del codice, oggi qualsiasi software che permetta di creare siti web (CMS) hanno tutte le funzioni che ci servono per raggiungere questo scopo.

Sino a un decennio fa, solo l’utilizzo del codice puro, quale HTML o PHP, dava la certezza di poter rendere le proprie pagine accessibili. Oggi bisogna riconoscere che anche i CMS, quali WordPress, che ad oggi è arrivato alla versione 5.7, riescono a rendere una pagina quasi totalmente accessibile.

Vero anche che gli ausili di supporto assistivo, quali sintesi vocali, display braille, screen reader, software video ingrandenti, hanno fatto passi da gigante arrivando ad intercettare anche gli elementi non correttamente codificati.

Cosa devo fare se nel mio sito visualizzo tutto correttamente?

Facciamo alcuni esempi per chiarire maggiormente le difficoltà che si incontrano con del codice non accessibile.

Iniziamo con il precisare che una persona non vedente utilizza un software di lettura schermo, Screen Reader (Jaws e NVDA sono i più diffusi), che lavora sulla scheda video. Gli screen reader formattano e intercettano i vari elementi trovati nella scheda mentre viene visualizzata una finestra e mandano il risultato a una sintesi vocale, o un display braille, che a loro volta riportano  in voce o in braille all’utente tutto quello che appare sullo schermo.

È necessario precisare che questi dispositivi non si limitano a leggere le finestre ma permettono la loro completa navigazione. Una persona non vedente a oggi gestisce un buon 80% di un sistema operativo. Il resto è grafica, immagini, video dove la vista è prioritaria.

Accessibilità delle immagini

Il primo esempio che riporto, il più diffuso come errore, è la corretta etichettatura dei grafici o delle immagini.

Prendiamo come esempio un sito che tratta di gare automobilistiche, Formula 1, Rally, ecc… All’inizio della pagina troviamo una bandiera a scacchi, la classica bandiera che viene sventolata a fine gara. È un grafico, una piccola immagine che in un sito di motor sport ha un’enorme importanza.

Quella bandiera però dovrà essere etichettata dal programmatore, identificandola col suo nome o comunque assegnandole una descrizione che la identifichi in modo preciso. In mancanza di queste indicazioni una sintesi vocale potrà solo vocalizzare che quell’elemento è un grafico. Ma un grafico di cosa?

Nessuna indicazione per comprendere che si tratta di una bandiera a scacchi.

In questo caso, per una persona vedente, questo grafico non ha bisogno di descrizioni aggiuntive in quanto rappresenta da sé il suo significato.

Accessibilità di un pulsante

Ora un esempio simile ma leggermente più complesso.

Immaginiamo un pulsante in un form di ricerca, quindi il famosissimo pulsante “Cerca”.

Spesso questi pulsanti sono dei grafici stilizzati e le lettere che compongono la parola Cerca, sono disegnate all’interno del pulsante stesso. Una persona normodotata legge la parola e ne comprende il significato.

Un computer non può farlo. Quelle lettere sono disegni e non caratteri ANSI che possono essere intercettati. Quindi la sintesi vocale si limiterà a dirci che è un pulsante. Ma cosa attiva quel pulsante?

Anche in questo caso è necessario che il programmatore web dia un’etichetta e quindi un nome a quel pulsante, nel nostro caso bisogna indicare che quel pulsante si chiama Cerca.

Questi sono due degli errori più frequenti e spesso li ritroviamo anche in intestazioni linkate, in link vuoti o nei campi dei form dove l’etichetta dei vari campi è stilizzata, non presente o scritta con codice non accessibile.

In questi casi, nei form, posso ritrovarmi vari campi e, navigandoli, il risultato della voce sarà solo la parola VUOTO, e l’indicazione che si tratta di un’area dove posso inserire del testo.

Significa che quel campo non ha un nome, non posso sapere cosa sia, ma dicendomi esattamente “Vuoto, campo di editazione”, io capisco che posso scrivere ma non ho nessuna indicazione su cosa scrivere.

Errori di accessibilità comuni

Esistono poi altri errori, che non impediscono totalmente la lettura ma comunque la rendono confusa e difficoltosa.

• Il non seguire correttamente i livelli di intestazione nelle varie sezioni della pagina. Intendo che non posso creare una pagina con le intestazioni solo di livello 2. Non posso capire l’importanza e la priorità dei contenuti di una pagina web.
• A ogni sezione o articolo bisogna inserire l’intestazione corretta, un titolo per ogni sezione.
• Bisogna suddividere in sezioni la pagina delimitando correttamente ogni contenuto, che permette poi ai browser di funzionare in qualsiasi dispositivo.
• I link devono sempre essere compilati totalmente inserendo il testo da visualizzare a schermo.
• È di fondamentale importanza che qualsiasi pagina web venga testata con la tastiera prima di essere pubblicata. Operare solo con il mouse a volte non fa vedere errori di accessibilità. Io con il mouse forzo il mio focus. Dalla tastiera non posso farlo. Utilizzando il tasto Tab, è possibile navigare tutti gli elementi dal primo all’ultimo. In caso di errore, aggirabile con il mouse, il Tab non si sposta. Non trova nulla dove poter spostare il focus e rimane nella sua posizione.

L’importanza dei colori

Per ottenere un ottimo livello di accessibilità, anche se non può essere considerato un errore di codice, è importante seguire le direttive sui colori inseriti nelle varie pagine.

Bisogna evitare di creare situazioni con poco contrasto, evitare colori abbaglianti o pagine troppo scure dove risulta difficile leggerne i contenuti.

Le persone ipovedenti, cioè che soffrono di una mancanza di vista parziale e non correggibile con lenti, utilizzano dei software video ingrandenti e possono ingrandire sino a 32 volte un oggetto, un testo. Utilizzare colori poco definiti e troppo simili fra loro rende impossibile la lettura da parte degli ipovedenti, non per le dimensioni ma per la confusione generata da colori che tendono a mischiarsi quando ingranditi.

Bisogna poi sottolineare che la combinazione di colori con poco contrasto rende difficile la navigazione anche a persone che non hanno problemi di vista.

Anche utilizzare colori abbaglianti, inserire in una pagina troppi effetti grafici o elementi in movimento, portano l’utente medio a sentirsi disturbato, a volte anche inconsciamente, da pagine troppo vistose.

Non dimentichiamoci mai che un utente viene nel nostro sito per visualizzare i nostri contenuti, lo vuole fare nel minor tempo possibile e tutto deve essere chiaro la prima volta che naviga nel nostro sito. Per quanto a volte l’abbellire le nostre pagine con effetti speciali possa dar l’idea di aver creato un buon lavoro, le statistiche dicono che queste tipologie di pagine vengono abbandonate dagli utenti in meno di 5 secondi.

Ecco l’importanza di una grafica sobria, snella e di facile consultazione. E le norme sull’accessibilità permettono questo.

Devo quindi rinunciare a una bella grafica?

Quando si affronta il discorso dell’accessibilità i programmatori tendono a impaurirsi nella falsa convinzione di dover creare un sito privo di grafica o comunque ridotto nelle sue caratteristiche.

Niente di più falso.

L’accessibilità non impone nessun limite. Basta solo etichettare e codificare correttamente tutto il codice. È possibile anche intercettare senza problemi immagini in movimento come le foto che scorrono anche se linkate.

I software assistivi hanno comandi per aprire e chiudere le tendine, intercettare un sottomenù e non serve mettere tutti i contenuti visibili nella pagina.

Riassumendo, questo articolo ha due scopi principali che vanno chiariti ai programmatori di pagine web:

• L’accessibilità totale di qualsiasi sito è possibile seguendo le regole del codice.
• Non esistono regole di accessibilità che limitino la creatività di un programmatore web.

L’accessibilità di fondo è conveniente a tutti, non solo ai disabili.

Usabilità

ORA IL MIO SITO è ACCESSIBILE! MA È USABILE?

Spesso si confonde l’accessibilità con l’usabilità, che è un’altra caratteristica non meno importante per la navigazione anche se molto differente.

Un sito poco usabile è un sito confuso, poco ordinato, con migliaia di contenuti sparsi che obbligano l’utente a dover perder tantissimo tempo per trovare quello che cerca. Questa problematica influenza anche le persone senza alcuna disabilità.

L’usabilità, dunque, è l’organizzazione chiara e semplice delle informazioni contenute in un sito, la facilità per l’utente di poterle reperire nel modo più intuitivo possibile.

Quando creiamo delle pagine tendiamo a ordinare gli elementi secondo il nostro gusto e, proprio per il fatto di averle create noi, abbiamo l’impressione di trovare tutto senza perdere tempo. Questo è normale perché è un nostro lavoro.

Un nostro amico però magari sostiene che nella pagina tutto è confuso e che deve navigare molto attentamente per trovare i contenuti che cerca.

Un classico esempio di questo concetto è Google. Perché Google è diventato il portale più famoso al mondo? Perché è semplicissimo. Un campo per scrivere e un pulsante per cercare. Ecco cosa vuole l’utente medio.

Ciò non significa che per ottenere una buona usabilità bisogna inserire meno elementi possibili. Bisogna inserirli ordinatamente e seguire delle regole ben definite.

Accessibilità e usabilità: quale delle due è più difficile da applicare?

AIUTO! SEMBRA CHE QUI CI SIA ANCOR PIÙ LAVORO DA FARE!

Nessun timore, qui le regole sono di facile applicazione e non richiedono nessuna esperienza di programmazione.

Diamo le principali indicazioni su come rendere usabili le nostre pagine.

Le intestazioni

Questi sono i titoli che noi assegniamo a ogni contenuto del nostro sito.

Nessun contenuto deve essere privo di intestazione, in una pagina web ogni contenuto deve essere suddiviso dagli altri contenuti nella sua apposita sezione. Immaginate un libro senza la suddivisione in capitoli. Inizia e dopo 400 pagine finisce. Diventa difficoltoso leggerlo o ritrovare alcuni punti specifici.

Come i libri hanno un titolo, anche il nostro sito ha un titolo, e anche le nostre singole pagine.

Ecco, il titolo del sito deve essere sempre una intestazione di livello 1. A scelta di chi crea il sito, è possibile poi assegnare il livello 1 a ogni pagina, dandogli il nome corretto di quella pagina.

L’intestazione di livello 1 deve comparire una sola volta in ogni pagina. A video, l’importanza dei contenuti viene distinta dalla grandezza dei caratteri. Il carattere più grande indicherà un titolo, un carattere piccolo indica un contenuto, ad esempio un articolo. Le intestazioni funzionano allo stesso modo. Il livello 1 avrà sempre il carattere con le dimensioni maggiori e l’utente comprende al volo che è il titolo.

A scalare poi si useranno livelli inferiori 2, 3, 4, fino a 6, per completare l’ordinamento della nostra pagina. Come per l’accessibilità, indicare correttamente l’elemento aiuta i browser a formattare e visualizzare velocemente e correttamente le pagine.

Errori di usabilità nella formattazione del testo

Un esempio di una scarsa usabilità è non identificare correttamente le intestazioni ma agire esclusivamente sulle dimensioni dei caratteri e utilizzare il grassetto per creare le differenze. A video il risultato non cambia ma per il browser diventa complicato. E anche qui si rischia di avere i nostri contenuti visualizzati in modo differente a seconda del dispositivo.

Riassumendo, un titolo per ogni sezione o contenuto e il livello 1 solo per il reale titolo del sito o della pagina. Evitare di inserire grassetti o corsivi ovunque nella pagina. Ancora più grave il voler dare importanza ai contenuti cambiandone il colore. Rende la pagina confusa e di difficile consultazione.

Come può fare un utente medio a comprendere l’importanza delle cose se tutto è evidenziato in modo diverso?

Ciò non significa che non sia possibile utilizzare sistemi per evidenziare i contenuti o parte di essi. Vanno però usati con discrezione.

Come per l’accessibilità l’utilizzo dei colori nelle nostre pagine web può risultare penalizzante per l’usabilità. Si consiglia quindi di verificare, anche con strumenti disponibili nel web, i colori assegnati ai singoli elementi delle nostre pagine.

Organizzazione del nostro sito

Quando creiamo un sito dobbiamo avere ben presente, sin dall’inizio, i contenuti che inseriremo e di conseguenza il numero di pagine che dovremo utilizzare. Un grosso errore dell’usabilità è quello di creare poche pagine con tanti contenuti differenti tra loro in queste pagine.

Spesso capita di incontrare siti web o blog dove tutti i contenuti vengono inseriti nella home page creando un’unica pagina lunghissima. L’utente medio non può permettersi di scorrere verso il basso trenta o quaranta volte per trovare ciò che cerca. Quindi si consiglia di strutturare attentamente la barra di navigazione del sito e di inserire tante pagine quanti sono i contenuti del nostro sito.

Facciamo un esempio utilizzando sempre un sito di motor sport. Questo, trattando varie categorie, parlerà di:

• Formula 1;
• Rally;
• Moto GP;
• Campionati turismo;
• Formula Indy;
• Campionato cross.

In un sito del genere ogni categoria elencata dovrà avere la sua pagina e, dove necessario, all’interno di queste pagine ulteriori suddivisioni.

Con questo esempio si intende far passare il concetto che ridurre le pagine del nostro sito web è controproducente per l’usabilità richiesta dall’utente. Più pagine sono presenti per la suddivisione dei contenuti più il nostro sito sarà fruibile, veloce ed usabile per chi viene a visitarci. Importante nella creazione delle nostre pagine è creare le versioni del sito anche per i dispositivi mobili. Penserà poi il browser del singolo dispositivo mobile a formattare correttamente ogni nostro contenuto e renderlo usabile.

Chi vi scrive è una persona non vedente totale e mi occupo appunto dell’accessibilità nei siti web e dell’accessibilità nello sviluppo dei software.