Visualiser og fejlfind websiteets tilgængelighed med Tota11y

Hjælpemidler er den nye norm for webdesign. Når responsivt design gik i gang, var det hurtigt indlysende for designere, der støtter flere brugere, er en nødvendighed.

Men der er en masse arbejde at gøre for webtilgængelighed. Dette er et stort emne og ikke noget du kan samle op uden brugbare værktøjer.

Tota11y er en gratis værktøjskasse til visualisering af dit websites tilgængelighedsproblemer. Dette fungerer lige i browseren, så du kan bare lægge værktøjet op, klikke rundt på dit websted (eller et hvilket som helst websted!) For at finde tilgængelighedshenstillinger.

Dette fungerer som et JavaScript-bibliotek, der kan tilsluttes til en hvilken som helst side. Du kunne også Kør det manuelt på levende websteder via Chrome DevTools, men det er ikke altid nyttigt, medmindre du arbejder på andres websted.

Tota11y tilføjer en lille værktøjslinje til din side og kører dynamisk på tværs af hele DOM. Når du Klik på et element, du får en lille udvidelsesboks med detaljer om tilgængelighedsproblemer.

En ting jeg virkelig kan lide om Tota11y er klart sprog bruges med hver callout boks. De fleste af WAI-ARIA-dokumentationen føles som at læse skattekoder. Fantastisk til at sætte dig selv i søvn, ikke så stor til debugging af et websted.

Med dette bibliotek finder du problemer og løsninger skrevet på almindeligt engelsk. Så meget lettere at forbruge, og løsningerne er hurtige.

Hvis du besøger hovedsiden, finder du en demo af Tota11y, der kører på webstedet. Det er den lille sorte fane i nederste venstre hjørne af skærmen. Bare klik på det for et udvidet billede, der dækker alle hovedsideselementerne.

Det hele er åbnet under MIT-licensen, så det er virkelig nemt at arbejde med.

Du kan tage en kopi på GitHub og bruge den til stort set alt. Tota11y leveres også med en flok plugins, du kan udvide til hovedskriptet. Disse Tilføj funktionalitet til at kontrollere mere detaljerede tilgængelighedsproblemer.

Hvis du er stor til tilgængelighedstest, så vil du absolut have en kopi af dette script i din værktøjskasse.