Kompletny przewodnik po narzędziach ułatwień dostępu

Nauka tworzenia dostępnych stron internetowych może być trudnym zadaniem dla tych, którzy dopiero zaczynają wdrażać dostępne praktyki. Zebraliśmy szeroką gamę narzędzi ułatwień dostępu, od jednorazowych bookmarkletów po rozbudowane aplikacje, aby pomóc Ci rozpocząć tworzenie bardziej dostępnych witryn internetowych.

ARIA

Badanie WebAIM Million wykazało, że strony domowe z ARIA zawierają średnio o 41% więcej wykrywalnych błędów niż te bez ARIA. ARIA jest niezbędnym narzędziem do tworzenia złożonych aplikacji internetowych, ale specyfikacja jest ścisła i może być trudna do debugowania przez osoby, które nie korzystają regularnie z technologii wspomagających. Narzędzia mogą nam pomóc upewnić się, że poprawnie używamy ARIA i nie wprowadzamy więcej błędów do naszych aplikacji.

TPGi stworzyło bookmarklet WAI-ARIA, który skanuje Twoją stronę, aby upewnić się, że wszystkie elementy i przypisane im role oraz atrybuty ARIA są prawidłowe. Po aktywacji bookmarkletu strona zostanie przeskanowana pod kątem błędów i otworzy się nowa zakładka z wynikami. Wyniki obejmują całkowitą liczbę prawidłowych ról, wszelkie wykryte błędy ARIA oraz fragmenty kodu wskazujące, gdzie znaleziono błędy, dzięki czemu możesz łatwo debugować swoją stronę.

Jedna rzecz, która nie została wyraźnie przetestowana w powyższym bookmarkletie, to obecność zduplikowanych ról ARIA. Niektóre charakterystyczne role mają nazwy, które brzmią tak, jakby mogły odnosić się do kilku elementów, ale powinny być używane tylko raz na stronę, na przykład banner lub contentinfo . Adrian Roselli wymyślił prosty bookmarklet oparty na CSS, aby sprawdzić, czy któraś z tych ról ARIA nie została zduplikowana. Aktywacja bookmarkletu doda czerwony kontur do każdego obraźliwego elementu.

NerdeRegion to rozszerzenie Chrome, które rejestruje wszystkie dane wyjściowe z dowolnych regionów aria-live. Nie możesz zrozumieć, dlaczego czytnik ekranu ogłasza coś nieoczekiwanie? NerdeRegion umożliwia śledzenie ogłoszeń oznaczonych znacznikiem czasu i elementu źródłowego, z którego pochodzą, a wszystko to w panelu w DevTools. Ponieważ mogą występować błędy i niespójności w sposobie wyświetlania regionów aria-live w różnych czytnikach ekranu, NerdeRegion może być świetnym narzędziem do ustalenia, czy problem jest potencjalnie spowodowany przez Twój kod, czy przez kombinację urządzeń.

Automatyczne narzędzia testujące

Ta klasa narzędzi może być używana przez programistę lub testera do uruchamiania automatycznych testów na wyjściu kodu, wyłapując błędy, które mogą nie być oczywiste w kodzie źródłowym. Istnieje wiele wysokiej jakości płatnych usług i innych narzędzi poza wymienionymi tutaj, ale skupiliśmy się na narzędziach z kompleksowymi bezpłatnymi ofertami, aby zmniejszyć bariery wejścia. Wszystkie wymienione narzędzia można uruchamiać na stronach, które nie znajdują się w publicznym Internecie, co pozwala na łatwiejsze włączenie ich do procesu programistycznego. Należy pamiętać, że testowanie ułatwień dostępu jest skomplikowane i zawsze wymaga ręcznego testowania w celu zrozumienia pełnego kontekstu witryny, ale te zautomatyzowane narzędzia testowe mogą zapewnić solidny start.

