Wizualizacja i debugowanie dostępności witryny za pomocą Tota11y

Technologie wspomagające to nowa norma projektowania stron internetowych. Gdy projekt responsywny wszedł do głównego nurtu, projektanci szybko zrozumieli, że wspieranie większej liczby użytkowników jest koniecznością.

Ale tutaj jest dużo pracy do wykonania w sieci. Jest to ogromny temat, a nie coś, co można odebrać bez poręcznych narzędzi.

Tota11y to darmowy zestaw narzędzi do wizualizacji problemów z dostępnością witryny. Działa to bezpośrednio w przeglądarce, dzięki czemu można po prostu załadować zestaw narzędzi, kliknąć wokół witryny (lub dowolnej witryny!), Aby znaleźć zalecenia dotyczące dostępności.

Działa to jako biblioteka JavaScript, którą można podłączyć do dowolnej strony. Ty też możesz uruchom go ręcznie na żywo przez narzędzia DevTools Chrome, ale nie zawsze jest to przydatne, chyba że pracujesz na stronie innej osoby.

Tota11y dodaje mały pasek narzędzi do strony i działa dynamicznie w całym DOM. Kiedykolwiek ty kliknij element otrzymasz małe rozwijane okno ze szczegółami dotyczącymi problemów z dostępnością.

Jedną z rzeczy, które naprawdę lubię w Tota11y, jest czysty język używane z każdym polem objaśnienia. Większość dokumentacji WAI-ARIA ma ochotę czytać kody podatkowe. Świetne do spania, nie tak świetne do debugowania strony internetowej.

Z tą biblioteką znajdziesz problemy i rozwiązania napisane po angielsku. O wiele łatwiej jest konsumować, a rozwiązania są szybkie.

Jeśli odwiedzisz stronę główną, znajdziesz na niej demo Tota11y. Jest to mała czarna zakładka znajdująca się w lewym dolnym rogu ekranu. Wystarczy kliknąć, aby wyświetlić rozszerzony widok obejmujący wszystkie główne elementy strony.

Całość jest otwierana na licencji MIT, więc jest naprawdę łatwa w obsłudze.

Możesz pobrać kopię na GitHub i używać jej praktycznie do wszystkiego. Tota11y jest również wyposażony w kilka wtyczek, które możesz rozszerzyć na główny skrypt. Te dodaj funkcjonalność do sprawdzania bardziej szczegółowych problemów z dostępnością.

Jeśli jesteś bardzo zainteresowany testami dostępności, to absolutnie chcesz mieć kopię tego skryptu w przyborniku.