6 modi semplici per migliorare l'accessibilità web

Praticamente tutti sanno che l'esperienza utente (UX) è un aspetto importante da considerare quando si crea un sito web o un'app. Nessuno vuole utilizzare un'app non intuitiva con un'interfaccia utente (UI) terribile.

Ma che dire dell'esperienza utente delle persone con disabilità?

Dall'inizio degli anni 2000, il movimento per l'accessibilità web ha sostenuto un design web che consideri le esigenze delle persone con disabilità. Alcune aziende sono state portate in tribunale per aver mantenuto siti web inaccessibili, con i querelanti che citano le disposizioni dell'Americans with Disabilities Act.

L'accessibilità web sta crescendo come campo di studio e i professionisti stanno prendendo nota. L'accessibilità web sta diventando sempre più importante per le aziende e gli sviluppatori, e alcuni designer UX hanno iniziato a incorporare il design accessibile nel loro lavoro.

Tuttavia, l'accessibilità web e le sue pratiche sono ancora un mistero per la maggior parte delle persone.

Quali sono le pratiche di accessibilità? Come si costruisce un sito web tenendo conto dell'accessibilità? Quali tecnologie usano le persone con disabilità per accedere a Internet e come possiamo costruire siti web tenendo conto di queste tecnologie?

Come migliorare l'accessibilità web

Prima di lavorare sull'accessibilità di un sito web, considera innanzitutto i tipi di disabilità per cui stai ottimizzando. Tipicamente, le considerazioni sull'accessibilità sono intese per rispondere alle esigenze di coloro che hanno le seguenti disabilità:

• Disabilità visive (ipovisione, cecità parziale o totale, daltonismo)
• Disabilità uditive (sordità, ipoacusia, acufene, iperacusia)
• Disabilità motorie o di destrezza (paralisi, paralisi cerebrale, lesioni da sforzo ripetitivo come la sindrome del tunnel carpale)
• Disabilità cognitive che influenzano le capacità di problem-solving, memoria e attenzione, disabilità dello sviluppo o difficoltà di apprendimento come la dislessia

C'è una crescente consapevolezza culturale dell'accessibilità web. Tuttavia, c'è ancora molta ambiguità riguardo alla tecnologia assistiva che aiuta le persone con disabilità a usare Internet.

Comprendere questi strumenti è fondamentale per implementare strategie di accessibilità di successo. Come puoi creare pratiche efficaci se non conosci la tecnologia intorno alla quale stai costruendo e con cui stai integrando?

In alcuni casi, le persone con disabilità non richiedono alcun software o hardware specifico per accedere efficacemente a Internet. Invece, affinché le loro esigenze di accessibilità siano soddisfatte, hanno bisogno che i proprietari dei siti web o i creatori di contenuti forniscano strumenti o altre considerazioni.

Tipi di tecnologia assistiva

Tecnologia assistiva è il termine ombrello per dispositivi e strumenti assistivi, adattivi e riabilitativi utilizzati da persone con disabilità. Nel contesto dell'accessibilità web, la tecnologia assistiva è il software e l'hardware utilizzato da persone con disabilità per accedere e utilizzare Internet.

Implementare la metodologia di accessibilità web diventa più facile se si considerano le esigenze specifiche delle persone con disabilità. Non esistono soluzioni universali e dovrebbero essere adottati approcci diversi per fornire un'esperienza utente ottimale a seconda della disabilità.

Tecnologia assistiva per persone con disabilità visive

Le persone con disabilità visive come ipovisione o cecità possono richiedere software di screen reader. Il software screen reader traduce le visualizzazioni del sito web in informazioni non visive tramite convertitori di testo in voce, segnali acustici e display Braille aggiornabili. Il software di ingrandimento dello schermo è, come suggerisce il nome, un programma autonomo che ingrandisce le visualizzazioni digitali per fornire una visione più facile alle persone con ipovisione.

Tecnologia assistiva per persone con disabilità motorie

Le disabilità motorie o di destrezza comportano la perdita parziale o totale della funzione di una parte del corpo e possono includere la perdita del controllo motorio grosso o fine di una persona. Questo può includere paralisi, paralisi cerebrale e lesioni da sforzo ripetitivo come la sindrome del tunnel carpale.