Wiele narzędzi używa rdzenia siekiery pod maską, więc używanie kombinacji narzędzi może być zbędne. Ostatecznie wybór narzędzia zależy bardziej od preferowanego interfejsu użytkownika i stopnia kompleksowości wyników. Na przykład Lighthouse, narzędzie wbudowane w Google Chrome, wykorzystuje częściowy wybór reguł axe-core, więc jeśli uda Ci się uzyskać czysty skan za pomocą axe DevTools, nie powinieneś również uruchamiać skanowania Lighthouse.

Ax DevTools jest dostępny jako rozszerzenie Chrome lub rozszerzenie Firefox i pojawia się jako panel w narzędziach programistycznych. Możesz przetestować całą stronę lub tylko jej część, a wszystkie wykryte problemy są sortowane według wagi i dostarczane z fragmentami kodu ułatwiającymi debugowanie. Ax pozwala również wychwycić więcej błędów niż inne zautomatyzowane narzędzia dzięki funkcji inteligentnych testów wspomaganych. Inteligentne testy z asystą identyfikują obszary do przetestowania i podnoszą jak najwięcej ciężkich przedmiotów, zanim zadasz testerowi pytania w celu uzyskania wyniku. Ax umożliwia również zapisywanie i eksportowanie wyników, co jest przydatne do pracy nad naprawianiem błędów w ramach dłuższego i bardziej opartego na współpracy procesu rozwoju.

Accessibility Insights działa również na axe-core, ale ma kilka funkcji, które odróżniają go od axe DevTools. Może działać na różnych platformach, w tym Android, Windows lub jako rozszerzenie przeglądarki. Wszystkie wersje Accessibility Insights zawierają narzędzie przypominające inspektora do wyszukiwania informacji o poszczególnych elementach, a także sposób przeprowadzania automatycznych kontroli. Rozszerzenie internetowe zawiera również funkcję oceny, która łączy w sobie testy automatyczne, kierowane i ręczne, aby umożliwić wygenerowanie pełnego raportu.

WAVE by WebAIM jest integralną częścią mojego zestawu narzędzi. Dostępne w formie rozszerzenia, a także jako usługa testów masowych i API, uważam to narzędzie za najlepsze do sprawdzania mojej pracy w trakcie rozwoju ze względu na jego prostotę i szybkość. Wszystko jest ładowane jako panel z boku strony i możesz uzyskać całościowy widok błędów , przewijając stronę. Jeśli błąd jest wyświetlany w panelu bocznym, ale nie masz pewności, w którym miejscu w DOM się on znajduje, możesz wyłączyć style, aby zlokalizować go w znacznikach. Funkcja nagłówka i punktu orientacyjnego WAVE jest jedną z moich ulubionych rzeczy, ponieważ zapewnia poprawną semantykę moich dokumentów podczas tworzenia.

SiteImprove ma bezpłatne rozszerzenie do Chrome oprócz płatnych usług. Podobnie jak WAVE, uruchamiasz rozszerzenie na stronie i wyświetla ono błędy w panelu z boku strony, w tym filtry dla takich rzeczy, jak poziom zgodności, ważność i odpowiedzialność. Filtr istotności jest szczególnie przydatny, ponieważ testy automatyczne zawsze dają fałszywe alarmy.

Czy kiedykolwiek zastanawiałeś się nad zautomatyzowaniem testów dostępności kodu źródłowego za pomocą akcji GitHub? Bez względu na to, czy jeszcze nie zajęłeś się GitHub Actions, czy po prostu potrzebujesz trochę pomocy w skonfigurowaniu prawidłowego przepływu pracy, samouczek Adriana Bolonio jest dla Ciebie. Pokazuje krok po kroku, jak zautomatyzować testy dostępności za pomocą bibliotek takich jak axe, pa11y, Lighthouse i testy jednostkowe bezpośrednio w repozytorium GitHub.

