Na tej stronie znajdziesz obszerne informacje o ułatwieniach dostępu w Narzędziach deweloperskich w Chrome. Jest przeznaczona dla programistów stron internetowych, którzy:
- Zapoznanie się z podstawowymi informacjami o Narzędziach deweloperskich, np. o tym, jak je otworzyć.
- Znasz zasady i sprawdzone metody dotyczące ułatwień dostępu.
Ten artykuł ma pomóc Ci poznać wszystkie narzędzia dostępne w Narzędziach deweloperskich, które pomogą Ci sprawdzić dostępność strony.
Jeśli potrzebujesz pomocy w poruszaniu się po narzędziach deweloperskich w Narzędziach deweloperskich przy użyciu technologii wspomagającej osoby z niepełnosprawnością, np. czytnika ekranu, przeczytaj artykuł Poruszanie się po narzędziach deweloperskich w Chrome z wykorzystaniem technologii wspomagających osoby z niepełnosprawnością.
Jeśli chcesz się dowiedzieć, jak tworzyć strony z ułatwieniami dostępu, zobacz Informacje o ułatwieniach dostępu.
Omówienie funkcji ułatwień dostępu w Narzędziach deweloperskich w Chrome
W tej sekcji wyjaśniamy, jak Narzędzia deweloperskie wpisują się w Twoje ogólne narzędzia ułatwień dostępu.
Aby określić, czy strona jest dostępna, warto pamiętać o 2 ogólnych kwestiach:
- 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 zwykle pomagają w naprawianiu błędów związanych z pytaniem 2, ponieważ łatwo jest wykryć je automatycznie. Pytanie 1 jest równie ważne, ale Narzędzia deweloperskie nie mogą Ci w tym pomóc. Jedynym sposobem na znalezienie błędów związanych z pytaniem 1 jest skorzystanie ze strony za pomocą klawiatury lub czytnika ekranu. Więcej informacji znajdziesz w artykule Jak sprawdzić ułatwienia dostępu.
Kontrola ułatwień dostępu strony
Ogólnie rzecz biorąc, za pomocą testów ułatwień dostępu w panelu Lighthouse możesz sprawdzić, czy:
- Strona jest prawidłowo oznaczona jako dostępna dla czytników ekranu.
- Elementy tekstowe na stronie mają wystarczający współczynnik kontrastu. Przeczytaj też Tworzenie bardziej czytelnej witryny.
Aby sprawdzić stronę:
- Otwórz adres URL, który chcesz sprawdzić.
W Narzędziach deweloperskich kliknij kartę Lighthouse. W Narzędziach deweloperskich znajdziesz różne opcje konfiguracji.
W sekcji Urządzenie wybierz Komórka, jeśli chcesz symulować urządzenie mobilne. Ta opcja inaczej zmienia ciąg znaków klienta użytkownika i zmienia rozmiar widocznego obszaru. Jeśli wersja mobilna strony wyświetla się inaczej niż wersja komputerowa, ta opcja może mieć znaczny wpływ na wyniki kontroli.
W sekcji Lighthouse sprawdź, czy są włączone Ułatwienia dostępu. Wyłącz inne kategorie, jeśli chcesz je wykluczyć z raportu. Jeśli chcesz poznać inne sposoby poprawiania jakości strony, pozostaw je włączone.
Sekcja Ograniczanie umożliwia ograniczanie wykorzystania sieci i CPU, co jest przydatne przy analizowaniu wydajności obciążenia. Ta opcja nie powinna mieć związku z oceną ułatwień dostępu, więc możesz używać dowolnie wybranych danych.
Pole wyboru Wyczyść pamięć umożliwia wyczyszczenie całej pamięci przed wczytaniem strony lub zachowanie miejsca między kolejnymi wczytywaniemi stron. Ta opcja może też nie mieć związku z oceną ułatwień dostępu, więc możesz korzystać z jej dowolnych opcji.
Kliknij Wygeneruj raport. Po 10–30 sekundach Narzędzia deweloperskie wygeneruje raport. Raport zawiera różne wskazówki, jak poprawić dostępność strony.
Aby dowiedzieć się więcej o danej grupie, kliknij ją.
Kliknij Więcej informacji, aby wyświetlić dokumentację audytu.
Zobacz też: rozszerzenie aXe
Zamiast panelu Lighthouse, który jest domyślnie dostępny w Chrome, wolisz korzystać z rozszerzenia aXe lub rozszerzenia Lighthouse. Ogólnie zawierają one te same informacje, ponieważ aXe to podstawowy mechanizm, który obsługuje panel Lighthouse. Rozszerzenie aXe ma inny interfejs i nieco inaczej opisuje kontrole.
Jedną z zalet rozszerzenia aXe nad panelem kontroli jest to, że pozwala ono sprawdzać i wyróżniać uszkodzone 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 ułatwień dostępu węzłów DOM.
Aby otworzyć panel Ułatwienia dostępu:
- Kliknij kartę 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
.
Wyświetlanie pozycji elementu w drzewie ułatwień dostępu
Drzewo ułatwień dostępu jest podzbiorem drzewa DOM. Zawiera tylko te elementy z drzewa DOM, które są istotne i przydatne podczas wyświetlania treści strony w czytniku ekranu.
W panelu Ułatwienia dostępu możesz sprawdzić pozycję elementu w drzewie ułatwień dostępu.
Ten widok umożliwia zbadanie tylko jednego węzła i jego elementów nadrzędnych. Aby zbadać całe drzewo ułatwień dostępu, wykonaj poniższe czynności.
(Podgląd) Przeglądanie drzewa ułatwień dostępu na całej stronie
Drzewo ułatwień dostępu w pełnym widoku strony pozwala przyjrzeć się całemu drzewu i lepiej zrozumieć, jak Twoje treści z internetu są wykorzystywane przez technologie wspomagające osoby z niepełnosprawnością.
Aby przejrzeć 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 zobaczyć szczegóły w sekcji Obliczone usługi.
Wybierz węzeł i kliknij przycisk
Przełącz na widok drzewa DOM, aby przełączyć się z powrotem na drzewo DOM.Zostanie wybrany odpowiedni węzeł DOM. To świetny sposób na zrozumienie mapowania między węzłem DOM a jego węzłem drzewa ułatwień dostępu.
Wyświetlanie atrybutów ARIA elementu
Atrybuty ARIA zapewniają, że czytniki ekranu zawierają wszystkie informacje potrzebne do prawidłowego odzwierciedlenia zawartości strony.
Atrybuty ARIA elementu możesz wyświetlić w panelu Ułatwienia dostępu.
Wyświetlanie źródłowej kolejności elementów na ekranie
Elementy na stronie nie zawsze pojawiają się w takiej kolejności, w jakiej znajdują się w źródle. Może to wprowadzać w błąd użytkowników korzystających z technologii wspomagających osoby z niepełnosprawnością.
Aby wyświetlić i debugować źródłową kolejność w witrynie:
- Sprawdź element na stronie.
- W sekcji Elementy > Ułatwienia dostępu > Wyświetlający kolejność źródłową zaznacz
Pokaż kolejność źródeł.
W widocznym obszarze Narzędzia deweloperskie obrysowują zagnieżdżone elementy z obramowaniem i oznaczają je liczbami odpowiadającymi kolejności ich ź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ę. Właściwości te możesz wyświetlić w sekcji Obliczone właściwości panelu Ułatwienia dostępu.
Obliczone właściwości ułatwień dostępu elementu możesz wyświetlić w panelu Ułatwienia dostępu.
Odkrywanie i poprawianie tekstu o niskim kontraście
Narzędzia deweloperskie mogą automatycznie wykrywać problemy z niskim kontrastem i proponować lepsze kolory, które pomogą Ci je rozwiązać. Więcej informacji znajdziesz w artykule Tworzenie bardziej czytelnych witryn.