Le persone con disabilità motorie o di destrezza possono richiedere un dispositivo di input alternativo, invece di una tastiera e un mouse tradizionali, per utilizzare e navigare un computer. I dispositivi di input alternativi includono dispositivi di tracciamento del movimento o degli occhi, puntatori per la testa e dispositivi di inserimento a singolo interruttore. Più avanti, discuteremo delle scelte di design che i proprietari di siti web possono fare per facilitare l'esperienza delle persone che utilizzano questi dispositivi. 

Tecnologia assistiva per persone con disabilità cognitive o difficoltà di apprendimento

A differenza delle disabilità visive o motorie, le disabilità cognitive o di apprendimento non sono spesso considerate nelle tecniche e nelle guide di accessibilità web. Mentre la maggior parte degli strumenti per assistere le persone con disabilità cognitive o di apprendimento sono costruiti dal lato dello sviluppatore o del web designer, strumenti esistenti possono aiutare lo sviluppo di tali programmi personalizzati.

Lettori di testo sono programmi software che ripetono il testo su uno schermo con una voce sintetizzata. Per chiarezza, alcune opzioni evidenziano la parola che viene pronunciata. Tuttavia, i lettori di testo non sono solitamente in grado di leggere testi complicati (come i menu) o elementi non testuali (come le immagini).

1. Usa correttamente il markup HTML

Che un web designer inserisca manualmente o meno l'HTML, è importante posizionare le intestazioni in un ordine che abbia senso. I lettori di schermo che articolano le informazioni su una pagina web usano le intestazioni come punti di riferimento.

Courtesy of Prototypr.io

Se l'HTML di una pagina è disordinato o le intestazioni non sono usate correttamente, gli utenti che accedono a un sito web con un lettore di schermo avranno difficoltà a navigare.

L'elemento H1 dovrebbe essere usato per le idee principali su una pagina con intestazioni successive (H2, H3, ecc.) che seguono un modello logico basato sugli argomenti. Questo aiuta gli utenti a comprendere la pagina e la relazione tra gli elementi su di essa.

Anche i link dovrebbero descrivere accuratamente la pagina a cui gli utenti verranno indirizzati. I link che semplicemente leggono "Clicca qui" o "Leggi di più" non dicono nulla agli utenti sul contenuto della pagina web.

2. Includi testo alternativo per le immagini conciso e descrittivo

Il testo alternativo viene spesso dimenticato quando le immagini vengono aggiunte alle pagine web. Dopotutto, la maggior parte delle persone usa il testo alternativo solo quando cerca immagini in un motore di ricerca o effettua una ricerca inversa di immagini.

Ma per le persone che usano lettori di schermo, il testo alternativo è tutto ciò su cui possono fare affidamento per conoscere un'immagine visualizzata. Gli utenti possono confondersi se il testo alternativo di un'immagine non viene modificato o non è necessariamente rappresentativo di ciò che l'immagine raffigura. Questo è particolarmente dannoso se l'immagine è fondamentale per comprendere la pagina web.

Tenendo presente ciò, è buona pratica non usare immagini come elementi di navigazione o come unico contenuto su un blog. Quando si scrive il testo alternativo, assicurarsi che la descrizione sia accurata ma non troppo prolissa. Questo aiuterà anche con l'ottimizzazione per i motori di ricerca (SEO). Utilizzare HTML pulito e ponderato aiuta sia la SEO che l'accessibilità web, quindi puoi colpire due piccioni con una fava.

3. Considera le opzioni CAPTCHA

Un completely automated public Turing test to tell computers and humans apart, spesso abbreviato in CAPTCHA, è uno strumento opportunamente — seppur terribilmente — nominato. I CAPTCHA sono particolarmente comuni nelle schermate di accesso per verificare che la persona che accede sia effettivamente un essere umano e non un bot di spam.

I CAPTCHA spesso presentano agli utenti un'immagine di lettere distorte che devono essere digitate in una casella di testo prima di consentire agli utenti di procedere. Per quanto utili siano nel prevenire lo spam, pongono una serie di problemi per le persone con esigenze di accessibilità.

I CAPTCHA possono essere particolarmente confusi per coloro che hanno dislessia o alcune difficoltà cognitive. Alcune immagini CAPTCHA non tengono conto delle persone con daltonismo, che potrebbero non essere in grado di distinguere le lettere dallo sfondo. Le immagini CAPTCHA sono anche illeggibili dai lettori di schermo, ma aggiungere la risposta corretta al testo alternativo sulla pagina potrebbe vanificare lo scopo del test.

