Realizzare un prodotto accessibile - parte 1

Durante il post precedente abbiamo affrontato alcuni concetti fondamentali:

• accessibilità vuol dire rendere facili da usare servizi e informazioni a chi ha delle difficoltà percettive/cognitive, per non discriminare;
• queste persone sono un numero considerevole;
• i problemi di vista dipendono spesso dall’età, ma non ci sono solo essi;
• abbiamo degli standard internazionali che ci dicono come fare dei prodotti digitali accessibili; 
• possiamo svolgere dei test veloci e intuitivi, manuali o automatici, per verificare che stiamo rispettando questi standard.

Prima di proseguire è importante chiarire cosa vuol dire questo termine perché lo troverete molto spesso: a11y è l'abbreviazione di accessibility, in quanto ci sono 11 lettere tra la prima e l'ultima lettera, e si legge "ally".

Ma non è solamente un'abbreviazione: è un movimento mondiale che va molto oltre il rendere i prodotti web accessibili e si focalizza sul rendere accessibile tutto il sistema del computer, sia hardware sia software, alle persone con delle disabilità.

Rendere un prodotto digitale accessibile è una sfida che abbraccia numerosi aspetti di questo. Vogliamo che sia compatibile con particolari:

1. condizioni di utilizzo (contrasto e leggibilità, zoom):
2. modalità di utilizzo (navigazione da tastiera);
3. tecnologie (screen-reader);
4. preferenze (prefers-reduced-motion, stile custom).

Se è la prima volta che affrontiamo questa attività, alcune domande di partenza possono essere molto utili per darci la direzione di lavoro:

• È possibile fare qualsiasi cosa da tastiera oltre che col mouse?
• Lo screen reader sta offrendo informazioni rilevanti?
• Cosa succede se faccio uno zoom al 200%?
• Il testo è abbastanza leggibile?

Sono standard tecnici, sia di sviluppo sia di design, che permettono di rendere un prodotto accessibile.

Si articolano in alcuni principi e delle linee guida che danno un quadro di riferimento e gli obiettivi generali per comprendere i criteri di successo e applicare al meglio le tecniche. I criteri di successo, specifici per le linee guida, esprimono i possibili livelli di conformità (A, AA, AAA).

Infine vengono offerte tecniche sufficienti e consigliate e la documentazione per ciascuna linea guida e per ciascun criterio di successo.

Possiamo usare dei valori numerici, dunque oggettivi, che comunicano se un testo è sufficientemente contrastato e leggibile rispetto allo sfondo. Questo rapporto di contrasto è correlato sia al colore che alla dimensione del testo. Esistono delle estensioni del browser e dei plugin dei programmi di grafica che aiutano a verificare questo rapporto, come Colour Contrast Checker.

Un caso problematico ma molto comune riguarda l'utilizzo di testo sopra le immagini, per cui bisogna assicurarsi che il contrasto minimo sia garantito. Come evidenziato da questa ricerca svolta da Nielsen Norman Group, ci sono alcuni accorgimenti che possiamo utilizzare per ottenere questo risultato:

1. utilizzare immagini dai toni scuri:
2. impostare un gradiente lineare scuro davanti all'immagine e prima del blocco di testo, tramite CSS con uno pseudo-elemento before;
3. impostare un gradiente circolare dietro al blocco di testo, con uno pesudo-elemento before.

L’accessibilità via tastiera è uno degli aspetti più importanti, perché utlizzata da molti utenti con difficoltà motorie e visive. Alcune persone hanno dei movimenti involontari che non permettono un controllo preciso del mouse, altri hanno poca funzionalità con le mani. Alcuni non hanno proprio le mani.

Persone non vedenti e ipovedenti usano la tastiera in combinazione con uno screen reader. Inoltre alcuni utenti senza disabilità preferiscono usare la tastiera e la ritengono più efficiente e pratica per interagire con il prodotto.

