Una guida completa agli strumenti di accessibilità

Imparare a creare siti Web accessibili può essere un compito arduo per coloro che stanno appena iniziando a implementare pratiche accessibili. Abbiamo messo insieme un'ampia gamma di strumenti di accessibilità, che vanno dai bookmarklet monouso alle applicazioni complete, per aiutarti a iniziare a creare siti Web più accessibili.

ARIA

Il sondaggio WebAIM Million ha rilevato che le home page con ARIA presente avevano in media il 41% in più di errori rilevabili rispetto a quelle senza ARIA. ARIA è uno strumento essenziale per la creazione di applicazioni web complesse, ma le specifiche sono rigorose e possono essere difficili da sottoporre a debug da coloro che non utilizzano regolarmente la tecnologia assistiva. Gli strumenti possono aiutarci a garantire che stiamo usando ARIA correttamente e non introduciamo più errori nelle nostre applicazioni.

TPGi ha creato un bookmarklet WAI-ARIA che scansiona la tua pagina per assicurarsi che tutti gli elementi, i ruoli e gli attributi ARIA assegnati siano validi. Dopo aver attivato il bookmarklet, la pagina viene scansionata per eventuali errori e verrà aperta una nuova scheda con i risultati. I risultati includono il numero totale di ruoli validi, eventuali errori ARIA rilevati e frammenti di codice di dove sono stati trovati eventuali errori in modo da poter eseguire facilmente il debug della pagina.

Una cosa non esplicitamente testata nel bookmarklet sopra è la presenza di ruoli ARIA duplicati. Alcuni ruoli chiave hanno nomi che sembrano essere applicabili a diversi elementi, ma dovrebbero essere usati solo una volta per pagina, come banner o contentinfo . Adrian Roselli ha ideato un semplice bookmarklet basato su CSS per verificare se qualcuno di questi ruoli ARIA è stato duplicato. L'attivazione del bookmarklet aggiungerà un contorno rosso a qualsiasi elemento offensivo.

NerdeRegion è un'estensione di Chrome che registra tutto l'output di qualsiasi regione aria-live. Non riesci a capire perché il tuo screen reader annuncia qualcosa di inaspettato? NerdeRegion ti consente di tenere traccia degli annunci con timestamp e dell'elemento sorgente da cui provengono, il tutto all'interno di un pannello in DevTools. Poiché possono esserci bug e incongruenze nel modo in cui le regioni aria-live vengono annunciate con diversi lettori di schermo, NerdeRegion può essere un ottimo strumento per capire se un problema è potenzialmente causato dal tuo codice o dalla combinazione di dispositivi.

Strumenti di test automatici

Questa classe di strumenti può essere utilizzata dallo sviluppatore o dal tester per eseguire test automatici sull'output del codice, rilevando errori che potrebbero non apparire evidenti nel codice sorgente. Esistono molti servizi a pagamento di alta qualità e altri strumenti oltre a quelli menzionati qui, ma ci siamo concentrati su strumenti con offerte gratuite complete al fine di ridurre le barriere all'ingresso. Tutti gli strumenti elencati possono essere eseguiti su pagine che non si trovano su Internet pubblico, consentendo loro di essere incorporati più facilmente in un flusso di sviluppo. È importante notare che i test di accessibilità sono complicati e richiedono sempre test manuali per comprendere l'intero contesto del sito, ma questi strumenti di test automatizzati possono darti un solido vantaggio.

Molti strumenti utilizzano axe-core sotto il cofano, quindi potrebbe essere ridondante utilizzare una combinazione di strumenti. In definitiva, il tipo di strumento che scegli riguarda maggiormente il tipo di interfaccia utente che preferisci e il livello di completezza dei risultati. Ad esempio, Lighthouse, lo strumento integrato in Google Chrome, utilizza una selezione parziale di regole axe-core, quindi se riesci a ottenere una scansione pulita con ax DevTools, non dovresti aver bisogno di eseguire anche una scansione di Lighthouse.

