Con la crescita della comunità del web e l’uso ormai quotidiano di Internet, è diventato molto importante ampliare il bacino di utenti anche a coloro che faticano ad accedere alle risorse che Internet offre. A questo proposito, il W3C ha creato il gruppo WAI (Web Accessibility Initiative) per tracciare delle linee guida allo sviluppatore su come rendere i contenuti accessibili da persona affette da disabilità.
Molto spesso, purtroppo, è qualcosa a cui non pensiamo, o erroneamente crediamo che a un utente disabile possa non interessare il contenuto del nostro sito o il prodotto che vendiamo. Al contrario, un utente con disabilità potrebbe voler fare un regalo o preferire l’acquisto online, piuttosto che dover uscire di casa per andare nel negozio dall’altra parte della città.
Nel post di oggi, vorrei parlarvi di come, adottando alcuni piccoli accorgimenti, si possa migliorare di gran lunga l’esperienza di accessibilità sul nostro sito e di permettere a tutti di accedervi con semplicità, senza dover rinunciare ad un sito dinamico ed interattivo.
Individuazione degli utenti e degli strumenti assistivi
Il primo passo da compiere è capire quali potrebbero essere gli utenti che ne beneficerebbero e quali strumenti adottano per navigare il Web. Possiamo distinguerli in:
- Utenti ciechi con uno screen reader che descrive la pagina usando assistenza vocale o display braille.
- Utenti ipovedenti che usano font grandi o lenti di ingrandimento.
- Utenti con disabilità motorie che non possono utilizzare il mouse e potrebbero utilizzare tastiere speciali o controllo vocale.
Queste tre tipologie di utenti sono accomunati dal fatto che con molta probabilità non utilizzeranno un mouse. Quando sviluppiamo il nostro sito non dobbiamo quindi trascurare questo dettaglio, perchè se non diamo la possibilità di accedervi con altri dispositivi, per questi utenti non ci saranno alternative: ce ne renderemmo subito conto provando a staccare il mouse.
Esistono diversi strumenti gratuiti per rendere un sito accessibile. Tra le estesioni di Google Chrome possiamo ad esempio trovare:
- Chrome Vox: estensione di Chrome per il web per gli screen reader
- Chrome Vis: permette di selezionare porzioni della pagina e di vederle ingrandite con dimensioni e colori a proprio piacimento
- Chrome Shades: Mostra la pagina come semplice testo, senza rimuoverne le funzionalità. Aiuta a percepire il proprio sito come gli utenti con screen reader, facendo balzare all’occhio molti problemi di accessibilità.
Gli step
Se sviluppiamo il nostro sito nell’ottica di renderlo accessibile, è buona norma applicare gli accorgimenti elencati di seguito in corso d’opera: in questo modo, oltre a guadagnare tempo, riusciremo a rendere il nostro codice pulito e ben organizzato. Quindi, nell’ordine:
Step 1 – Usare markup pulito e tag standard
È un consiglio basilare, ma fondamentale per gli utenti che navigheranno il nostro sito con il focus< (il punto dove viene “inquadrata” la pagina). Separiamo sempre il contenuto dal layout in un apposito CSS e rendiamo l’ordine del DOM logico. Una buona norma, nota come Progressive Enhancement, consiste nello scrivere innanzitutto il codice html, facendo poi seguire il CSS e infine il codice Javascript.
Il secondo consiglio è.. non reinventiamo la ruota! Non utilizziamo tag generici come div e span, quando esistono già dei tag nativi semanticamente più appropriati. Questi tag hanno anche il vantaggio di incorporare già la funzionalità di focus e gli screen reader riescono a riconoscerli molto bene, permettendo agli utenti di usarli bene di conseguenza.
Un ultimo consiglio è quello di “etichettare” le immagini e i campi di una form. Usiamo quindi sempre un alt per descrivere il contenuto di un’immagine e un label per descrivere un campo.
Step 2 – Gestione del focus
Come detto nello step precedente, gli utenti affetti di disabilità si sposteranno da un elemento all’altro nella pagina con il focus che viene catturato solamente da tag HTML nativi. Se vogliamo per qualche ragione utilizzare dei tag
Se proviamo a navigare su un sito che non utilizza tabindex usando il tab, ci accorgeremo subito che diventa molto frustrante scorrere tutti gli elementi all’interno della pagina per magari raggiungere quell’unico bottone di cui abbiamo bisogno. Tabindex ci permette di stabilire l’ordine con cui gli elementi verranno messi a fuoco, consentendo all’utente di muoversi con più facilità tra gli elementi importanti della pagina.
[code type=”markup”]
[/code]
Step 3 – Interazione da tastiera con i key handlers
Quando un elemento è attivo, dobbiamo fare in modo che l’utente possa interagire con esso usando la tastiera con semplicità.
Il tasto più adatto dipende dal contesto in cui si è: il pulsante di invio per i bottoni, le frecce per gli slider e così via.
[code type=”markup”]
[/code]
Step 4 – Aggiungere Aria per gli screen reader
Arrivati a questo punto, possiamo cominciare a pensare come lo screen reader deve identificare gli elementi che abbiamo appena creato all’interno della pagina sfruttando ARIA, un markup aggiunto a HTML5 che permette di dare informazioni semantiche agli screen reader sugli elementi. Esistono due tipologie di attributi aria:
- L’attributo role statico, che indica cosa il tag generico sta cercando di essere.
Troverete una lista completa di valori attribuibili a role a questo link
[code type=”markup”]
Invia[/code] - Gli attributi di stato e proprietà dinamici che danno informazioni sullo stato corrente di unelemento. A questo link una lista completa di stati e proprietà:
[code type=”markup”]…[/code]
Tra gli attributi dinamici, sono degni di nota gli attributi Live Region utilizzati in quelle pagine che sono aggiornate di frequente, come le chat. Questi elementi ci permettono di ascoltare quali porzioni della pagina stanno cambiando senza dover spostare il nostro focus direttamente su di essi.
Conclusioni
Creare siti accessibili per chiunque non è un lavoro semplice e esistono ancora delle inconsistenze, ma non commettiamo l’errore di accantonare queste possibilità. Gli utenti screen reader continuano ad aumentare e Aria è un progetto molto ambizioso per il futuro. Pensiamo quindi di creare esperienze online sempre più ricche: ne beneficeremo tutti!