Dowiesz się, jak skonfigurować repozytorium, aby akcje GitHub były wykonywane zaraz po utworzeniu lub zaktualizowaniu żądania ściągnięcia do gałęzi głównej. Jeśli którakolwiek z akcji GitHub znajdzie luki w ułatwieniach dostępu, żądanie ściągnięcia ulegnie awarii i wyłączy scalanie, dopóki nie zostaną rozwiązane znalezione błędy. Mały szczegół, który robi dużą różnicę.

Zabarwienie

Błędy tekstowe o niskim kontraście zostały wykryte na aż 86,4% stron głównych w zeszłym roku. Deweloperzy często mają ograniczoną kontrolę nad paletą kolorów, dlatego ważne jest, aby spróbować ustalić dostępną paletę kolorów na jak najwcześniejszym etapie procesu.

Gdy zaczynasz projektować paletę kolorów, pomocne może być dostępne w przeglądarce narzędzie do wybierania kolorów. Czy moje kolory są dostępne to narzędzie, które może pomóc w ustaleniu dostępnej palety kolorów. Tryb podstawowy oblicza współczynnik kontrastu między dowolnymi dwoma kolorami. Rozmiar czcionki i grubość czcionki w tekście mogą wpływać na współczynnik kontrastu wymagany w zależności od poziomu zgodności, a to narzędzie pomocnie określa wszystkie różne standardy, które spełnia. Zawiera również suwaki zakresu HSL, dzięki czemu można dostosowywać dowolne kolory, a wyniki są automatycznie aktualizowane podczas wprowadzania zmian. Tryb palety umożliwia porównanie ze sobą każdego koloru w palecie i wyświetla współczynnik kontrastu oraz spełnione standardy, co jest pomocne przy określaniu sposobu łączenia ze sobą różnych kolorów . Dokonywanie dowolnych regulacji kolorów aktualizuje również permalink, umożliwiając łatwe udostępnianie kombinacji kolorów zespołowi. Jeśli wolisz inny interfejs do wybierania kolorów, Atul Varma zbudował podobne narzędzie, które używa próbnika kolorów zamiast suwaków zakresu HSL.

Geenes próbuje zrobić to wszystko, budując pełne zakresy odcieni/odcieni dla każdej dodanej grupy kolorów, co pozwala na zaprojektowanie pełnego systemu kolorów zamiast ograniczonej palety. Oprócz zapewniania współczynników kontrastu, Geenes pozwala również zastosować paletę do różnych makiet i emulować różne formy ślepoty barw. Możesz wypróbować większość funkcji za darmo i odblokować wiele palet za pomocą darowizny.

Niektóre narzędzia mogą pomóc w rozwiązaniu określonych problemów związanych z dostępnością kolorów. Zwłaszcza przyciski mogą być trudne, ponieważ nie tylko musisz martwić się o kolor tekstu z kolorem tła, musisz również wziąć pod uwagę tło przycisku z tłem strony i kolor konturu fokusa z obydwoma tłami. Projekt ButtonBuddy Stephanie Eckles wyjaśnia te wymagania prostym językiem i pomaga wybrać kolory dla poszczególnych części.

Niektóre kombinacje kolorów mogą technicznie spełniać wymagania dotyczące kontrastu, gdy są oglądane przez osoby bez ślepoty barw, ale mogą stwarzać problemy dla określonych rodzajów ślepoty barw i słabego widzenia. Kto może używać stosuje filtr wizualny do emulacji różnych typów ślepoty barw , a następnie oblicza przybliżony współczynnik kontrastu kolorów.

Jeśli chcesz przetestować kombinacje kolorów w kontekście istniejącej witryny, Stark to rozszerzenie wyboru kolorów dla przeglądarki Chrome, które pozwala symulować pewne rodzaje ślepoty barw. Dodatkowo Anna Monus stworzyła pomocny spis narzędzi dla ślepoty barw, które są już wbudowane w Chrome. Chociaż ten rodzaj emulacji nigdy w pełni nie zastąpi testowania przez prawdziwych użytkowników, może pomóc nam w dokonywaniu lepszych początkowych wyborów.

