Hjemmeside » Toolkit » Visualiser og feilsøk websidenes tilgjengelighet med Tota11y

    Visualiser og feilsøk websidenes tilgjengelighet med Tota11y

    Hjelpemidler er den nye normen for webdesign. Når responsiv design gikk vanlig, var det raskt åpenbart at designere som støtter flere brukere er en nødvendighet.

    Men det er det mye arbeid å gjøre for webtilgjengelighet. Dette er et stort emne og ikke noe du kan plukke opp uten hendige verktøy.

    Tota11y er en gratis verktøy for å visualisere nettstedets tilgjengelighetsproblemer. Dette fungerer rett i nettleseren, slik at du bare kan laste opp verktøyet, klikke rundt nettstedet ditt (eller et hvilket som helst nettsted!) For å finne tilgjengelighetsanbefalinger.

    Dette fungerer som et JavaScript-bibliotek som kan kobles til en hvilken som helst side. Du kan også Kjør det manuelt på levende nettsteder via Chrome DevTools, men det er ikke alltid nyttig med mindre du jobber på andres nettsted.

    Tota11y legger til en liten verktøylinje på siden din og kjører dynamisk over hele DOM. Når du klikk på et element du får en liten utvidelsesboks med detaljer som dekker tilgjengelighetsproblemer.

    En ting jeg virkelig liker om Tota11y er klart språk brukes med hver callout boks. De fleste av WAI-ARIA-dokumentasjonen føles som å lese skattekoder. Flott for å sette deg i dvale, ikke så bra for feilsøking av et nettsted.

    Med dette biblioteket finner du problemer og løsninger skrevet på vanlig engelsk. Så mye lettere å konsumere og løsningene er raske.

    Hvis du besøker hovedsiden finner du en demonstrasjon av Tota11y som kjører på nettstedet. Det er den lille svarte tappen som ligger nederst til venstre på skjermen. Bare klikk det for en utvidet visning som dekker alle hovedelementene.

    Hele saken er åpnet under MIT-lisensen, så det er veldig enkelt å jobbe med.

    Du kan ta en kopi på GitHub og bruke den til stort sett alt. Tota11y kommer også med en gjeng med plugins du kan strekke seg til hovedskriptet. Disse Legg til funksjonalitet for å sjekke mer detaljerte tilgjengelighetsproblemer.

    Hvis du er stor i tilgjengelighetstesting, vil du absolutt ønske en kopi av dette skriptet i verktøykassen.