Ax DevTools è disponibile come estensione per Chrome o come estensione per Firefox e viene visualizzato come pannello negli strumenti di sviluppo. Puoi testare un'intera pagina o solo una parte di una pagina e tutti i problemi rilevati sono ordinati per gravità e sono dotati di frammenti di codice per semplificare il debug. Axe ti consente anche di rilevare più errori rispetto ad altri strumenti automatizzati con la sua funzione di test guidati intelligenti. I test guidati intelligenti identificano le aree da testare ed eseguono il maggior numero possibile di lavori pesanti, prima di porre domande al tester per generare un risultato. Axe consente inoltre di salvare ed esportare i risultati, utile per correggere gli errori nell'ambito di un processo di sviluppo più lungo e cooperativo.

Accessibility Insights funziona anche su axe-core, ma ha diverse funzionalità che lo differenziano da ax DevTools. Può essere eseguito su varie piattaforme, inclusi Android, Windows o come estensione del browser. Tutte le versioni di Accessibility Insights dispongono di uno strumento simile a un ispettore per cercare informazioni sui singoli elementi, nonché un modo per eseguire controlli automatici. L'estensione web contiene anche una funzione di valutazione, che ha una combinazione di test automatici, guidati e manuali per consentire di generare un rapporto completo.

WAVE di WebAIM è stata parte integrante del mio kit di strumenti. Disponibile in forma di estensione, nonché un servizio di test di massa e un'API, trovo questo strumento il migliore per controllare il mio lavoro mentre sviluppo grazie alla sua semplicità e velocità. Tutto viene caricato come un pannello sul lato della tua pagina e puoi ottenere una visione olistica degli errori scorrendo la pagina. Se viene visualizzato un errore nel pannello laterale ma non sei sicuro di dove si trovi nel DOM, puoi disattivare gli stili per individuarlo all'interno del markup. La funzione di intestazione e punto di riferimento di WAVE è una delle cose che preferisco in quanto garantisce che la semantica del mio documento sia corretta durante la creazione.

SiteImprove ha un'estensione Chrome gratuita oltre alle loro offerte di servizi a pagamento. Come WAVE, esegui l'estensione su una pagina ed elenca gli errori in un pannello a lato della pagina, inclusi i filtri per cose come il livello di conformità, la gravità e la responsabilità. Il filtro di gravità è particolarmente utile poiché i test automatici tendono sempre a produrre alcuni falsi positivi.

Hai mai pensato di automatizzare i test di accessibilità del tuo codice sorgente con GitHub Actions? Non importa se non sei ancora riuscito a girare la testa su GitHub Actions o hai solo bisogno di un po' di aiuto per impostare un flusso di lavoro adeguato, il tutorial di Adrian Bolonio è per te. Ti mostra passo dopo passo come automatizzare i tuoi test di accessibilità con librerie come axe, pa11y, Lighthouse e unit test direttamente nel tuo repository GitHub.

Imparerai come configurare il tuo repository in modo che le azioni GitHub vengano eseguite non appena crei o aggiorni una richiesta pull al ramo principale. Se una qualsiasi delle azioni GitHub rileva vulnerabilità di accessibilità, la richiesta pull si arresterà in modo anomalo e disabiliterà l'unione finché non avrai risolto gli errori rilevati. Un piccolo dettaglio che fa una grande differenza.

Colori

L'anno scorso sono stati trovati errori di testo a basso contrasto su un enorme 86,4% delle home page. Gli sviluppatori hanno spesso un controllo limitato su una tavolozza di colori, quindi è importante cercare di stabilire una tavolozza di colori accessibile il prima possibile nel processo.

Quando inizi a progettare una tavolozza di colori, può essere utile uno strumento di selezione dei colori nel browser. Are My Colors Accessible è uno strumento che può aiutarti a capire una tavolozza di colori accessibile. La modalità base calcola il rapporto di contrasto tra due colori qualsiasi. La dimensione del carattere e il peso del carattere del testo possono influire sul rapporto di contrasto richiesto in base al livello di conformità e questo strumento illustra in modo utile tutti i diversi standard che soddisfa. Dispone inoltre di cursori della gamma HSL in modo da poter modificare qualsiasi colore, con i risultati che si aggiornano automaticamente man mano che si effettuano le regolazioni. La modalità tavolozza ti consente di confrontare ogni colore in una tavolozza l'uno con l'altro e mostra il rapporto di contrasto e gli standard soddisfatti, il che è utile per determinare come combinare insieme colori diversi . Apportare qualsiasi regolazione del colore aggiorna anche il permalink, consentendoti di condividere facilmente le combinazioni di colori con il tuo team. Se preferisci un'interfaccia diversa per la selezione dei colori, Atul Varma ha creato uno strumento simile che utilizza un selettore di colori invece dei cursori della gamma HSL.