Czasami jako programiści zaczynamy pracę nad projektem, w którym może być konieczne projektowanie na bieżąco i zaczynamy pisać kod bez pełnej, ustalonej wcześniej palety marek. Po rozpoczęciu prac rozwojowych może być nużące importowanie palet kolorów tam iz powrotem do narzędzi zewnętrznych. Istnieje wiele opcji sprawdzania kontrastu kolorów w środowisku kodu . Alex Clapperton opracował narzędzie CLI, w którym podajesz dwa kolory i wyświetla współczynnik kontrastu i standardy przechodzące bezpośrednio w terminalu. BBC opublikowała narzędzie do sprawdzania kontrastu kolorów JavaScript, które przyjmuje dwa kolory i określa, czy spełnia żądane standardy. Narzędzie takie jak to może znajdować się w bazie kodu z testami lub być zaimplementowane w bibliotece systemu projektowania, takiej jak Storybook, PatternLab i tak dalej.

A11y Color Tokens idzie o krok dalej i pozwala automatycznie generować uzupełniające się tokeny kolorów w CSS lub SASS. Podajesz kolor i żądany stosunek, aby wygenerować odcień lub odcień tego koloru, który spełnia wymagania. Jeśli chcesz szybko sprawdzić współczynnik kontrastu czegoś, przeglądarki Chrome i Firefox wyświetlają teraz również informacje o kontraście kolorów w odpowiednich selektorach kolorów narzędzi programistycznych. Jeśli żadne z tych narzędzi nie pasuje do Twoich upodobań, Stephanie Walter omówiła wiele innych opcji narzędzi związanych z kolorami w swoim poście na blogu na temat dostępności kolorów.

Zgodność

Tworzenie technologii wspomagających może często dodać kolejny poziom złożoności, jeśli chodzi o debugowanie. Ponieważ technologia wspomagająca jest zasadniczo kolejną warstwą interfejsu na górze przeglądarki, musimy teraz zająć się kombinacjami przeglądarki i technologii wspomagających. Błąd może występować w przeglądarce lub technologii pomocniczej lub może występować tylko w określonej kombinacji. Dobrym pomysłem jest posiadanie pod ręką tej listy programów do śledzenia błędów, gdy próbujesz naprawić konkretny problem. Niektóre z nich są publiczne, dzięki czemu możesz zobaczyć, czy inni doświadczyli błędu, który masz, ale inne oferują tylko możliwość zgłaszania błędów prywatnie.

Nie wszystkie przeglądarki i kombinacje czytników ekranu dobrze ze sobą współpracują, a nie wszystkie funkcje ułatwień dostępu są jednakowo obsługiwane we wszystkich przeglądarkach. Te narzędzia mogą pomóc Ci sprawdzić, czy występuje błąd na określonej kombinacji urządzeń. Ułatwienia dostępu HTML5 to lista nowszych funkcji HTML oraz informacja, czy domyślna implementacja przeglądarki jest obsługiwana . W podobnym duchu Accessibility Support udostępnia listę ról ARIA i ich obsługę w najpopularniejszych kombinacjach przeglądarki i czytnika ekranu.

Dostępność dokumentacji

Dostępność jest nadal przemyślana w wielu zespołach projektowych UX. Prosta, ale bardzo skuteczna strategia, która pomoże Ci przyjąć sposób myślenia o dostępności, została opracowana przez Elise Livingston i jej zespół w Qualtrics . Zaczęli dodawać dokumenty dotyczące ułatwień dostępu do wszystkich dokumentów projektowych przed przekazaniem ich inżynierom. Nie tylko w celu poprawy dostępności produktu, ale także w celu dostrzeżenia potencjalnych problemów z dostępnością na znacznie wcześniejszym etapie procesu projektowania.

