Miglioramento dell'accessibilità delle pagine web
Questo set di documenti è una versione di testo della parte dei contenuti trattati nel corso di Udacity sull'accessibilità. Anziché una trascrizione diretta del corso video, si propone di fornire un trattamento più conciso dei principi e delle pratiche di accessibilità, utilizzando i contenuti originali del corso come base.
Riepilogo
- Scopri cosa significa accessibilità e come si applica allo sviluppo web.
- Scopri come rendere i siti web accessibili e utilizzabili per tutti.
- Scopri come includere l'accessibilità di base con un impatto minimo sullo sviluppo.
- Scopri quali funzioni HTML sono disponibili e come utilizzarle per migliorare l'accessibilità.
- Scopri le tecniche avanzate di accessibilità per creare esperienze di accessibilità migliori.
Comprendere l'accessibilità, il suo ambito e il suo impatto può aiutarti a migliorare lo sviluppatore web. Questa guida ha lo scopo di aiutarti a capire come rendere i tuoi siti web accessibili e utilizzabili da tutti.
"Accessibilità" può essere difficile da pronunciare, ma non deve essere difficile da fare. In questa guida scoprirai come ottenere facilmente dei vantaggi per migliorare l'accessibilità con il minimo sforzo, come utilizzare gli elementi integrati in HTML per creare interfacce più accessibili e solide e come sfruttare alcune tecniche avanzate per la creazione di esperienze di accessibilità e controllo.
Scoprirai anche che molte di queste tecniche ti aiuteranno a creare interfacce più piacevoli e facili da usare per tutti gli utenti, non solo per quelli con disabilità.
Naturalmente, molti sviluppatori hanno solo una visione confusa di cosa significhi l'accessibilità, qualcosa a che fare con contratti governativi, elenchi di controllo e screen reader. - e ci sono molti luoghi in cui si equivalgono. Ad esempio, molti sviluppatori ritengono che occuparsi dell'accessibilità costringa a scegliere tra creare un'esperienza piacevole e accattivante e una che sia scomoda e brutta, ma accessibile.
Questo, ovviamente, non è affatto, quindi lo chiariamo prima di passare ad altro. Che cosa intendiamo per accessibilità e che cosa vuoi imparare?
Che cos'è l'accessibilità?
In generale, quando diciamo che un sito è accessibile, intendiamo che i suoi contenuti sono disponibili e le sue funzionalità possono essere gestite letteralmente da chiunque. In qualità di sviluppatori, è facile supporre che tutti gli utenti possano vedere e utilizzare una tastiera, un mouse o un touchscreen e che possano interagire con i contenuti della pagina nello stesso modo in cui si trovano. Questo può portare a un'esperienza che funziona bene per alcune persone, ma crea problemi che vanno da semplici seccature a ostacoli per altri.
L'accessibilità, quindi, si riferisce all'esperienza di utenti che potrebbero essere al di fuori della portata dell'utente "tipico", che potrebbero accedere o interagire con cose in modo diverso da quanto previsto. Nello specifico, riguarda gli utenti che stanno manifestando un qualche tipo di disabilità o disabilità e che l'esperienza potrebbe essere non fisica o temporanea.
Ad esempio, anche se tendiamo a focalizzare la nostra discussione sull'accessibilità sugli utenti con disabilità fisiche, tutti possiamo fare riferimento all'esperienza di utilizzo di un'interfaccia a cui non possiamo accedere per altri motivi. Hai mai avuto problemi a utilizzare un sito desktop su un cellulare o hai visto il messaggio "Questi contenuti non sono disponibili nella tua zona" o non riesci a trovare un menu familiare su un tablet? Questi sono tutti problemi di accessibilità.
Man mano che approfondirai, scoprirai che affrontare i problemi di accessibilità in questo senso più ampio e generale migliora quasi sempre l'esperienza utente per tutti. Ad esempio:
Questo modulo presenta diversi problemi di accessibilità.
- Il testo è a basso contrasto, difficile da leggere per gli utenti ipovedenti.
- Avere le etichette a sinistra e i campi a destra rende difficile per molte persone associarli, quasi impossibile per chi ha bisogno di aumentare lo zoom per utilizzare la pagina; immagina di guardare i contenuti su un telefono e di dover fare una panoramica per capire cosa va con cosa.
- L'etichetta "Ricordi i dettagli?" non è associata alla casella di controllo, pertanto devi toccare o fare clic solo sul quadrato piccolo anziché fare clic semplicemente sull'etichetta. Inoltre, chi utilizza uno screen reader non riuscirà a capire l'associazione.
Ora agitiamo la nostra barra per l'accessibilità e vediamo il modulo con i problemi risolti. Scuriamo il testo, modifichiamo il design in modo che le etichette siano simili agli elementi che stanno etichettando e correggiamo l'etichetta da associare alla casella di controllo in modo che tu possa attivarla anche facendo clic sull'etichetta.
Quale preferiresti utilizzare? Se hai detto "la versione accessibile", sei sulla buona strada per capire il presupposto principale di questa guida. Spesso, qualcosa che blocca completamente per pochi utenti è anche un punto dolente per molti altri, quindi risolvendo il problema di accessibilità si migliora l'esperienza per tutti.
Linee guida per l'accessibilità dei contenuti web
In questa guida faremo riferimento alle Linee guida per l'accessibilità dei contenuti web (WCAG) 2.0, un insieme di linee guida e best practice riunite da esperti di accessibilità per spiegare in modo metodico il significato di "accessibilità".
Le WCAG sono organizzate sulla base di quattro principi spesso chiamati con l'acronimo POUR:
Perceivable (Perceivable): gli utenti sono in grado di percepire i contenuti? Questo ci aiuta a ricordare che il fatto che qualcosa sia percepibile con un solo senso, ad esempio la vista, non significa che tutti gli utenti possano percepirla.
Operable (utilizzabile): gli utenti possono utilizzare i componenti dell'interfaccia utente e navigare nei contenuti? Ad esempio, un elemento che richiede un'interazione con il passaggio del mouse non può essere gestito da un utente che non può utilizzare un mouse o un touchscreen.
Comprensibile: gli utenti sono in grado di capire i contenuti? Gli utenti riescono a capire l'interfaccia in modo abbastanza coerente da evitare confusione?
Solidi: i contenuti possono essere utilizzati da un'ampia gamma di user agent (browser)? Funziona con le tecnologie per la disabilità?
Sebbene le WCAG forniscano una panoramica completa di cosa significa per l'accessibilità dei contenuti, può anche essere un po' difficoltosa. Per contribuire a mitigare questo problema, il gruppo WebAIM(Web Accessibility in Mind) ha sintetizzato le linee guida WCAG in un elenco di controllo facile da seguire, mirato specificamente ai contenuti web.
L'elenco di controllo WebAIM può offrirti un breve riepilogo generale di ciò che devi implementare, collegando anche la specifica WCAG sottostante se hai bisogno di una definizione estesa.
Con questo strumento in mano, puoi tracciare una direzione per il tuo lavoro di accessibilità e avere la certezza che, a condizione che il progetto soddisfi i criteri descritti, gli utenti dovrebbero avere un'esperienza positiva durante l'accesso ai tuoi contenuti.
Comprendere la diversità degli utenti
Quando si parla di accessibilità, è utile comprendere la variegata gamma di utenti nel mondo e le tipologie di argomenti che li interessano. Per una spiegazione più approfondita, ecco una sessione di domande e risposte con Victor Tsaran, Technical Program Manager di Google, assolutamente cieco.
Su cosa lavori in Google?
Qui in Google il mio compito è contribuire a garantire che i nostri prodotti funzionino per tutti i nostri utenti diversi, indipendentemente da persone con disabilità o capacità.
Che tipo di disabilità hanno gli utenti?
Quando pensiamo ai tipi di disabilità che rendono difficile per qualcuno accedere ai nostri contenuti, molte persone immaginano immediatamente un utente cieco come me. È vero, questa condizione può rendere frustrante o addirittura impossibile usare molti siti web.
Molte tecniche web moderne hanno lo sfortunato effetto collaterale di creare siti che non funzionano bene con gli strumenti utilizzati dagli utenti ciechi per accedere al web. Tuttavia, in realtà, l'accessibilità è molto di più. Troviamo utile pensare alle disabilità che rientrano in quattro vaste categorie: visivo, motorie, uditive e cognitive.
Vediamole una alla volta. Puoi fare alcuni esempi di disabilità visive?
Le disabilità visive possono essere suddivise in alcune categorie: gli utenti ipovedenti, come me, possono utilizzare uno screen reader, il braille o una combinazione dei due.
È piuttosto insolito non avere letteralmente la vista, ma c'è comunque una buona probabilità che tu conosca o abbia incontrato almeno una persona che non riesce a vedere per niente. Tuttavia, c'è anche un numero molto maggiore di quelli che chiamiamo utenti ipovedenti.
Si tratta di un'ampia varietà: da qualcuno come mia moglie, che non ha corna, per cui ha difficoltà a leggere le stampe ed è considerata cieca dal punto di vista legale, a qualcuno che ha solo una vista scarsa e ha bisogno di indossare occhiali da vista molto robusti.
La gamma è molto ampia e, naturalmente, le persone di questa categoria hanno a disposizione una vasta gamma di soluzioni: alcuni usano uno screen reader o un display braille (ho anche sentito di una donna che legge il braille visualizzato sullo schermo perché è più facile da vedere rispetto al testo stampato), oppure utilizzano la tecnologia di sintesi vocale senza l'intera funzionalità dello screen reader, oppure potrebbero usare una parte di ingrandimento del browser per aumentare lo zoom, oppure utilizzare una parte di ingrandimento dello schermo per aumentare lo zoom Potrebbero anche utilizzare opzioni ad alto contrasto come una modalità ad alto contrasto del sistema operativo, un'estensione del browser ad alto contrasto o un tema ad alto contrasto per un sito web.
Molti utenti usano una combinazione di queste funzionalità, come la mia amica Laura che utilizza una combinazione di modalità ad alto contrasto, zoom del browser e sintesi vocale.
Molte persone possono relazionarsi con ipovedenti. Innanzitutto, con l'invecchiamento, la vista si deteriora, quindi anche se non li hai mai provati, c'è una buona probabilità che tu abbia sentito lamentarsi dei tuoi genitori. Molte persone si sentono frustrate di tirare fuori il laptop da una finestra illuminata dal sole e scoprono di non riuscire a leggere niente. O se una persona ha subito un'intervento chirurgico a laser o deve solo leggere qualcosa dall'altra parte della stanza, potrebbe aver usato uno degli alloggi che ho menzionato. Quindi penso che sia abbastanza facile per gli sviluppatori avere un po' di empatia.
Ah, e non dimenticare di menzionare le persone con visione dei colori scadente: circa il 9% degli uomini ha una qualche forma di deficit della visione dei colori. Più circa l'1% delle donne. Potrebbero avere difficoltà a distinguere il rosso e il verde o il giallo e il blu. Pensaci la prossima volta che progetti la convalida del modulo.
Cosa succede con le disabilità motorie?
Sì, disabilità motorie o problemi di mobilità. Questo gruppo va da chi preferirebbe non usare un topo, perché magari ha avuto degli RSA o qualcosa di simile e lo trova doloroso, a chi potrebbe essere paralizzato fisicamente e avere una capacità limitata di movimenti per determinate parti del proprio corpo.
Gli utenti con disabilità motoria possono interagire con il computer utilizzando una tastiera, un sensore, un controllo vocale o persino un tracciamento oculare.
Come per gli ipovedenti, la mobilità può anche essere un problema temporaneo o situazionale: ad esempio, hai un polso rotto della mano del mouse. Magari il trackpad del laptop non funziona, o stai semplicemente guidando su un treno tremolante. Ci possono essere molte situazioni in cui la mobilità di un utente è compromessa e, assicurandoci che ci occupiamo di lui, miglioriamo l'esperienza complessiva, sia per chiunque abbia una disabilità permanente, sia per chiunque si rilevi temporaneamente di non poter utilizzare un'interfaccia utente basata su puntatore.
Ottimo, parliamo di disabilità uditive.
Questo gruppo può includere da persone molto sorde a persone con disabilità uditiva. E, proprio come la vista, il nostro udito tende a deteriorarsi con l'età. Molti di noi usano affinità comuni come gli apparecchi acustici.
Per gli utenti con disabilità uditiva, dobbiamo assicurarci di non fare affidamento sul suono, quindi assicurati di usare elementi come le trascrizioni e i sottotitoli dei video e di fornire qualche alternativa, se l'audio fa parte dell'interfaccia.
Come abbiamo visto con le persone con disabilità motorie e della vista, è facile immaginare una situazione in cui anche una persona le cui orecchie funzionano bene può trarre vantaggio da queste sistemazioni. Molti dei miei amici affermano di apprezzare molto i video con sottotitoli codificati e trascrizioni, perché significa che, se si trovano in un ufficio aperto senza portare le cuffie, possono comunque guardare il video.
Ok, puoi parlarci un po' di problemi cognitivi?
Esiste una vasta gamma di condizioni cognitive, come ADD, dislessia e autismo, che possono indicare che le persone vogliono o hanno bisogno di accedere alle cose in modo diverso. Le sistemazioni per questi gruppi sono ovviamente estremamente diversificate, ma senza dubbio si sovrappongono ad altre aree, ad esempio l'uso della funzionalità di zoom per facilitare la lettura o la concentrazione. Inoltre, questi utenti potrebbero scoprire che un design molto minimo funziona meglio perché riduce al minimo le distrazioni e il carico cognitivo.
Penso che tutti possano immedesimarsi nello stress del sovraccarico cognitivo, quindi è ovvio che se creiamo qualcosa che funziona bene per persone con problemi cognitivi, creeremo qualcosa che sarà un'esperienza piacevole per tutti.
Come riassumeresti ciò che pensi dell'accessibilità?
Osservando l'ampia gamma di capacità e disabilità delle persone puoi notare che progettare e realizzare prodotti solo per persone che hanno vista, udito, mobilità e cognizione perfette sembra incredibilmente limitato. È quasi autodisastroso, perché stiamo creando un'esperienza più stressante e meno utilizzabile per tutti e per alcuni utenti creando un'esperienza che in realtà li esclude del tutto.
In questa intervista, Victor ha identificato una serie di disabilità e le ha inserite in quattro ampie categorie: visiva, motoria, uditiva e cognitiva. Ha anche sottolineato che ogni tipo di disabilità potrebbe essere situazionale, temporanea o definitiva.
Diamo un'occhiata ad alcuni esempi reali di problemi di accesso e vediamo come rientrano in queste categorie. Tieni presente che alcune disabilità possono rientrare in più categorie o tipi.
| Situazioni | Temporaneo | Permanente | |
|---|---|---|---|
| Visivo | commozione cerebrale | cecità | |
| Motore | tenere in mano un bambino | braccio rotto, RSI* | RSI* |
| Audizione | ufficio rumoroso | ||
| Intellettive | commozione cerebrale |
Lesione da stiramento ripetitivo: ad es. sindrome del tunnel carpale, gomito del tennista, dito a scatto
Passaggi successivi
Abbiamo già toccato un bel po' di terreno. Hai letto su
- cos'è l'accessibilità e perché è importante per tutti
- l'elenco di controllo per l'accessibilità WCAG e WebAIM
- diversi tipi di disabilità che dovresti prendere in considerazione
Nel resto della guida, approfondiremo gli aspetti pratici della creazione di siti web accessibili. Organizziamo questa attività intorno a tre aree principali:
Messa a fuoco: vedremo come creare elementi che possono essere gestiti con una tastiera anziché con un mouse. Questo è importante per gli utenti con disabilità motorie, ovviamente, ma garantisce anche che la tua UI sia in buone condizioni per tutti gli utenti.
Semantica: ci assicureremo di esprimere la nostra interfaccia utente in modo efficace e compatibile con una serie di tecnologie per la disabilità.
Stile: prenderemo in considerazione il design visivo e valuteremo alcune tecniche per rendere gli elementi visivi dell'interfaccia il più flessibili e utilizzabili.
Ognuno di questi argomenti potrebbe occupare un intero corso, quindi non tratteremo ogni aspetto della creazione di siti web accessibili. Tuttavia, ti forniremo informazioni sufficienti per iniziare e ti indirizzeremo ad alcune utili risorse dove potrai scoprire di più su ogni argomento.