Accessibilità Web: perché gli standard W3C vengono spesso ignorati

Pubblicato: 2022-03-11

Il termine du jour è accessibilità al web , a mio parere, uno degli aspetti più spesso fraintesi e mal applicati del web design. L' idea sbagliata comune è che l'accessibilità sia progettata esclusivamente per le persone disabili. In effetti, tutti traggono vantaggio dai contenuti accessibili e il tuo pubblico aumenterà accedendo a contenuti accessibili su piattaforme diverse o in modi diversi, perché possono utilizzare i tuoi contenuti con meno vincoli.

Sfortunatamente, molti sviluppatori web non rendono accessibili i loro contenuti e non seguono le linee guida per l'accessibilità del web; quindi, molte persone incontrano difficoltà inutili nell'uso dei loro progetti e nella fruizione dei contenuti. In casi estremi, alcuni gruppi di utenti non possono utilizzare un tale sito Web in modo efficace.

La creazione di contenuti accessibili dovrebbe essere una seconda natura per qualsiasi sviluppatore, designer o creatore di contenuti, allo stesso modo in cui la considerazione di rampe, scale e ascensori lo è per un architetto che progetta un nuovo edificio.

Diamo un'occhiata più da vicino a cosa c'è dietro le quinte e perché così tanti sviluppatori sembrano trascurare gli standard di accessibilità web senza una buona ragione.

1. Cosa significa "design accessibile"?

I contenuti accessibili sono contenuti che tutti possono utilizzare . Non conosciamo tutti gli aspetti di come gli utenti accedono ai nostri contenuti, quindi dobbiamo progettare in anticipo l'accessibilità.

Come ho evidenziato in precedenza, questo non riguarda le persone con disabilità, che rappresentano circa il 15% della popolazione mondiale. Nella vita reale, gli utenti spesso finiscono per non consumare contenuti e interagire con i dispositivi esattamente come previsto durante lo sviluppo. Il contenuto accessibile è richiesto anche per motivi legali in molte giurisdizioni. Leggi "Fattori legali e politici nello sviluppo di un caso aziendale per l'accessibilità del Web per la tua organizzazione" per ulteriori informazioni sulla conformità all'accessibilità.

Considera i seguenti scenari mentre pensi ai contenuti accessibili per gli utenti che potrebbero essere:

Incapace di sentire bene. 360 milioni di persone nel mondo hanno disabilità uditive. Il contenuto audio dovrebbe avere trascrizioni e il video dovrebbe avere didascalie.
Impossibile vedere bene. Si stima che nel mondo 285 milioni di persone siano ipovedenti: 39 milioni sono ciechi e 246 ipovedenti. Gli utenti ipovedenti utilizzano lettori di schermo (che leggono il contenuto utilizzando la sintesi vocale), display braille aggiornabili (il contenuto dello schermo viene visualizzato sul display braille e l'utente può navigare e interagire con il proprio dispositivo utilizzando i tasti sul display) o high -modalità contrasto.
Affetto da dislessia. Le persone con dislessia trovano difficoltà nella lettura e nella comprensione dei contenuti, in particolare, ad esempio, testo giustificato o tutto maiuscolo.
Soffrendo di limitazioni fisiche. Non tutte le persone possono utilizzare tutti i dispositivi. Ad esempio, la navigazione nel contenuto deve essere disponibile non solo per gli utenti del mouse, ma anche per gli utenti che non possono utilizzare il mouse.
Utilizzo di dispositivi mobili. Adatta i tuoi contenuti per i piccoli schermi. Consenti all'utente di ingrandire o aumentare la dimensione del carattere.

2. Come garantire una buona accessibilità al Web

Le persone usano modi molto diversi di navigare e consumare i contenuti. Ci sono utenti che devono essere supportati da strumenti software aggiuntivi che li aiutino ad accedere ai contenuti più facilmente. Questi strumenti, noti come tecnologie assistive, vanno da lettori di schermo a touchscreen e puntatori per la testa.

Tuttavia, la tua applicazione e la tecnologia assistiva devono dialogare tra loro. Non tutto ciò che è scritto in HTML è completamente comprensibile per le tecnologie assistive. Per aiutare a "tradurre" i contenuti dal "linguaggio tecnico" a un linguaggio più leggibile dall'uomo, sono stati creati ulteriori standard API di accessibilità.

Questo diagramma di base dell'accessibilità web dovrebbe darti un'idea migliore di come funzionano le tecnologie assistive.

Per illustrare come funziona, diamo un'occhiata a un semplice esempio di codice:

 <a href="#” class=”button”>Delete</a>

Questo semplice codice, per le persone che usano lo screen reader, non significa molto. È persino fuorviante e si legge solo come un collegamento con il testo " Elimina ". Per aiutare gli utenti a capire che tipo di metodo viene utilizzato per eseguire l'azione, possiamo utilizzare gli attributi ARIA (Assistive Rich Internet Applications) (specificati su https://www.w3.org/TR/wai-aria/) per ignorare il ruolo originale. Cambiamo il significato di un collegamento a un pulsante aggiungendo l'attributo role="button" . In questo modo, gli screen reader lo leggeranno come un pulsante, non come un collegamento. Che è più appropriato.

In breve, attribuisci ARIA:

Fornisce o migliora la semantica di elementi non semantici o altri semantici,
Garantisce che il contenuto dinamico (dal vivo) sia ancora accessibile.
Fornisce il ruolo per descrivere il tipo di widget definito (menu, elemento ad albero, dispositivo di scorrimento, indicatore di avanzamento, ecc.).
Fornisce il ruolo per descrivere la struttura della pagina Web (intestazioni, regioni e tabelle).
Fornisce lo stato dei widget (selezionato, ha popup, ecc.).
Fornisce proprietà per il trascinamento della selezione che descrivono le origini di trascinamento e le destinazioni di rilascio.

Che cos'è l'accessibilità nel web design?

Ogni volta che progetti un contenuto pensa a due cose: come il contenuto è percepibile e come è operabile . Esaminiamo alcuni esempi per illustrare l'accessibilità nel web design.

Diciamo che progetterai un elemento a discesa di selezione personalizzato. Ecco le cose da considerare durante la progettazione dell'elemento:

Contrassegna stati diversi: abilitato, disabilitato, di sola lettura.
Contrassegna l'elemento quando ottiene lo stato di messa a fuoco/hover.
Contrassegna ogni elemento di opzione quando ottiene lo stato di messa a fuoco/hover.
Assicurati che il contenuto sia ancora leggibile quando solo il testo viene ingrandito fino al 200%.
Assicurati che ci sia abbastanza contrasto tra il testo e il suo sfondo. Aiuta le persone con una vista moderatamente ipovedente o su dispositivi in condizioni di illuminazione estreme, ad esempio esposti alla luce solare diretta o su un display con bassa luminosità, a leggere il contenuto.

Un altro esempio potrebbe essere la selezione di un colore per descrivere uno stato. Ecco le cose da considerare durante la progettazione di una sezione in cui l'utente sarà in grado di raccogliere un colore:

Ci sono persone che hanno difficoltà a distinguere determinati colori. Quindi verde non significa verde per tutti i tuoi visitatori. Per risolverlo, aggiungi una descrizione per ogni colore che descriva lo scopo.
Contrassegna ogni elemento quando ottiene lo stato di messa a fuoco/hover.
Assicurati che ci sia abbastanza spazio tra gli elementi in modo che ogni elemento possa essere facilmente attivato, ad esempio, su dispositivi con una vista più piccola.

3. Test di accessibilità: da dove cominciare?

Non c'è un modo per controllare e assicurarsi che il contenuto web sia completamente accessibile. È necessario utilizzare più tecniche per verificare e risolvere i problemi di accessibilità. Si può iniziare definendo problemi , soluzioni e priorità .

Definire i problemi

Mentre lavori sui problemi di accessibilità, cerca sempre di creare un ticket per problema con un titolo chiaro. Ciò dovrebbe semplificare la comprensione del problema e aiutare a definire una priorità.

Cattivo esempio: l'utente non può utilizzare la tastiera sulla pagina.

Buon esempio: impossibile utilizzare la navigazione da tastiera nel menu principale.

Il cattivo esempio porta a un caso che sarà abbastanza difficile da chiudere in breve tempo. Discussioni su più argomenti potrebbero iniziare anche nella sezione commenti, poiché il titolo del biglietto è troppo generico.

Il buon esempio punta esattamente al problema e si concentra solo su una cosa: la navigazione da tastiera nel menu principale.

Dai la priorità ai problemi di accessibilità al Web

Le priorità sono importanti perché definiscono quali problemi devono essere risolti per primi. Ad esempio, WCAG è diviso in tre livelli di conformità: A, AA, AAA, il che significa che dovresti iniziare da un livello minimo A, ma ciò non significa automaticamente che i livelli AA e AAA siano semplicemente "piacevoli da avere". Tutti i livelli sono importanti ed è importante non dare la priorità presumendo che il solo livello A sia sufficiente.

Tuttavia, i livelli WCAG (o qualsiasi altra linea guida) potrebbero essere piuttosto difficili da comprendere a volte e per semplificare un po', potresti anche considerare le seguenti definizioni di priorità:

Critico : problemi che impediscono agli utenti di utilizzare un'applicazione. Nessuna soluzione disponibile.
Maggiore : problemi che rendono difficile e/o disorientante l'utilizzo di un'applicazione, ma non bloccano la capacità dell'utente di completare l'operazione.
Minore : problemi che sono fastidiosi ma non ne ostacolano l'uso o miglioramenti che potrebbero essere apportati all'applicazione.
Info – Non aderisce alle migliori pratiche. Raccomandazioni generali per miglioramenti.

Soluzioni

Nessuna delle linee guida, con cui intendo WCAG, Sezione 508 o ADA, ti darà una soluzione diretta in termini di codice tecnico su come risolvere un problema specifico. Definiscono solo il comportamento atteso. Tuttavia, le WCAG hanno inoltre definito procedure di test che dovrebbero aiutare a capire come riprodurre il problema ed esiste un gruppo di comunità di monitoraggio automatizzato delle WCAG, una comunità del W3C focalizzata sullo sviluppo di regole affidabili per i test di accessibilità web, sia automatizzati che semiautomatici.

Un esempio per la tecnica WCAG G4 ("Consentire la pausa e il riavvio del contenuto da dove era stato sospeso"):

Procedura di prova

In una pagina con contenuto in movimento o scorrevole,

Utilizzare il meccanismo fornito nella pagina web o dall'interprete per mettere in pausa il contenuto in movimento o in scorrimento.
Verificare che lo spostamento o lo scorrimento si sia interrotto e non si riavvii da solo.
Utilizzare il meccanismo fornito per riavviare il contenuto in movimento.
Verificare che il movimento o lo scorrimento sia ripreso dal punto in cui era stato interrotto.

risultati aspettati

Il numero 2 e il numero 4 sono vere.

Come si vede non ci sono soluzioni tecniche, ma comportamenti attesi definiti. Il modo in cui gli sviluppatori web lo implementano dipende da loro.

Linee guida per l'accessibilità del Web e standard W3C

I seguenti standard web di base dovrebbero essere il tuo punto di partenza:

La più comune è la Web Content Accessibility Guidelines, nota come WCAG. WCAG 2.0 è “uno standard tecnico stabile e referenziabile. Dispone di 12 linee guida organizzate in base a 4 principi: percepibile, utilizzabile, comprensibile e robusto. Per ogni linea guida, ci sono criteri di successo verificabili, che sono a tre livelli: A, AA e AAA”.
Tecniche per WCAG 2.0 è una guida completa per gli autori di contenuti web.
Requisiti utente per l'accessibilità ai media W3C — Questo documento presenta i requisiti di accessibilità che gli utenti con disabilità hanno rispetto all'audio e al video sul Web.
Legge del ventunesimo secolo sulle comunicazioni e sull'accessibilità dei video — Il CVAA è diviso in due ampi titoli o sezioni. Il titolo I riguarda l'accesso alle comunicazioni per rendere i prodotti e servizi che utilizzano la banda larga completamente accessibili alle persone con disabilità. Il titolo II della legge sull'accessibilità apre nuovi orizzonti per facilitare la visione dei programmi video in televisione e su Internet da parte delle persone con disabilità.
Sezione 508 — Requisiti di accessibilità per le tecnologie dell'informazione e della comunicazione (TIC) che si applicano a tutte le agenzie federali quando sviluppano, acquistano, mantengono o utilizzano la tecnologia elettronica e dell'informazione.
Accessibilità del sito Web ai sensi del Titolo II dell'Americans with Disabilities Act (ADA) — Lì imparerai come i requisiti di non discriminazione del Titolo II dell'ADA si applicano ai siti Web del governo statale e locale.

Test di accessibilità web: come faccio a sapere se i miei contenuti sono accessibili o meno?

Ecco i punti di controllo di base e fondamentali che dovrebbero aiutarti a rendere i tuoi contenuti web più accessibili dal primo passaggio:

Convalida il tuo HTML. Assicurati che la struttura HTML non contenga errori, poiché le tecnologie assistive possono avere problemi nell'interpretazione del contenuto della pagina.
Prova con una sola tastiera. Assicurati che tutti gli elementi utilizzabili siano accessibili utilizzando solo la tastiera. Inoltre, devi essere in grado di eseguire tutte le azioni anche utilizzando una tastiera, ad esempio inviando un modulo.
Testare con strumenti di verifica dell'accessibilità e validatori. Utilizzare strumenti che scansionano e verificano potenziali errori di accessibilità.
Contenuti dinamici. Notifica agli utenti di screen reader le modifiche dinamiche, ad esempio quando i risultati della ricerca sono cambiati.
Non fare affidamento sui colori per descrivere il significato. Usa il colore insieme alla descrizione, ad es. avviso [riquadro giallo].
Non rimuovere il contorno a fuoco. Questa è una funzionalità comunemente rimossa utilizzando il outline: 0; Non farlo, poiché gli utenti della tastiera perderanno l'orientamento sulla pagina. Potresti prendere in considerazione la rimozione del contorno dello stato attivo per gli utenti che non utilizzano la tastiera, ma fornisci sempre un contorno dello stato attivo per gli utenti della tastiera.
Messaggio di errore. Indicare sempre all'utente come correggere un errore. Non limitarti a dichiarare che i dati non sono validi.
Ordine delle schede. Assicurarsi che la navigazione basata su schede segua le convenzioni stabilite nell'interfaccia utente grafica. Come minimo, dovrebbe seguire la direzione di lettura della lingua predefinita dell'applicazione. In inglese, ad esempio, l'ordine di lettura è dall'alto verso il basso, da sinistra a destra; in arabo è dall'alto verso il basso, da destra a sinistra.
Ingrandisci. Assicurati che il contenuto della pagina sia ancora leggibile mentre ingrandisci il testo fino al 200%.
Disattiva le immagini. Riesci ancora a utilizzare la pagina in modo comodo? Esistono testi alternativi per tutte le immagini?
Lettore di schermo. Verifica se riesci a leggere e navigare nel contenuto utilizzando almeno un'utilità per la lettura dello schermo, ad esempio VoiceOver, Assistente vocale di Windows o NVDA.
Modalità ad alto contrasto. Verifica se il contenuto è ancora leggibile mentre passi alla modalità ad alto contrasto.
Dimensione del font. Assicurati che la dimensione del carattere sulla pagina non sia inferiore a 10px.

4. Errori comuni nell'accessibilità al Web

L'errore più comune è non riuscire a identificare i requisiti di accessibilità prima dello sviluppo . Sfortunatamente, più tardi l'accessibilità farà parte dello sviluppo, più difficile sarà implementare le soluzioni.

Ecco un elenco con alcuni degli errori più comuni commessi dagli sviluppatori durante l'implementazione dell'accessibilità:

Nessuna possibilità di navigare nel contenuto utilizzando solo una tastiera .
Uso improprio della proprietà del contorno CSS. Nella maggior parte dei casi, outline: 0; viene utilizzato, il che significa che il contorno attorno a ciascun elemento utilizzabile non è più visibile. Non utilizzare outline: 0; o outline: 0 !important; . L'utente perderà la capacità di vedere l'elemento attualmente focalizzato durante la navigazione nel contenuto, a meno che non ci sia un'altra alternativa a questo, ad esempio, utilizzando la proprietà CSS del border .
Perdere il focus dall'elemento corrente, ad esempio, a causa di manipolazioni DOM o usando il metodo blur() . Questo accade spesso per le applicazioni a pagina singola.
Nessuna notifica per gli utenti dell'utilità per la lettura dello schermo che qualcosa è cambiato, ad esempio, il contenuto è stato scaricato utilizzando l'API XMLHttpRequest e sono state apportate nuove modifiche all'interfaccia utente, ma l'utente non è stato informato. Questo accade spesso con le applicazioni a pagina singola.
Selettore data inaccessibile. In molti casi vengono utilizzati selettori di date inaccessibili. Gli utenti non sono in grado di navigare tra le opzioni del calendario utilizzando la tastiera.
Utilizzo di estensioni che pretendono di risolvere automaticamente i problemi di accessibilità . Usali con attenzione e controlla i risultati. Il loro uso improprio può creare più problemi che soluzioni.
Aggiungendo all'elemento attributo tabindex con un numero di indice maggiore di 0. Lo scopo dell'utilizzo di tabindex con un indice maggiore di 0 è principalmente quello di "correggere" il percorso di navigazione. Tuttavia, considera piuttosto di cambiare la struttura HTML per ottenere il percorso naturale di navigazione. La manipolazione tramite tabindex può causare problemi di manutenzione e un percorso di navigazione imprevedibile.
Gerarchia di intestazione errata. Sfortunatamente, è ancora abbastanza spesso visto, ma la gerarchia dell'intestazione non è costruita correttamente, ad esempio <h1> , <h5> e <h2> . Gli utenti dell'utilità per la lettura dello schermo utilizzano le intestazioni per navigare tra le sezioni e la struttura impropria crea confusione poiché è difficile comprendere il contesto.
Manca il supporto ad alto contrasto. Ci sono persone che usano il loro software in modalità ad alto contrasto. Assicurati che i tuoi contenuti siano ancora percepibili.
Utilizzo di una soluzione CAPTCHA inaccessibile. Sfortunatamente, tutti i CAPTCHA a me conosciuti sono inaccessibili o molto difficili da usare.
Troppe animazioni e/o non interrompibili. La riproduzione automatica di video, pubblicità o caroselli di immagini è molto fonte di distrazione.
Grandi porzioni di testo. Testo condensato in un blocco unico molto grande, senza spazi, virgole o punti. Molto difficile da leggere. La suddivisione in blocchi più piccoli, più paragrafi e sottotitoli aiuta a organizzare meglio il contenuto del testo.
Problemi di zoom. Assicurati che il contenuto sia ancora leggibile e navigabile quando ingrandisci fino al 200%.
Affidarsi ai colori. Molto spesso lo stato di un elemento è contrassegnato solo da un colore, ad esempio uno stato di avviso è contrassegnato solo da un punto giallo; questo colore non è percepito allo stesso modo per le persone daltoniche.
Piccoli target cliccabili/toccabili. Le aree cliccabili/toccabili sono spesso troppo piccole. Ingrandirlo consente agli utenti di attivarli più facilmente.

Ma come posso migliorare l'accessibilità al Web?

Definire i problemi è una cosa. Ripararlo è un'altra cosa e molto spesso non è così facile come sembra. Questo perché le implementazioni dell'API di accessibilità non sono coerenti e talvolta dobbiamo trovare soluzioni alternative o addirittura accettare il fatto che qualcosa non funzionerà affatto quando stiamo cercando di risolvere il problema.

In termini di strumenti, non esiste un unico strumento in grado di controllare tutte le possibili combinazioni, ma come buon inizio, questi strumenti dovrebbero aiutare:

Servizio di convalida del markup W3C — Giusto per essere sicuri che il contenuto HTML non contenga errori. Se la struttura HTML presenta errori, l'output è imprevedibile e non può essere elaborato correttamente, soprattutto da diverse tecnologie assistive.
https://www.w3.org/WAI/ER/tools/ — Un elenco di programmi o servizi online che consentono di determinare se i contenuti Web soddisfano le linee guida sull'accessibilità.
E il mio strumento, ASLint https://www.aslint.org/, ti aiuta a trovare problemi di accessibilità.

Tieni sempre presente che nessuno strumento di accessibilità può sostituire il test manuale , in quanto non tutti gli scenari possono essere completamente o per nulla automatizzati, ad esempio verifica del rapporto di contrasto della luminanza su elementi con position: fixed; .

Concentrati sui problemi che bloccano l'utilizzo della tua applicazione, ad esempio, l'utente non è in grado di navigare nel menu utilizzando la tastiera.

Perché è importante rendere i contenuti accessibili

Tutti vogliono diffondere i propri contenuti il più ampiamente possibile. L'accessibilità aiuta in quell'area, a molti livelli, dal raggiungere un pubblico più ampio al miglioramento dell'esperienza utente per tutti gli utenti. Inoltre, l'accessibilità non riguarda solo ciò che tradizionalmente potresti considerare persone con disabilità. Che si tratti di un individuo che sta invecchiando e sta attraversando i cambiamenti fisici che lo accompagnano, qualcuno che fa jogging in una giornata di sole che ha bisogno di una regolazione automatica del contrasto sul proprio telefono, o un genitore con le mani piene di borse della spesa che vuole inviare un messaggio di testo a voce, accessibile la tecnologia è tecnologia che tutti gli utenti possono utilizzare di volta in volta.

Come bonus aggiuntivo, l'effetto positivo è che i contenuti accessibili che soddisfano pienamente gli standard WCAG 2.0 sono più facili da scansionare e comprendere dai motori di ricerca e questo può avere un effetto significativo sul posizionamento di un sito. Pertanto, il design accessibile può indirizzare traffico aggiuntivo al sito Web.

Infine, ecco alcune statistiche che devi considerare:

Più di un miliardo di persone in tutto il mondo sperimenta qualche tipo di disabilità.
Invecchiamento della popolazione. Tra il 2015 e il 2030, si prevede che il numero di persone anziane – di età pari o superiore a 60 anni – nel mondo aumenterà del 56%, da 901 milioni a oltre 1,4 miliardi.
Il design universale è fondamentale. Il design universale si riferisce a un ampio spettro di idee e pratiche per la produzione di servizi, prodotti e ambienti che sono intrinsecamente accessibili e utilizzabili da persone di tutte le abilità.
Tipi di disabilità: ci sono cinque grandi categorie di disabilità, tra cui visiva, mobilità, parola, cognizione e udito.

Tutti abbiamo bisogno di servizi di alta qualità. Consegniamo anche loro .