Elise sugeruje zajęcie się dokumentacją ułatwień dostępu w dwóch krokach: najpierw zdefiniowanie zachowania klawiatury, a następnie określenie etykiet semantycznych, które mogą być zrozumiane przez technologię wspomagającą. Jeśli chcesz spróbować, Elise podsumowała w artykule wszystko, co musisz wiedzieć o tym podejściu. Świetna okazja, aby przemyśleć swój obecny proces.

Zarządzanie skupieniem

Zarządzanie skupieniem jest niezbędną, ale często trudną częścią udostępniania złożonych aplikacji. Musimy wziąć pod uwagę, że kolejność fokusu jest logiczna, że ​​fokus jest prawidłowo przesuwany na dowolnych komponentach niestandardowych i że każdy element, z którym można wchodzić w interakcje, ma wyraźny styl fokusu.

Ten bookmarklet firmy Level Access oznacza każdy element na stronie, na który można ustawić fokus, dzięki czemu można sprawdzić, czy kolejność fokusu jest zgodna z kolejnością czytania. Dla użytkowników Firefoksa, Inspektor ułatwień dostępu Firefoksa dodał tę funkcję od wersji 84.

W złożonych bazach kodu, w których różne komponenty lub kod stron trzecich mogą nieoczekiwanie się skupiać, ten mały fragment autorstwa Scotta Vinkle'a może pomóc Ci zobaczyć, na którym elemencie aktualnie się skupia. Jeśli zmagam się z przenoszeniem fokusa przez inne części mojej aplikacji, czasami lubię zastąpić console.log console.trace , aby dokładnie określić, która funkcja przenosi fokus.

Aby przetestować wszystkie style fokusów na stronie internetowej, możemy użyć skryptu Scotta O'Hary jako punktu wyjścia. Przechodzenie po każdym elemencie może po pewnym czasie stać się kłopotliwe, więc skrypt do obracania każdego elementu może pomóc nam w upewnieniu się, że nasze style skupienia wyglądają spójnie i działają w kontekście strony.

Ustawienie dodatniego tabindex, aby spróbować naprawić kolejność fokusów, jest powszechną wadą dostępności. Elementy, które mają dodatni tabindex, zmuszą przeglądarkę do przejścia do nich w pierwszej kolejności. Chociaż z technicznego punktu widzenia może to nie być błąd, często jest to nieoczekiwane i może powodować więcej problemów niż rozwiązuje. Bookmarklet Paula J. Adama tabindex umożliwia podświetlenie wszystkich elementów, które mają zastosowany atrybut tabindex.

Użyteczność układu

Kolejność czytania dokumentu może czasami nie być zsynchronizowana z tym, czego może oczekiwać przeglądający, jeśli układ zbyt mocno opiera się na właściwości porządku CSS Grid lub Flexbox. Adrian Roselli zakodował skryptozakładkę do śledzenia kolejności czytania, aby pomóc Ci upewnić się, że Twoja witryna spełnia znaczące wytyczne dotyczące sekwencji.

WCAG zawiera kryterium odstępów między tekstami, zgodnie z którym cała treść powinna nadal działać po zastosowaniu pewnych ustawień tekstu. Aby to przetestować, Steve Faulkner stworzył skryptozakładkę, która automatycznie stosuje wymagane ustawienia odstępów w tekście do całego tekstu na stronie. Unikanie takich rzeczy jak stałe wysokości i zezwalanie na przepełnienie nie tylko sprawia, że ​​Twoja witryna jest bardziej dostępna, ale zapewnia, że ​​wszelkie treści, które umieścisz w witrynie, nie zepsują układu, za co podziękują Ci redaktorzy treści.

Jared Smith utworzył bookmarklet, który zamienia kursor w pole o wymiarach 44 × 44 piksele, dzięki czemu możesz umieścić go nad kontrolkami, aby upewnić się, że spełniają one kryterium zalecanego rozmiaru docelowego .