Geenes tenta di fare tutto costruendo gamme di tinte/sfumature complete per ogni gruppo di colori che aggiungi, permettendoti di progettare un sistema a colori invece di una tavolozza limitata. Oltre a fornire rapporti di contrasto, Geenes ti consente anche di applicare la tua tavolozza a vari modelli ed emulare diverse forme di daltonismo. Puoi provare la maggior parte delle funzionalità gratuitamente e sbloccare più tavolozze con una donazione.

Alcuni strumenti possono aiutarti a risolvere specifici problemi di accessibilità relativi al colore. I pulsanti in particolare possono essere complicati, poiché non solo devi preoccuparti del colore del testo con il colore di sfondo, ma devi anche considerare lo sfondo del pulsante con lo sfondo della pagina e il colore del contorno della messa a fuoco con entrambi gli sfondi. Il progetto ButtonBuddy di Stephanie Eckles spiega questi requisiti in un linguaggio semplice e ti aiuta a scegliere i colori per queste singole parti.

Alcune combinazioni di colori possono tecnicamente soddisfare i requisiti di contrasto se viste da persone senza daltonismo, ma potrebbero porre problemi a specifici tipi di daltonismo e ipovisione. Chi può utilizzare applica un filtro visivo per emulare diversi tipi di daltonismo e quindi calcola un rapporto di contrasto del colore approssimativo.

Se desideri testare le tue combinazioni di colori nel contesto di un sito esistente, Stark è un'estensione per la selezione dei colori per Chrome che ti consente di simulare determinati tipi di daltonismo. Inoltre, Anna Monus ha creato un utile resoconto degli strumenti per il daltonismo già integrati in Chrome. Sebbene questo tipo di emulazione non possa mai sostituire completamente i test con utenti reali, può aiutarci a fare scelte iniziali migliori.

A volte, come sviluppatori, iniziamo a lavorare su un progetto in cui potrebbe essere necessario progettare mentre procediamo e iniziamo a scrivere codice senza una tavolozza del marchio completa e prestabilita. Una volta avviato lo sviluppo, può essere noioso continuare a importare le tavolozze dei colori avanti e indietro negli strumenti esterni. Ci sono molte opzioni per controllare il contrasto del colore all'interno di un ambiente di codice . Alex Clapperton ha sviluppato uno strumento CLI in cui si passa in due colori e restituisce il rapporto di contrasto e gli standard di passaggio direttamente nel terminale. La BBC ha pubblicato un controllo del contrasto del colore JavaScript che prende due colori e determina se soddisfa o meno lo standard desiderato. Uno strumento come questo può risiedere nella tua base di codice con i tuoi test o essere implementato nella libreria del tuo sistema di progettazione come Storybook, PatternLab e così via.

A11y Color Tokens fa un ulteriore passo avanti e ti consente di generare automaticamente token di colore complementari in CSS o SASS. Si passa un colore e il rapporto desiderato per generare una sfumatura o una tinta di quel colore che soddisfi i requisiti. Se è necessario controllare rapidamente il rapporto di contrasto di qualcosa, Chrome e Firefox ora mostrano le informazioni sul contrasto del colore anche nei rispettivi selettori di colore degli strumenti di sviluppo. Se nessuno di questi strumenti soddisfa la tua fantasia, Stephanie Walter ha trattato molte altre opzioni di strumenti relativi al colore nel suo post sul blog sull'accessibilità del colore.

Compatibilità

