Vizualizovať a ladiť prístupnosť webových stránok so službou Tota11y

Asistujúce technológie sú novou normou pre návrh webových stránok. Akonáhle reagovanie dizajnu šiel hlavným prúdom, bolo rýchlo zrejmé, že dizajnéri podporujú viac užívateľov je nevyhnutnosťou.

Ale je tu veľa práce na webovej dostupnosti. Toto je obrovská téma a nie niečo, čo môžete vyzdvihnúť bez použiteľných nástrojov.

Tota11y je a free toolkit pre vizualizáciu problémov s prístupnosťou vašich webových stránok. To funguje priamo v prehliadači, takže môžete jednoducho načítať súpravu nástrojov, kliknúť na svoje stránky (alebo akékoľvek stránky!), Aby ste našli odporúčania o dostupnosti.

Toto funguje ako knižnica JavaScript, ktorá môže byť pripojená k akejkoľvek stránke. Môžete tiež spustite ho ručne na živých stránkach cez Chrome DevTools, ale to nie je vždy užitočné, ak pracujete na niektorej inej stránke.

Tota11y pridá na vašu stránku malý panel nástrojov a dynamicky sa spúšťa v celom DOM. Kedykoľvek Kliknutím na prvok získate malé rozširujúce pole s podrobnosťami o problémoch s prístupom.

Jedna vec, ktorá sa mi celkom páči, je Tota11y jasný jazyk používané s každým okienkom popisu. Väčšina dokumentácie WAI-ARIA sa považuje za daňové kódy. Skvelé pre spánok, nie tak skvelé na ladenie webových stránok.

S touto knižnicou nájdete problémy a riešenia napísané v bežnej angličtine. Oveľa jednoduchšie konzumovať a riešenia sú rýchle.

Ak navštívite hlavnú stránku, nájdete demo na stránkach Tota11y. Je to malá čierna karta umiestnená v ľavom dolnom rohu obrazovky. Jednoducho kliknite na tlačidlo pre rozšírené zobrazenie pokrývajúce všetky prvky hlavnej stránky.

Celá vec sa otvára pod licenciou MIT, takže je veľmi jednoduché pracovať.

Môžete chytiť kópiu na GitHub a použiť ho na skoro všetko. Tota11y tiež prichádza s množstvom pluginov, ktoré môžete rozšíriť na hlavný scenár. Títo pridať funkčnosť pre kontrolu podrobnejších otázok týkajúcich sa dostupnosti.

Ak máte veľký dosah na testovanie dostupnosti, budete úplne potrebovať kópiu tohto skriptu vo vašom paneli s nástrojmi.