Ta strona zawiera wyczerpujące informacje o funkcjach ułatwień dostępu w Narzędziach deweloperskich w Chrome. Jest on przeznaczony dla programistów stron internetowych, którzy:
- mieć podstawową wiedzę o Narzędziach deweloperskich, np. jak je otworzyć;
- znają zasady i sprawdzone metody dotyczące ułatwień dostępu;
Ten przewodnik ma pomóc Ci poznać wszystkie narzędzia dostępne w Narzędziach deweloperskich, które mogą Ci pomóc w sprawdzaniu dostępności strony.
Jeśli potrzebujesz pomocy w poruszaniu się po Narzędziach deweloperskich za pomocą technologii wspomagającej osoby z niepełnosprawnością, np. czytnika ekranu, zapoznaj się z artykułem Poruszanie się po Narzędziach deweloperskich w Chrome za pomocą technologii wspomagającej osoby z niepełnosprawnością.
Jeśli chcesz dowiedzieć się, jak tworzyć dostępne witryny, zapoznaj się z artykułem Ułatwienia dostępu.
Omówienie funkcji ułatwień dostępu w Narzędziach deweloperskich w Chrome
Z tej sekcji dowiesz się, jak Narzędzia deweloperskie pasują do Twojego ogólnego zestawu narzędzi ułatwień dostępu.
Aby określić, czy strona jest dostępna, musisz odpowiedzieć na 2 ogólne pytania:
- Czy mogę poruszać się po stronie za pomocą klawiatury lub czytnika ekranu?
- Czy elementy strony są prawidłowo oznaczone pod kątem czytników ekranu?
Ogólnie rzecz biorąc, Narzędzia deweloperskie mogą pomóc w rozwiązaniu problemów związanych z pytaniem 2, ponieważ błędy te można łatwo wykryć automatycznie. Pytanie 1 jest równie ważne, ale niestety Narzędzia deweloperskie nie mogą Ci w tym pomóc. Jedynym sposobem na znalezienie błędów związanych z pytaniem 1 jest samodzielne wypróbowanie strony za pomocą klawiatury lub czytnika ekranu. Więcej informacji znajdziesz w artykule Jak przeprowadzić przegląd ułatwień dostępu.
Sprawdzanie dostępności strony
Ogólnie rzecz biorąc, używaj testów ułatwień dostępu w panelu Lighthouse, aby sprawdzić, czy:
- Strona jest prawidłowo oznaczona pod kątem czytników ekranu.
- Elementy tekstowe na stronie mają wystarczający współczynnik kontrastu. Zobacz też Zwiększanie czytelności witryny.
Aby przeprowadzić audyt strony:
- Otwórz adres URL, który chcesz sprawdzić.
W Narzędziach deweloperskich kliknij panel Lighthouse. Narzędzia deweloperskie wyświetlają różne opcje konfiguracji.
W polu Urządzenie wybierz Urządzenie mobilne, jeśli chcesz symulować urządzenie mobilne. Ta opcja zmienia ciąg klienta użytkownika i rozmiar obszaru wyświetlania. Jeśli wersja mobilna strony wyświetla się inaczej niż wersja komputerowa, ta opcja może mieć znaczący wpływ na wyniki audytu.
W sekcji Lighthouse upewnij się, że opcja Ułatwienia dostępu jest włączona. Jeśli chcesz wykluczyć inne kategorie z raportu, wyłącz je. Jeśli chcesz poznać inne sposoby na poprawę jakości strony, pozostaw je włączone.
W sekcji Ograniczanie możesz ograniczyć przepustowość sieci i użycie procesora, co jest przydatne podczas analizowania wydajności ładowania. Ta opcja nie powinna mieć wpływu na wynik dostępności, więc możesz użyć dowolnej z nich.
Pole wyboru Wyczyść pamięć umożliwia wyczyszczenie całej pamięci przed załadowaniem strony lub zachowanie pamięci między załadowaniami stron. Ta opcja prawdopodobnie nie ma też wpływu na wynik dostępności, więc możesz użyć dowolnej z nich.
Kliknij Wygeneruj raport. Po 10–30 sekundach Narzędzia deweloperskie wyświetlą raport. Raport zawiera różne wskazówki dotyczące poprawy dostępności strony.
Kliknij audyt, aby dowiedzieć się o nim więcej.
Kliknij Więcej informacji, aby wyświetlić dokumentację tego audytu.
Zobacz też: rozszerzenie aXe
Zamiast panelu Lighthouse, który jest domyślnie dostępny w Chrome, możesz użyć rozszerzenia aXe lub rozszerzenia Lighthouse. Zwykle zawierają te same informacje, ponieważ aXe to silnik, na którym opiera się panel Lighthouse. Rozszerzenie aXe ma inny interfejs i nieco inaczej opisuje audyty.
Jedną z zalet rozszerzenia aXe w porównaniu z panelem Audyty jest to, że umożliwia ono sprawdzanie i wyróżnianie węzłów, w których wystąpił błąd.
Testowanie przeformatowania treści za pomocą paska narzędzi urządzenia
Kryterium Web Content Accessibility Guidelines (WCAG) reflow zaleca, aby treści internetowe pozostawały widoczne bez utraty informacji nawet wtedy, gdy rozmiar okna przeglądarki zostanie zmieniony lub zmieni się orientacja. Dzięki wyrównaniu treści do jednej kolumny użytkownicy korzystający z powiększonego tekstu mogą łatwiej czytać. Aby sprawdzić, jak treści dopasowują się do rozmiaru ekranu, dynamicznie zmień rozmiar widocznego obszaru za pomocą paska narzędzi urządzenia w panelu Lighthouse.
Aby zmienić rozmiar widocznego obszaru, przeciągnij uchwyty do wybranego rozmiaru. Konkretne wymiary, które należy przetestować, znajdziesz w kryterium powodzenia WCAG dotyczącym ponownego wlewania.
Karta Ułatwienia dostępu
Na karcie Ułatwienia dostępu możesz wyświetlić drzewo ułatwień dostępu, atrybuty ARIA i obliczone właściwości ułatwień dostępu węzłów DOM.
Aby otworzyć kartę Ułatwienia dostępu:
- Kliknij panel Elementy.
- W drzewie DOM wybierz element, który chcesz zbadać.
- Kliknij kartę Ułatwienia dostępu. Ta karta może być ukryta za przyciskiem Więcej kart keyboard_double_arrow_right .
Możesz przeciągnąć kartę Ułatwienia dostępu na początek, aby w przyszłości mieć do niej szybszy dostęp.
Wyświetlanie pozycji elementu w drzewie ułatwień dostępu
Drzewo ułatwień dostępu to podzbiór drzewa DOM. Zawiera tylko elementy z drzewa DOM, które są istotne i przydatne do wyświetlania zawartości strony w czytniku ekranu.
Aby sprawdzić położenie elementu w drzewie ułatwień dostępu na karcie Ułatwienia dostępu, włącz opcję Pokaż drzewo ułatwień dostępu.
Ten przełącznik zastępuje drzewo DOM w panelu Elementy drzewem ułatwień dostępu na całej stronie. To drzewo pomoże Ci lepiej zrozumieć, jak Twoje treści internetowe są udostępniane technologii wspomagającej osoby z niepełnosprawnością.
Aby przeglądać drzewo dostępności, możesz rozwijać i wybierać węzły, aby wyświetlać ich szczegóły w sekcji Obliczone właściwości.
W każdej chwili możesz wrócić do drzewa DOM. Odpowiedni węzeł DOM pozostaje zaznaczony. To świetny sposób na zrozumienie mapowania między węzłem DOM a węzłem drzewa ułatwień dostępu.
Wyświetlanie atrybutów ARIA elementu
Atrybuty ARIA zapewniają, że czytniki ekranu mają wszystkie informacje potrzebne do prawidłowego przedstawienia zawartości strony.
Wyświetl atrybuty ARIA elementu na karcie Ułatwienia dostępu.
Wyświetlanie kolejności elementów na ekranie
Elementy na stronie nie zawsze pojawiają się w kolejności, w jakiej występują w źródle. Może to wprowadzać w błąd użytkowników, którzy korzystają z technologii wspomagającej osoby z niepełnosprawnością do poruszania się po internecie.
Aby wyświetlić i debugować kolejność źródeł w swojej witrynie:
- Sprawdź element na stronie.
- W sekcji Elementy > Ułatwienia dostępu > Przeglądarka kolejności źródłowej zaznacz check_box Pokaż kolejność źródłową.
W obszarze widoku Narzędzia deweloperskie obrysowują zagnieżdżone elementy ramkami i oznaczają je numerami odpowiadającymi ich kolejności w kodzie źródłowym.
Wyświetlanie obliczonych właściwości ułatwień dostępu elementu
Niektóre właściwości ułatwień dostępu są obliczane dynamicznie przez przeglądarkę. Te właściwości można wyświetlić w sekcji Obliczone właściwości na karcie Ułatwienia dostępu.
Wyświetl obliczone właściwości ułatwień dostępu elementu na karcie Ułatwienia dostępu.
Karta Renderowanie
Na karcie Renderowanie możesz emulować niektóre funkcje multimedialne CSS bez ręcznego określania ich w kodzie lub środowisku testowym. Te funkcje multimedialne zmieniają wygląd strony internetowej w zależności od preferencji użytkownika dotyczących urządzenia. Aby przetestować dostępność wizualną strony, otwórz kartę Renderowanie i wypróbuj te opcje:
- Emuluj ślepotę barw, aby wyświetlić stronę z kilkoma różnymi symulowanymi wadami wzroku.
- Emuluj funkcję mediów CSS
prefers-color-scheme, aby zobaczyć, jak strona wygląda w trybie ciemnym lub jasnym. Wielu użytkowników uważa tryb ciemny za kwestię estetyki, ale tryb ciemny jako narzędzie ułatwiające dostęp pokazuje, że może on być przydatny również w innych sytuacjach. - Emuluj typ mediów CSS, aby zobaczyć stronę w stylu mediów do druku lub wyświetlania.
- Emuluj funkcję multimedialną CSS
forced-colors, aby zobaczyć, jak będzie wyglądać strona, jeśli agent użytkownika włączy tryb wymuszonych kolorów. - Emuluj funkcję mediów CSS
prefers-contrast, aby wyświetlić treści internetowe z wyższą, niższą lub określoną wartością kontrastu. - Emuluj funkcję mediów CSS
prefers-reduced-motion, aby wyświetlać treści internetowe z ograniczonym ruchem. Treści animowane mogą rozpraszać uwagę niektórych użytkowników lub powodować u nich nudności. Użyj tej opcji, aby zobaczyć, jak wygląda strona bez animacji i płynnego przewijania. - Emuluj funkcję multimedialną CSS
prefers-reduced-transparency, aby sprawdzić, jak będą wyglądać Twoje treści internetowe, jeśli użytkownik poprosi o ograniczenie efektów przezroczystych lub półprzezroczystych warstw używanych na urządzeniu.
Wykrywanie i naprawianie tekstu o niskim kontraście
Narzędzia deweloperskie mogą automatycznie wykrywać problemy z niskim kontrastem i sugerować lepsze kolory, które pomogą je rozwiązać. Więcej informacji znajdziesz w artykule Zwiększanie czytelności witryny.