Share
Affrontare la sfida di creare un sito web accessibile o rendere accessibile un sito Web esistente può a volte essere un compito difficile. Può essere imbarazzante capire esattamente Come un utente con problemi di vista, ad esempio, potrebbe utilizzare un sito Web. Naturalmente, può essere difficile per noi essere felici che i nostri siti siano accessibili.
In questo post ti mostrerò che testare l'accessibilità non deve essere un compito difficile. Ti guiderò attraverso gli strumenti e i processi che utilizziamo in Envato per mantenere le nostre piattaforme utilizzabili con tutti i livelli di abilità e per garantire che l'accessibilità rimanga al primo posto quando forniamo nuove funzionalità.
Questo articolo fa parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di esercitazioni, articoli, corsi e ebook, per aiutarti a capire l'accessibilità web dall'inizio.
Google Lighthouse è uno degli strumenti più importanti che utilizziamo per giudicare la nostra accessibilità. Lighthouse è uno strumento per valutare fino a che punto un sito web soddisfa le migliori pratiche del settore, sia che si tratti di prestazioni, SEO o, nel nostro caso, accessibilità.
Lighthouse può essere eseguito tramite l'interfaccia online o tramite gli strumenti di sviluppo di Chrome. Un vantaggio significativo dell'utilizzo di Lighthouse è che ci consente di sapere esattamente su cosa fa affidamento su Google quando decide come accessibile essi credo che il nostro sito sia.
Per accedere a Lighthouse tramite gli strumenti di sviluppo di Chrome:
Running Lighthouse tramite gli strumenti di sviluppo di Chrome.Una volta eseguito, otteniamo una ripartizione di dove il nostro sito potrebbe essere migliorato per diventare più accessibile. Ad esempio, i risultati della pagina di ricerca ThemeForest hanno il seguente aspetto:
Risultati di Lighthouse per la pagina di ricerca ThemeForest.Lighthouse ci fornisce un elenco delle aree in cui si trova la nostra pagina non ritenuto accessibile, nonché un elenco di controlli manuali che possiamo eseguire per garantire che l'accessibilità sia la migliore possibile. Se un controllo particolare non ha senso, Lighthouse fornisce collegamenti in linea per saperne di più su ciò che dovrebbe essere fatto.
Da quanto sopra riportato posso vedere che dovremmo cercare di migliorare il nostro contrasto cromatico per soddisfare meglio le persone con problemi di vista. Posso anche vedere che dovrei essere in grado di scorrere la pagina in un modo che ha senso nel contesto, così come vari altri controlli.
Un altro fantastico strumento che utilizziamo in Envato è pa11y (che prende il nome dall'abbreviazione comunemente usata per l'accessibilità, "a11y". Pa11y ci consente di impostare un livello di accessibilità predefinito, Sezione 508, WCAG 2.0 A, AA o AAA, e testare una pagina web contro quelle specifiche.
Quando eseguito, pa11y ci fornisce un elenco delle specifiche di accessibilità che incontriamo e di quelle che ancora non conosciamo, nonché una raccomandazione su come ottenere la conformità a ciascuno standard. Il vantaggio di usare pa11y è che ci permette di essere assolutamente sicuri della conformità con le specifiche WCAG e di darci dei passi concreti per diventare più conformi.
pa11y pagina dei risultati.In Envato eseguiamo pa11y automaticamente prima che ogni nuova parte di codice venga distribuita alle nostre piattaforme usando pa11y-ci. Tuttavia, pa11y può anche essere eseguito utilizzando l'applicazione desktop Koa11y.
Interfaccia Koa11y.Un'area in cui eccelle gli strumenti per gli sviluppatori di Firefox sta nell'individuare l'accessibilità dei contenuti del nostro sito. Questo ci consente di capire come un lettore di schermo legge il nostro contenuto per un utente.
Per abilitare l'ispettore di accessibilità in Firefox:
Abilitazione del pannello di accessibilità negli strumenti di sviluppo di Firefox.Una volta abilitato, una scheda di accessibilità diventa disponibile per noi. Questo ci permette di vedere il nostro sito come uno screen reader che potrebbe leggerlo ad alta voce.
Firefox accessibility inspectorIl Aria-ruolo è elencato a sinistra, anche in questo caso sezione, collegamento o grafico. Non tutti gli elementi dovrebbero avere un nome, ma l'attributo è un buon modo per indicare qualcosa a un utente: possiamo includere un nome assicurandoci che il contenuto sia testuale, un'immagine alt tag, o un Aria-label l'attributo è presente. Possiamo anche passare il mouse sopra il ruolo e fare in modo che Firefox evidenzi l'elemento corrispondente nel markup.
La navigazione di questo albero è utile di per sé solo per capire come appare il nostro sito web senza che nulla ci distolga dal contenuto. È anche un ottimo modo per capire come una nuova funzionalità potrebbe apparire ai nostri utenti.
Un altro livello utile di controlli che usiamo durante la scrittura del codice viene eseguito tramite il linting del codice. Linting ci consente di essere avvisati automaticamente di pezzi di codice che sono garantiti come inaccessibili. Utilizziamo un sottoinsieme delle regole di linting di TypeScript di Microsoft per filtrare il nostro TypeScript. Usiamo anche il pacchetto eslint-plugin-jsx-a11y per filtrare il nostro JavaScript.
Un linter potrebbe avvertirmi, per esempio, che mi sono dimenticato di includere un alt tag sulla seguente immagine:
Un altro esempio potrebbe essere un avvertimento per l'inclusione di un elemento che potrebbe essere fonte di distrazione per coloro che utilizzano screen reader:
Linting fornisce un feedback immediato per consentirci di apportare rapidamente modifiche al fine di garantire che il prodotto finale sia il più accessibile possibile.
Utilizziamo un numero di estensioni del browser per avere un'idea migliore di come un utente potrebbe provare il nostro sito mentre lo creiamo, così possiamo apportare modifiche man mano che procediamo. Si tratta di un paio di estensioni di rilievo che abbiamo segnalato come particolarmente utili.
Spettro ti permette di vedere il tuo sito nello stesso modo in cui lo vedrebbero quelli con varie forme di daltonismo. Con questo possiamo vedere parti del nostro sito che possono avere scarso contrasto con lo sfondo, o link i cui stati attivi sono troppo simili ai loro stati passivi.
Home page ThemeForest vista da qualcuno con Achromatopsia.Sfondo scuro e testo chiaro consente di visualizzare il sito in modalità ad alto contrasto, una modalità spesso utilizzata da coloro che richiedono elevati livelli di accessibilità. Con questo possiamo vedere se parti del nostro sito sono troppo ingombre o troppo piccole per essere viste efficacemente in questa modalità.
La homepage di ThemeForest è stata visualizzata a colori inversi.Questo è disponibile solo per quelli con un Mac, ma va avanti nel modo di sperimentare un sito come un utente con ipovedenti. VoiceOver legge il testo selezionato a noi su comando. Ci vuole un po 'per abituarsi, ma una volta appreso è facile da usare. Sul Web, VoiceOver offre il miglior supporto per Safari, ma può essere utilizzato con l'intero sistema operativo Mac OSX.
Abilita VoiceOver con CMD + F5. Una volta abilitato, è possibile trovare alcune utili funzioni che è possibile attivare tramite:
Garantire che il tuo sito web sia accessibile è assolutamente utile. È spesso visto come un compito che è troppo difficile o che è stato lasciato troppo tardi per essere raggiunto. Nessuno di questi è vero, e certamente non è quello che abbiamo trovato in Envato. L'utilizzo di tecniche e strumenti come quelli descritti sopra risolve molti dei problemi e indovina il lavoro di costruzione di un sito web accessibile, dandoci la certezza che il prodotto finale sarà amichevole con tutti i nostri utenti.
Accentsconagua