Ta strona zawiera obszerne informacje o ułatwieniach dostępu w Narzędziach deweloperskich w Chrome. Usługa jest przeznaczona dla programistów, którzy:
- Mieć podstawową wiedzę na temat Narzędzi deweloperskich – na przykład wiedzieć, jak je otworzyć.
- Zapoznały się z zasadami i sprawdzonymi metodami dotyczącymi ułatwień dostępu.
Ten przewodnik pomoże Ci poznać wszystkie narzędzia dostępne w Narzędziach deweloperskich, które pomogą Ci sprawdzić dostępność strony.
Jeśli szukasz pomocy w poruszaniu się w Narzędziach deweloperskich za pomocą technologii wspomagającej osoby z niepełnosprawnością, takiej jak czytnik ekranu, przeczytaj artykuł o korzystaniu z Narzędzi deweloperskich w Chrome przy użyciu technologii wspomagających osoby z niepełnosprawnością.
Jeśli chcesz dowiedzieć się, jak tworzyć strony internetowe z ułatwieniami dostępu, przeczytaj artykuł Ułatwienia dostępu.
Omówienie ułatwień dostępu w Narzędziach deweloperskich w Chrome
Ta sekcja wyjaśnia, jak Narzędzia deweloperskie wpasowują się w Twój ogólny zestaw ułatwień dostępu.
Ustalając, czy strona jest dostępna, weź pod uwagę 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?
Narzędzia deweloperskie mogą zwykle pomóc w naprawieniu błędów związanych z pytaniem nr 2, ponieważ takie błędy łatwo wykryć i wykryć automatycznie. Pytanie 1 jest równie ważne, ale Narzędzia deweloperskie nie w tym pomagają. Jedynym sposobem na znalezienie błędów związanych z pytaniem nr 1 jest użycie strony za pomocą klawiatury lub czytnika ekranu. Więcej informacji na ten temat znajdziesz w artykule Jak sprawdzić ułatwienia dostępu.
Kontrola ułatwień dostępu strony
Ogólnie rzecz biorąc, korzystając z kontroli ułatwień dostępu w panelu Lighthouse, możesz ustalić, 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 sprawdzić stronę:
- Otwórz adres URL, który chcesz sprawdzić.
W Narzędziach deweloperskich kliknij kartę Lighthouse. W Narzędziach deweloperskich dostępne są różne opcje konfiguracji.
Jeśli chcesz symulować urządzenie mobilne, w polu Urządzenie wybierz Urządzenie mobilne. Ta opcja zmienia ciąg klienta użytkownika i zmienia rozmiar widocznego obszaru. Jeśli mobilna wersja strony wyświetla się inaczej niż wersja komputerowa, ta opcja może mieć istotny wpływ na wyniki kontroli.
W sekcji Lighthouse sprawdź, czy Ułatwienia dostępu są włączone. Wyłącz inne kategorie, jeśli chcesz wykluczyć je z raportu. Pozostaw je włączone, jeśli chcesz poznać inne sposoby poprawy jakości strony.
Sekcja Ograniczanie umożliwia ograniczanie wykorzystania sieci i CPU, co jest przydatne podczas analizy wydajności obciążenia. Ta opcja nie powinna mieć związku z wynikiem ułatwień dostępu, więc możesz korzystać z dowolnej opcji.
Pole wyboru Wyczyść pamięć wewnętrzną pozwala wyczyścić całą pamięć przed wczytaniem strony lub zachować miejsce po wczytaniu strony. Ta opcja prawdopodobnie nie ma związku z wynikiem ułatwień dostępu, więc możesz wybrać dowolny element.
Kliknij Wygeneruj raport. Po 10–30 sekundach Narzędzia deweloperskie wyświetlą raport. Raport zawiera różne wskazówki, jak poprawić dostępność strony.
Kliknij kontrolę, aby dowiedzieć się o niej więcej.
Kliknij Więcej informacji, aby wyświetlić dokumentację tej kontroli.
Zobacz też: rozszerzenie aXe
Zamiast panelu Lighthouse, który jest domyślnie dostępny w Chrome, możesz używać rozszerzenia aXe lub rozszerzenia Lighthouse. Zwykle zawierają te same informacje, ponieważ aXe jest podstawowym mechanizmem zasilającym panel Lighthouse. Rozszerzenie aXe ma inny interfejs i nieco inaczej opisuje audyty.
Jedną z zalet rozszerzenia aXe w stosunku do panelu kontroli jest to, że pozwala ono badać i wyróżniać wadliwe węzły.
Okienko Ułatwienia dostępu
W panelu Ułatwienia dostępu możesz wyświetlić drzewo ułatwień dostępu, atrybuty ARIA i obliczone właściwości dostępu węzłów DOM.
Aby otworzyć panel Ułatwienia dostępu:
- Kliknij kartę Elementy.
- W drzewie DOM wybierz element, który chcesz sprawdzić.
- Kliknij kartę Ułatwienia dostępu. Ta karta może być ukryta za przyciskiem Więcej kart
.
Wyświetlanie pozycji elementu w drzewie ułatwień dostępu
Drzewo ułatwień dostępu jest podzbiorem drzewa DOM. Zawiera tylko elementy z drzewa DOM, które są istotne i przydatne do wyświetlania zawartości strony przez czytnik ekranu.
Położenie elementu w drzewie ułatwień dostępu możesz sprawdzić w okienku ułatwień dostępu.
Ten widok umożliwia poznanie tylko 1 węzła i jego elementów nadrzędnych. Aby poznać całe drzewo ułatwień dostępu, wykonaj te czynności.
(Podgląd) Przeglądanie drzewa ułatwień dostępu na całej stronie
Widok drzewa ułatwień dostępu na całą stronę pozwala zapoznać się z całym drzewem i lepiej zrozumieć, w jaki sposób Twoje treści internetowe są narażone na działanie technologii wspomagających osoby z niepełnosprawnością.
Aby poznać drzewo ułatwień dostępu:
- Zaznacz
Włącz drzewo ułatwień dostępu na całej stronie. Na pasku działań u góry kliknij Załaduj ponownie Narzędzia deweloperskie.
W prawym górnym rogu panelu Elementy przełącz przycisk
Przełącz na widok drzewa ułatwień dostępu.
Przejrzyj drzewo ułatwień dostępu. Możesz rozwinąć węzły lub kliknąć, aby wyświetlić szczegóły w sekcji Przeliczone właściwości.
Wybierz węzeł i kliknij przycisk
Przełącz na widok drzewa DOM, aby przełączyć się z powrotem na drzewo DOM.Odpowiedni węzeł DOM jest teraz wybierany. To świetny sposób na zrozumienie mapowania między węzłem DOM a jego węzłem w drzewie ułatwień dostępu.
Wyświetlanie atrybutów ARIA elementu
Atrybuty ARIA zapewniają, że czytniki ekranu mają wszystkie informacje potrzebne do prawidłowego reprezentowania zawartości strony.
Atrybuty ARIA elementu możesz wyświetlić w okienku ułatwień dostępu.
Wyświetlanie źródłowej kolejności elementów na ekranie
Elementy na stronie nie zawsze wyświetlają się w takiej kolejności, w jakiej występują w źródle. Może to dezorientować użytkowników korzystających z technologii wspomagającej osoby z niepełnosprawnością w poruszaniu się po sieci.
Aby wyświetlić i debugować zamówienie źródłowe w witrynie:
- Sprawdź element na stronie.
- W sekcji Elementy > Ułatwienia dostępu > Przeglądarka zamówień źródłowych zaznacz
Pokaż kolejność źródeł.
W widocznym obszarze Narzędzia deweloperskie nadają zagnieżdżone elementy za pomocą obramowania i oznaczają je liczbami w kolejności źródłowej.
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żesz wyświetlić w sekcji Właściwości obliczeniowe w panelu Ułatwienia dostępu.
Wyświetl obliczone właściwości ułatwień dostępu elementu w okienku Ułatwienia dostępu.
Rozpoznawanie i rozwiązywanie problemów z tekstem o niskim kontraście
Narzędzia deweloperskie mogą automatycznie wykrywać problemy z niskim kontrastem i proponować lepsze kolory, aby je rozwiązać. Więcej informacji znajdziesz w artykule Zwiększanie czytelności witryny.