La creazione di tecnologie assistive può spesso aggiungere un altro livello di complessità quando si tratta di debug. Poiché la tecnologia assistiva è essenzialmente un altro livello di un'interfaccia sopra il browser, ora dobbiamo occuparci di combinazioni di browser e tecnologia assistiva. Un bug può essere presente nel browser o nella tecnologia assistiva, oppure può essere presente solo in una particolare combinazione. È una buona idea tenere a portata di mano questo elenco di bug tracker quando si tenta di risolvere un problema specifico. Alcuni di questi sono pubblici in modo che tu possa vedere se altri riscontrano il bug che stai riscontrando, ma altri offrono solo un mezzo per segnalare bug in privato.

Non tutte le combinazioni di browser e screen reader funzionano bene insieme e non tutte le funzionalità di accessibilità sono ugualmente supportate tra i browser. Questi strumenti possono aiutarti a verificare se stai riscontrando un bug su una specifica combinazione di dispositivi. HTML5 Accessibility è un elenco di funzionalità HTML più recenti e indica se l'implementazione predefinita del browser è supportata o meno in modo accessibile . Allo stesso modo, Accessibility Support fornisce un elenco di ruoli ARIA e il loro supporto nelle combinazioni di browser e screen reader più popolari.

Documentare l'accessibilità

L'accessibilità è ancora un ripensamento in molti team di progettazione UX. Una strategia semplice ma molto efficace per aiutarti ad adottare una mentalità di accessibilità viene da Elise Livingston e dal suo team di Qualtrics . Hanno iniziato ad aggiungere documenti di accessibilità a tutti i documenti di progettazione prima di consegnarli all'ingegneria. Non solo per migliorare l'accessibilità del prodotto, ma anche per vedere i potenziali problemi di accessibilità molto prima nel processo di progettazione.

Elise suggerisce di affrontare la documentazione sull'accessibilità in due passaggi: in primo luogo, definendo il comportamento della tastiera, quindi specificando etichette semantiche che possono essere comprese dalla tecnologia assistiva. Se vuoi fare un tentativo, Elise ha riassunto tutto ciò che devi sapere sull'approccio in un articolo. Una grande opportunità per ripensare al tuo attuale processo.

Gestione del focus

La gestione dell'attenzione è una parte necessaria ma spesso difficile per rendere accessibili applicazioni complesse. Dobbiamo considerare che l'ordine del focus è logico, che il focus viene spostato correttamente su qualsiasi componente personalizzato e che ogni elemento interagibile ha uno stile di focus chiaro.

Questo bookmarklet di Level Access etichetta ogni elemento attivabile sulla pagina, in modo che tu possa controllare che l'ordine del focus corrisponda all'ordine di lettura. Per gli utenti di Firefox là fuori, l'Ispettore di accessibilità di Firefox ha aggiunto questa funzione dalla versione 84.

In codebase complesse, in cui diversi componenti o codice di terze parti potrebbero spostare l'attenzione in modo imprevisto, questo piccolo frammento di Scott Vinkle può aiutarti a vedere quale elemento è attualmente attivo. Se sto lottando con il focus spostato da altre parti della mia applicazione, a volte mi piace anche sostituire console.log con console.trace per determinare esattamente quale funzione sta spostando il focus.

Per testare tutti gli stili di focus su una pagina web, possiamo usare lo script di Scott O'Hara come punto di partenza. Sfogliare ogni elemento può diventare complicato dopo un po', quindi uno script per ruotare ogni elemento può aiutarci a garantire che i nostri stili di messa a fuoco appaiano coerenti e funzionino nel contesto della pagina.

L'impostazione di un tabindex positivo per provare a correggere l'ordine di messa a fuoco è un problema comune sull'accessibilità. Gli elementi che hanno un tabindex positivo forzeranno il browser a visualizzarli prima. Anche se questo potrebbe non essere tecnicamente un errore, questo è spesso inaspettato e può causare più problemi di quanti ne risolva. Il bookmarklet tabindex di Paul J. Adam consente di evidenziare tutti gli elementi a cui è applicato l'attributo tabindex.

Usabilità del layout

