Visualizza ed esegui il debug dell'accessibilità del sito Web con Tota11y

Le tecnologie assistive sono la nuova norma per il web design. Una volta che il responsive design è diventato mainstream, è stato subito evidente per i progettisti che supportare più utenti è una necessità.

Ma c'è un sacco di lavoro da fare per l'accessibilità del web. Questo è un argomento enorme e non qualcosa che puoi raccogliere senza strumenti utili.

Tota11y è un toolkit gratuito per visualizzare i problemi di accessibilità del tuo sito web. Funziona correttamente nel browser in modo che tu possa caricare il toolkit, fare clic sul tuo sito (o su qualsiasi sito!) Per trovare consigli sull'accessibilità.

Funziona come una libreria JavaScript che può essere inserita in qualsiasi pagina. Potresti anche eseguilo manualmente su siti live tramite Chrome DevTools, ma questo non è sempre utile a meno che tu non stia lavorando sul sito di qualcun altro.

Tota11y aggiunge una piccola barra degli strumenti sulla tua pagina e funziona dinamicamente attraverso l'intero DOM. Ogni volta che si fai clic su un elemento otterrai una piccola scatola espandibile con dettagli relativi ai problemi di accessibilità.

Una cosa che mi piace davvero di Tota11y è la linguaggio chiaro utilizzato con ciascuna casella di callout. La maggior parte della documentazione WAI-ARIA sembra di leggere i codici fiscali. Ottimo per mettersi a dormire, non così grande per il debug di un sito web.

Con questa libreria, troverai problemi e soluzioni scritte in inglese semplice. Molto più facile da consumare e le soluzioni sono veloci.

Se visiti la pagina principale troverai una demo di Tota11y in esecuzione sul sito. È la piccola linguetta nera che si trova nell'angolo in basso a sinistra dello schermo. Basta fare clic su questo per una vista espansa che copre tutti gli elementi della pagina principale.

L'intera faccenda è aperta con la licenza MIT, quindi è davvero facile lavorare.

Puoi prendere una copia su GitHub e usarla per praticamente qualsiasi cosa. Tota11y ha anche un sacco di plugin che puoi estendere alla sceneggiatura principale. Questi aggiungere funzionalità per la verifica di problemi di accessibilità più dettagliati.

Se sei grande nei test di accessibilità, allora vorresti assolutamente una copia di questo script nella tua cassetta degli attrezzi.