Linters

Linters to klasa narzędzi, które wychwytują błędy poprzez skanowanie kodu źródłowego przed uruchomieniem lub zbudowaniem aplikacji. Używając linterów, możemy naprawić mniejsze błędy, zanim jeszcze uruchomimy lub zbudujemy kod, oszczędzając cenny czas kontroli jakości później.

Wielu programistów już zna i używa ESLint w pewnym zakresie. Zamiast uczyć się nowych narzędzi, możesz rozpocząć testowanie ułatwień dostępu, dołączając nową wtyczkę do istniejącego przepływu pracy. Eslint-plugin-jsx-a11y jest wtyczką ESLint dla elementów JSX, w której podczas pisania kodu będą wyświetlane wszelkie błędy. Scott Vinkle napisał pomocny przewodnik na temat konfiguracji.

Deque wyszedł z axem Linter, dostępnym jako aplikacja Github lub rozszerzenie VS Code. Ax Linter sprawdza pliki React, Vue, HTML i Markdown pod kątem podstawowych zasad bez żadnej konfiguracji, więc łatwo jest go uruchomić, chociaż możesz przekazać własne opcje. Jedną pomocną cechą jest to, że rozróżnia WCAG 2 i WCAG 2.1, co jest przydatne, jeśli próbujesz spełnić określony standard.

Narzut

Sieć ma być elastyczna. Jeśli masz uszkodzony znacznik, przeglądarka postara się naprawić każdy błąd. Może to jednak mieć niezamierzone skutki uboczne, zarówno z perspektywy stylizacji, jak i ułatwień dostępu. Przeprowadzenie wyników przez walidator HTML W3C może pomóc w wychwyceniu takich rzeczy, jak uszkodzone tagi, atrybuty stosowane do elementów, które nie powinny ich mieć, oraz inne błędy HTML. Deque stworzył bookmarklet W3C HTML Validator oparty na tym samym silniku, który pozwala sprawdzić znaczniki na lokalnym hoście lub stronach chronionych hasłem, do których zwykły walidator nie może dotrzeć.

Jeśli jesteś bardziej wzrokowcem, projekt a11y.css autorstwa Gaela Pouparda to arkusz stylów, który sprawdza możliwe zagrożenia w Twoich znacznikach. Dostępne zarówno w formacie rozszerzenia, jak i bookmarkletu, możesz dostosować język, a także poziom wyświetlanych porad. W podobnym duchu sa11y jest narzędziem, które można zainstalować jako bookmarklet lub zintegrować z bazą kodu. Sa11y jest specjalnie zaprojektowany do przeglądania zawartości CMS . Wyświetla wszelkie ostrzeżenia w języku nietechnicznym, aby redaktorzy treści mogli zrozumieć i wprowadzić niezbędne poprawki.

Poziom czytania

Dostępna witryna zaczyna się od dostępnej treści. Dostępność poznawcza była głównym celem trwającego projektu WCAG 3 i jest obecnie wymieniona w Kryterium sukcesu 3.1.5, które sugeruje, że autorzy dążą do tego, aby treść była zrozumiała dla poziomu czytania gimnazjum (7-9 klas).

Edytor Hemingwaya oblicza poziom czytania treści podczas ich pisania, dzięki czemu można je edytować i upewnić się, że są one łatwe do zrozumienia. Panel z boku zawiera sugestie, jak ulepszyć treść, aby była bardziej czytelna. Jeśli Twoja witryna została już opublikowana, Juicy Studio stworzyło narzędzie umożliwiające czytelność, w którym podajesz adres URL do udostępnionego formularza, a zawartość Twojej witryny jest analizowana i oceniana przy użyciu trzech różnych algorytmów poziomu odczytu. Istnieje również pomocne wyjaśnienie, na czym polega każdy z tych wyników. Jednak jednym z ograniczeń tego konkretnego narzędzia jest to, że bierze pod uwagę cały tekst renderowany na stronie, w tym elementy takie jak nawigacja i tekst stopki, które mogą zniekształcać wyniki.