Se i CAPTCHA sono indispensabili per il tuo sito web, assicurati che abbiano opzioni accessibili come test basati su audio o il reCAPTCHA v3 di Google, che consente agli utenti di superare un test CAPTCHA semplicemente cliccando su una casella.

4. Rendi accessibili i contenuti video

Mentre le persone con disabilità uditive possono tipicamente utilizzare Internet con poche difficoltà, i proprietari di siti web dovrebbero considerare gli ostacoli che quegli utenti incontrano. Ad esempio, se un sito web fornisce segnali acustici senza segnali visivi di accompagnamento, gli utenti con disabilità uditive non saranno in grado di interagire con il sito.

Uno degli ostacoli più notevoli per le persone con disabilità uditive è la mancanza di sottotitoli chiusi. I video senza sottotitoli chiusi possono essere completamente inaccessibili per coloro che hanno una carenza uditiva. Per coloro che caricano un video su una piattaforma come YouTube o Facebook, può essere facile fare affidamento sui sottotitoli generati automaticamente, ma spesso sono imprecisi e non forniscono sottotitoli contestuali per la musica o gli effetti sonori.

Descrizioni audio aiutano anche gli utenti con disabilità visive a seguire i video senza audio e a mostrare persone che non hanno ruoli parlanti. È anche fondamentale aggiungere trascrizioni dei video per coloro che utilizzano lettori di schermo o di testo.

5. Decidi su scelte di colore accessibili

Tipicamente, le scelte di colore per i siti web coinvolgono ciò che è più di tendenza nell'UX. Questo di solito significa un sacco di blu non offensivo, decisamente originale. Ma il colore è una considerazione importante nell'accessibilità web. In particolare, i designer potrebbero voler considerare le esigenze degli utenti con daltonismo.

Per aiutarmi a dimostrare, dai un'occhiata a questa immagine di Monty, l'unico e solo di G2, che si gode lo skyline di Chicago.

Gli utenti con daltonismo rosso-verde (deuteranopia) avranno difficoltà a distinguere rossi, verdi, marroni e arancioni. Se un designer decide di mettere del testo rosso su uno sfondo marrone, gli utenti daltonici probabilmente non saranno in grado di leggerlo.

E la deuteranopia è solo un tipo di daltonismo. Anche se potrebbe sembrare difficile tenere conto di ogni tipo di daltonismo esistente, sono disponibili molti strumenti gratuiti per i creatori di siti web per testare i colori su una pagina web. Altri strumenti possono generare palette di colori accessibili che possono semplificare il processo decisionale.

6. Assicurati che il sito web possa essere navigato utilizzando solo la tastiera

Per le persone che utilizzano dispositivi di input alternativi, navigare su siti web con scorrimento infinito e layout asimmetrici può essere un incubo. Anche se queste scelte di design sono di tendenza, sono incredibilmente inaccessibili per coloro che si affidano a dispositivi di input alternativi o utilizzano solo una tastiera.

Le scelte di design di tendenza includono barre di navigazione o opzioni che appaiono solo quando un cursore passa sopra un determinato pulsante. Spesso, evidenziare un pulsante a discesa designato utilizzando la tastiera non è sufficiente per attivare il menu a discesa. Questo significa che gli utenti che usano solo la tastiera non hanno modo di accedere a quelle opzioni della pagina web.

Aggiungere link di salto all'inizio di una pagina web può anche consentire agli utenti che usano solo la tastiera e agli utenti con lettori di schermo di saltare i contenuti senza navigare su un'intera pagina web ogni volta.

Rendere il tuo sito web più accessibile

Aggiungere miglioramenti all'accessibilità non è sempre facile, specialmente quando si bilanciano con pratiche di design moderne e tecniche UX per persone senza disabilità. Tuttavia, UX e accessibilità web certamente non sono incompatibili.

I designer hanno molte opzioni creative per fornire esperienze eccellenti agli utenti con o senza disabilità. Finché l'accessibilità è una considerazione fin dall'inizio, implementare pratiche di accessibilità può essere facile e non deve essere dannoso per il processo di design UX complessivo.