L'ordine di lettura del documento a volte può non essere sincronizzato con ciò che un visualizzatore potrebbe aspettarsi se un layout si basa troppo sulla proprietà CSS Grid o Flexbox order. Adrian Roselli ha codificato un bookmarklet per tenere traccia dell'ordine di lettura per aiutarti ad assicurarti che il tuo sito superi le linee guida di sequenza significative.

Le WCAG contengono un criterio di spaziatura del testo in cui tutto il contenuto dovrebbe funzionare anche quando vengono applicate determinate impostazioni di testo. Per verificarlo, Steve Faulkner ha creato un bookmarklet che applica automaticamente le impostazioni di spaziatura del testo richieste a tutto il testo di una pagina. Evitare cose come altezze fisse e consentire l'overflow non solo rende il tuo sito più accessibile, ma garantisce che qualunque contenuto inserisci nel tuo sito non rompa il layout, qualcosa per cui i tuoi editori di contenuti ti ringrazieranno.

Jared Smith ha creato un bookmarklet per trasformare il cursore in una casella di 44 × 44 pixel in modo da poterlo posizionare sopra i controlli per assicurarti che soddisfino il criterio di dimensione target consigliato .

Linter

I linter sono una classe di strumenti che rilevano gli errori eseguendo la scansione del codice sorgente prima che l'applicazione venga eseguita o compilata. Utilizzando i linter, possiamo correggere bug più piccoli prima ancora di eseguire o creare il codice, risparmiando tempo prezioso per il QA in seguito.

Molti sviluppatori già conoscono e usano ESLint in qualche modo. Invece di apprendere nuovi strumenti, è possibile ottenere un vantaggio sui test di accessibilità includendo un nuovo plug-in nel flusso di lavoro esistente. Eslint-plugin-jsx-a11y è un plug-in ESLint per i tuoi elementi JSX, dove eventuali errori verranno mostrati mentre scrivi il tuo codice. Scott Vinkle ha scritto un'utile guida per configurarlo.

Deque è uscito con ax Linter, disponibile come app Github o VS Code Extension. Axe Linter controlla i file React, Vue, HTML e Markdown rispetto alle regole di base senza alcuna configurazione, quindi è facile da avviare e funzionare, anche se sei libero di passare le tue opzioni. Una caratteristica utile è che distingue tra WCAG 2 e WCAG 2.1 che è utile se stai cercando di soddisfare uno standard specifico.

Marcatura

Il web è costruito per essere resiliente. Se hai interrotto il markup, il browser farà del suo meglio per correggere qualsiasi errore. Tuttavia, questo può avere effetti collaterali indesiderati, sia dal punto di vista dello stile che dal punto di vista dell'accessibilità. L'esecuzione dell'output tramite il validatore HTML W3C può aiutare a rilevare elementi come tag rotti, attributi applicati a elementi che non dovrebbero averli e altri errori HTML. Deque ha creato un bookmarklet W3C HTML Validator basato sullo stesso motore che consente di controllare il markup su localhost o pagine protette da password che il normale validatore non può raggiungere.

Se sei più una persona visiva, il progetto a11y.css di Gael Poupard è un foglio di stile che verifica i possibili rischi all'interno del tuo markup. Disponibile sia in formato estensione che bookmarklet, puoi personalizzare la lingua e il livello di avviso visualizzato. Allo stesso modo, sa11y è uno strumento che può essere installato come bookmarklet o integrato nella tua codebase. Sa11y è specificamente progettato per esaminare l' output del contenuto CMS . Visualizza tutti gli avvisi in un linguaggio non tecnico in modo che gli editor di contenuti possano comprendere e apportare le correzioni necessarie.

Livello di lettura

Un sito accessibile inizia con un contenuto accessibile. L'accessibilità cognitiva è stata uno degli obiettivi principali della bozza delle WCAG 3 in corso ed è attualmente menzionata nel Criterio di successo 3.1.5, che suggerisce che gli autori mirano a rendere comprensibili i contenuti da un livello di lettura della scuola secondaria inferiore (7-9a elementare).