Zestawy testowe i ciągła integracja

Wadą większości zautomatyzowanych narzędzi testowych jest to, że wymagają one uruchomienia ich w przeglądarce. Jeśli pracujesz nad jedną dużą bazą kodu, możesz włączyć testowanie ułatwień dostępu do istniejącego procesu testowania lub w ramach ciągłego przepływu integracji. Kiedy piszesz niestandardowe testy, masz świadomość swojej aplikacji, której nie mają zautomatyzowane narzędzia testowe, co pozwala na wykonywanie dostosowanych, kompleksowych testów w bardziej skalowalny sposób.

Po raz kolejny, axe-core pojawia się jako biblioteka open-source, która często stanowi podstawę większości tych narzędzi, więc to, czy narzędzie działa dla Ciebie, będzie prawdopodobnie oparte na tym, jak dobrze integruje się z Twoim kodem, a nie na jakichkolwiek różnicach w wynikach testów . Marcy Sutton opublikowała niezależny od frameworka przewodnik, jak rozpocząć pisanie automatycznych testów dostępności. Opisuje różnicę między testami jednostkowymi a testami integracyjnymi oraz dlaczego warto wybrać jeden z nich w różnych scenariuszach.

Jeśli masz już framework testowy, który Ci się podoba, istnieje duża szansa, że ​​istnieje już biblioteka, która zawiera w sobie axe-core . Na przykład Josh McClure napisał przewodnik, w którym używa siekiery cyprysowej, a Nick Colley stworzył wersję o smaku Jest w siekierze żartobliwej.

Pa11y to narzędzie, które zapewnia konfigurowalny interfejs do testowania, który jest również dostępny w wersji CI. Jego wiele opcji konfiguracyjnych pozwala rozwiązywać złożone problemy, które mogą pojawić się podczas testowania. Na przykład funkcja akcji umożliwia przekazanie szeregu akcji przed uruchomieniem testów i może być przydatna do testowania ekranów wymagających uwierzytelnienia przed uzyskaniem dostępu do strony.

Preferencje użytkownika

Istnieje wiele nowych zapytań o media, które pomagają wykryć system operacyjny użytkownika i preferencje przeglądarki. Obecnie programiści często wykrywają te ustawienia, aby ustawić domyślne ustawienia takie jak preferencje ruchu i tryb ciemny, ale może to również prowadzić do błędów, które są trudne do odtworzenia, jeśli nie masz tych samych ustawień.

Magica11y to zestaw funkcji, które pozwalają określić preferencje użytkowników. Wyślij stronę dokumentacji do nietechnicznych testerów lub włącz ją do swojej aplikacji, aby dokładniej odtworzyć środowiska użytkownika.

Zawijanie

Szacuje się, że automatyczne testy dostępności mogą wykryć tylko 30% wszystkich błędów dostępności. Nawet jeśli oprzyrządowanie wciąż się poprawia, nigdy nie zastąpi to włączania osób niepełnosprawnych w proces projektowania i rozwoju. Zrównoważony i całościowy proces dostępności może wymagać, aby cały zespół używał narzędzi do wychwycenia jak największej liczby tych błędów na wczesnym etapie procesu, zamiast pozostawiać to wszystko testerom i niepełnosprawnym użytkownikom, aby mogli później znaleźć i zgłosić te problemy.

Potrzebujesz jeszcze więcej narzędzi? Projekt A11y i Stark przygotowali listy dodatkowych narzędzi ułatwień dostępu zarówno dla programistów, jak i użytkowników! Możesz też pozostawić wszelkie sugestie w komentarzach poniżej, chcielibyśmy usłyszeć, jakie narzędzia stosujesz w swoim przepływie pracy.