Visualisera och felsöka webbplatsens tillgänglighet med Tota11y

Hjälpteknik är den nya normen för webbdesign. När en design som följde med sig var vanligt var det snabbt uppenbart att designers som stöder fler användare är en nödvändighet.

Men det finns det mycket arbete att göra för webbåtkomst. Det här är ett stort ämne och inte något du kan hämta utan praktiska verktyg.

Tota11y är en gratis verktygslåda för att visualisera webbplatsens tillgänglighetsproblem. Det här fungerar direkt i webbläsaren så att du bara kan ladda upp verktygslådan, klicka på din webbplats (eller någon annan webbplats!) För att hitta rekommendationer om tillgänglighet.

Detta fungerar som ett JavaScript-bibliotek som kan anslutas till vilken sida som helst. Du kan också kör det manuellt på levande webbplatser via Chrome DevTools, men det är inte alltid användbart om du inte arbetar på någon annans webbplats.

Tota11y lägger till en liten verktygsfält på din sida och kör dynamiskt över hela DOM. Närhelst du Klicka på ett element som du får en liten expanderande låda med detaljer som täcker tillgänglighetsproblem.

En sak som jag verkligen gillar om Tota11y är klart språk används med varje callout box. De flesta av WAI-ARIA-dokumentationen känns som att läsa skattkoder. Bra för att du ska sova, inte så bra för att felsöka en webbplats.

Med det här biblioteket hittar du problem och lösningar skrivna i vanlig engelska. Så mycket lättare att konsumera och lösningarna är snabba.

Om du besöker huvudsidan hittar du en demonstration av Tota11y som körs på webbplatsen. Det är den lilla svarta fliken i nedre vänstra hörnet av skärmen. Klicka bara på det för en expanderad vy som täcker alla huvudsidelement.

Hela saken öppnas under MIT-licensen så det är väldigt lätt att arbeta med.

Du kan ta en kopia på GitHub och använda den för nästan allt. Tota11y kommer också med en massa plugins som du kan sträcka sig på huvudskriptet. Dessa lägg till funktionalitet för att kontrollera mer detaljerade tillgänglighetsproblem.

Om du är stor i tillgänglighetstestning så vill du absolut ha en kopia av det här skriptet i din verktygslåda.