L'editor di Hemingway calcola il livello di lettura del tuo contenuto mentre lo scrivi, in modo che tu possa modificarlo per assicurarti che sia facilmente comprensibile. Il pannello a lato offre suggerimenti su come migliorare i tuoi contenuti per renderli più leggibili. Se il tuo sito è già stato pubblicato, Juicy Studio ha prodotto uno strumento di leggibilità in cui passi un URL al modulo fornito e il contenuto del tuo sito viene analizzato e classificato utilizzando tre diversi algoritmi di livello di lettura. C'è anche una spiegazione utile su cosa comporta ciascuno di questi punteggi. Tuttavia, una limitazione di questo particolare strumento è che tiene conto di tutto il testo visualizzato nella pagina, inclusi elementi come la navigazione e il testo del piè di pagina, che potrebbero distorcere i risultati.

Suite di test e integrazione continua

Lo svantaggio della maggior parte degli strumenti di test automatizzati è che richiedono alle persone di eseguirli nel browser. Se stai lavorando su un'unica grande base di codice, puoi incorporare i test di accessibilità nel tuo processo di test esistente o come parte del tuo flusso di integrazione continua. Quando scrivi test personalizzati, hai una consapevolezza della tua applicazione che gli strumenti di test automatizzati non hanno, consentendoti di eseguire test personalizzati e completi in un modo più scalabile.

Ancora una volta, axe-core si presenta come una libreria open source che è spesso alla base della maggior parte di questi strumenti, quindi se uno strumento funziona o meno per te sarà probabilmente basato su quanto bene si integra con il tuo codice piuttosto che su eventuali differenze nei risultati dei test . Marcy Sutton ha pubblicato una guida indipendente dal framework per iniziare a scrivere test automatizzati per l'accessibilità. Copre la differenza tra unit test e test di integrazione e perché potresti voler scegliere l'uno rispetto all'altro in diversi scenari.

Se hai già un framework di test che ti piace, c'è un'alta probabilità che esista già una libreria che incorpori axe-core al suo interno. Ad esempio, Josh McClure ha scritto una guida che utilizza l'ascia di cipresso e Nick Colley ha prodotto una versione al gusto di Jest in jest-axe.

Pa11y è uno strumento che fornisce un'interfaccia configurabile per il test, disponibile anche in una versione CI. Le sue numerose opzioni di configurazione possono consentirti di risolvere problemi complessi che possono sorgere con i test. Ad esempio, la funzionalità delle azioni consente di passare una serie di azioni prima di eseguire i test e può essere utile per testare schermate che richiedono l'autenticazione prima di accedere alla pagina.

Preferenze utente

Ci sono molte nuove media query per aiutare a rilevare il sistema operativo dell'utente e le preferenze del browser. Al giorno d'oggi, gli sviluppatori rilevano spesso queste impostazioni per impostare l'impostazione predefinita per cose come le preferenze di movimento e la modalità oscura, ma questo può anche portare a bug difficili da riprodurre se non si hanno le stesse impostazioni.

Magica11y è un insieme di funzioni che ti permette di determinare le preferenze dei tuoi utenti. Invia la pagina della documentazione a tester non tecnici o incorporali nella tua app in modo da poter riprodurre gli ambienti dei tuoi utenti in modo più accurato.

Avvolgendo

Si stima che i test di accessibilità automatizzati possano rilevare solo il 30% di tutti gli errori di accessibilità. Anche se gli strumenti continuano a migliorare, non sostituiranno mai l'inclusione delle persone disabili nel processo di progettazione e sviluppo. Un processo di accessibilità sostenibile e olistico potrebbe implicare che l'intero team utilizzi strumenti per rilevare il maggior numero possibile di questi errori all'inizio del processo, invece di lasciare tutto ai tester e agli utenti disabili per trovare e segnalare questi problemi in un secondo momento.

Hai bisogno di ancora più strumenti? Il progetto A11y e Stark hanno curato elenchi di strumenti di accessibilità aggiuntivi sia per gli sviluppatori che per gli utenti! Oppure sentiti libero di lasciare qualsiasi suggerimento nei commenti qui sotto, ci piacerebbe sapere quali strumenti incorpori nel tuo flusso di lavoro.