Possiamo provare questa modalità premendo il tasto TAB, che ci porta sul primo elemento interattivo. Siamo in stato focus. Premendo ancora TAB si scorre all’elemento interagibile successivo. Se è un bottone o un link possiamo premere INVIO, mentre se è un input possiamo compilarlo.

Questo attributo controlla l'ordine con cui gli elementi interattivi sono accessibili navigando da tastiera. Impostare questo attributo su un elemento permette di aggirarne il normale l'ordine discendente.

Una cosa importante da considerare è che impostando questo attributo su un elemento che non sarebbe nativamente accessibile, come un div o uno span, lo si rende interagibile, dunque andrebbe evitato. Come vedremo dopo parlando di semantica dei tag HTML, è importante usare i tag corretti per evitare problemi di accessibilità.

Quasi subito emerge che per la navigazione da tastiera è fondamentale fornire un’indicazione visuale di quale è l’elemento attualmente in status focus. Questo può creare dei problemi perché viene applicato uno stile anche quando un elemento viene cliccato col mouse. Annullare lo stile degli elementi in stato focus risolve questo problema ma rende inaccessibile il prodotto; dunque come fare?

Recentemente è stato implementato un nuovo stato degli elementi interagibili: focus-visible.

Applicando uno stile solo in questo stato si abilita lo stile solo nelle situazioni in cui il focus deve essere visibile, proprio il caso della navigazione da tastiera. Nella pagina relativa di Mozilla Developer Network trovate i dettagli del suo funzionamento, ed è importante considerare che attualmente questo nuovo stato ha il supporto del 73% dei browser, per cui è raccomandato l'utilizzo del polyfill ufficiale per coprire tutti gli altri browser.

Se hai provato a navigare un sito da tastiera avrai notato che ogni volta che cambi pagina devi scorrere tutti gli elementi interattivi presenti prima di arrivare a fruire del contenuto del sito. Per evitare questo tedio ci sono gli skiplinks, delle ancore che permettono di saltare subito al contenuto, e dovrebbero essere il primo elmento interattivo che si attiva da tastiera.

Per fare in modo che questi link non siano visibili quando si interagisce col mouse ma solo con la tastiera, possiamo usare questo codice CSS:

E otterremo questo risultato:

Immagina di costruire una UI solo per uno screen reader. Ti basterà descrivere la struttura della pagina, in maniera simile a quella del DOM, ma con meno nodi ed informazioni, perché molte sono relative all’aspetto visuale.

Il browser fa esattamente questo: prende il DOM e lo modifica per renderlo usabile dallo screen reader, seguendo questi passaggi:

1. All’apertura del sito il browser espone una versione semantica della sua UI verso la tecnologia assistiva via API.
2. Lo screen reader prende quanto ricevuto via API e crea una sua UI di presentazione, fatta da una rappresentazione vocale.
3. Viene offerta all’utente una modalità di interazione, ad esempio un hook che simula il tap o il click.
4. Lo screen reader manda l’azione al sito, che si occupa di interpretare l’azione nella UI originale.

Dunque la semantica dei tag HTML è fondamentale per fare in modo che l’accessibility tree venga costruito correttamente, perché usando il tag corretto l’accessibility tree crea l’interfaccia relativa per interagirci, ad esempio con i bottoni ed i link.

Altro aspetto importante è quello dell'ordinamento dei titoli (tag H1, H2, H3 etc). Lo screen reader e la navigazione da tastiera si basano sulla struttura dei titoli del contenuto per offrire un percorso di navigazione della pagina, di conseguenza è un requisito costruire i titoli in ordine discendente.

La prima parte finisce qua, continueremo la prossima settimana focalizzandoci su gli aria-attributes ed entrando nel dettaglio de l'accessibilità degli elementi interattivi, due argomenti veramente grandi e complessi da meritare un post dedicato.

Immagine di copertina: Building Technology Heritage Library (BTHL).