Vai al contenuto principaleVai al footer

Realizzare un prodotto accessibile - parte 1

Dalla teoria alla pratica, questo post affronta il tema del contrasto dei testi con alcuni trucchi per mantenerlo anche con le immagini di sfondo, per poi entrare nel dettaglio di come interagire con l'Accessibility tree e ottimizzare la navigazione da tastiera. Il prossimo sarà focalizzato su gli aria-attributes e gli elementi interattivi di una pagina web.

Tempo di lettura: 4 minuti

Recap post precedente

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.

a11y sta per "accessibility"

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à.

Domande da cui partire e aspetti da considerare

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?

Linee guida per l'accessibilità dei contenuti Web

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.

Contrasto, leggibilità e testo sopra le immagini

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.

Esempio di utilizzo dell'estensione Colour Contrast Checker sul browser Google Chrome

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.
Esempio di utilizzo due gradienti per testo su immagini

Tabindex

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à.

Focus-visible è qua per aiutarci

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.

Esempio di utilizzo di uno skip-link accessibile solo via tastiera

Accessibility tree: semantica e ordinamento dei titoli

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.

<html>
<body>
<h1>Titolo della pagina</h1>
<h2>Titolo della sezione</h2>
<h3>Titolo del pragrafo</h3>
</body>
</html>

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).

Hai trovato questo post interessante?Scopri chi siamo