odnośnik dostępności

ta strona jest obszernym odniesieniem do funkcji dostępności w Chrome DevTools.It przeznaczony jest dla web developerów, którzy:

• mieć podstawową wiedzę na temat narzędzi DevTools, takich jak jak je otworzyć.
• są zaznajomieni z zasadami dostępności i najlepszymi praktykami.

celem tego odsyłacza jest pomoc w odkryciu wszystkich dostępnych narzędzi inDevTools, które mogą pomóc w zbadaniu dostępności strony.

Zobacz nawigowanie Chrome DevTools z technologią Wspomagającąjeśli szukasz pomocy w nawigacji DevTools z technologią wspomagającą, taką jak czytnik ekranu.

Przegląd funkcji ułatwień dostępu w narzędziach DevTools Chrome

w tej sekcji wyjaśniono, jak narzędzia DevTools pasują do ogólnego zestawu narzędzi ułatwień dostępu.

określając, czy strona jest dostępna, musisz mieć na uwadze 2 Ogólne pytania:

1. Czy mogę poruszać się po stronie za pomocą klawiatury lub czytnika ekranu?
2. czy elementy strony są odpowiednio zaznaczone dla czytników ekranu?

Ogólnie Rzecz Biorąc, DevTools może pomóc naprawić błędy związane z pytaniem #2, ponieważ błędy te są łatwe do wykrycia w zautomatyzowany sposób. Pytanie # 1 jest równie ważne, ale niestety DevToolscan nie może Ci w tym pomóc. Jedynym sposobem na znalezienie błędów związanych z pytaniem # 1 jest samodzielne użycie strony za pomocą klawiatury lub czytnika ekranu. Zobacz, Jak zrobić przegląd dostępności, aby dowiedzieć się więcej.

Sprawdź dostępność strony

ogólnie rzecz biorąc, użyj panelu audyty, aby określić, czy:

• strona jest odpowiednio oznaczona dla czytników ekranu.
• elementy tekstu na stronie mają wystarczające współczynniki kontrastu. Zobacz także wyświetlanie stosunku odstępu między elementami tekstu w próbniku kolorów.

aby sprawdzić stronę:

1. przejdź do adresu URL, który chcesz sprawdzić.

2. w narzędziu DevTools kliknij kartę audyty. DevTools pokazuje różne opcje konfiguracji.

   

3. w przypadku urządzenia wybierz opcję telefon komórkowy, jeśli chcesz symulować urządzenie mobilne. Ta opcja zmienia różnie ciąg znaków agenta użytkownika i zmienia rozmiar widoku. Jeśli Wersja mobilna strony jest wyświetlana inaczej niż wersja desktopowa, opcja ta może mieć znaczący wpływ na wyniki audytu.

4. w sekcji audyty upewnij się, że dostępność jest włączona. Wyłącz othercategories, jeśli chcesz wykluczyć je z raportu. Pozostaw je włączone, jeśli chcesz odkryć inne sposoby poprawy jakości strony.

5. sekcja „Dławienie” pozwala na dławienie sieci i procesora, co jest przydatne podczas analizy wydajności. Ta opcja powinna być nieistotna dla Twojego wyniku dostępności, więc możesz używać tego, co wolisz.

6. pole Wyczyść magazyn umożliwia wyczyszczenie całego magazynu przed załadowaniem strony lub zachowanie pamięci między ładowaniem strony. Ta opcja jest prawdopodobnie nieistotna dla Twojego wyniku dostępności, więc możesz używać tego, co wolisz.

7. Kliknij Uruchom Audyty. Po 10 do 30 sekundach DevTools dostarcza raport.Raport zawiera różne wskazówki, jak poprawić dostępność strony.

   

8. kliknij audyt, aby dowiedzieć się więcej na jego temat.

   

9. kliknij Dowiedz się więcej, aby wyświetlić dokumentację audytu.

   

: rozszerzenie aXe

może wolisz używać rozszerzenia aXe zamiast panelu audytów.Na ogół dostarczają te same informacje, ponieważ aXe jest podstawowym silnikiem, który zasila panel audytów. Rozszerzenie aXe ma inny interfejs użytkownika i opisuje audyty nieco inaczej.Jedną z zalet rozszerzenia aXe nad panelem audytów jest to, że pozwala kontrolować i oświetlać uszkodzone węzły.

panel dostępności

panel dostępności umożliwia przeglądanie drzewa dostępności, atrybutów ARIA oraz obliczonych właściwości dostępności węzłów DOM.

aby otworzyć panel dostępności:

1. kliknij kartę Elementy.
2. w drzewie DOM wybierz element, który chcesz sprawdzić.
3. kliknij kartę dostępność. Ta karta może być ukryta za przyciskiem więcej kart.

wyświetlanie pozycji elementu w drzewie dostępności

drzewo dostępności jest podzbiorem drzewa DOM. Zawiera tylko elementy z drzewa DOM, które są istotne i przydatne do wyświetlania zawartości strony w czytniku ekranu.

sprawdź pozycję elementu w drzewie dostępności w panelu dostępność.

wyświetl atrybuty Aria elementu

atrybuty ARIA zapewniają, że czytniki ekranu mają wszystkie informacje, których potrzebują, aby poprawnie reprezentować zawartość strony.

wyświetl atrybuty Aria elementu w okienku dostępności.

wyświetla obliczone właściwości dostępności elementu

niektóre właściwości dostępności są dynamicznie obliczane przez przeglądarkę. Te właściwości można przeglądać w sekcji Computed Properties w Panelu dostępność.

wyświetlanie obliczonych właściwości ułatwień dostępu elementu w okienku ułatwień dostępu.

Wyświetlono współczynnik kontrastu elementu tekstowego w próbniku kolorów

niektórzy ludzie z słabym widzeniem nie widzą obszarów jako bardzo jasnych lub bardzo ciemnych. Wszystko ma tendencję dopojawiania się przy mniej więcej tej samej jasności, co utrudnia rozróżnienie konturów i krawędzi.Współczynnik kontrastu mierzy różnicę jasności między pierwszym planem a tłem tekstu. Jeśli twój tekst ma niski współczynnik kontrastu, ci użytkownicy o słabym wzroku mogą dosłownie doświadczyć Twojej witryny jako pustego ekranu.

Próbnik Kolorów pomoże Ci upewnić się, że Twój tekst spełnia zalecane poziomy kontrastu:

1. kliknij kartę Elementy.

2. w drzewie DOM wybierz element tekstowy, który chcesz sprawdzić.

   

3. w okienku Style kliknij kwadrat koloru obok wartości elementu color.

   

4. sprawdź sekcję współczynnik kontrastu selektora kolorów. Jeden znacznik oznacza, że element spełnia minimalne zalecenie.Dwie znaczniki wyboru oznaczają, że spełnia on ulepszoną rekomendację.

   

5. kliknij sekcję współczynnik kontrastu, aby zobaczyć więcej informacji. W aplikacji visualpicker u góry selektora kolorów pojawia się linia. Jeśli obecny kolor spełnia zalecenia, thennie wszystko po tej samej stronie linii również spełnia zalecenia. Jeśli obecny kolor nie spełnia zaleceń, wszystko po tej samej stronie również nie spełnia zaleceń.

   

opinie