Poruszanie się po Narzędziach deweloperskich w Chrome przy użyciu technologii wspomagających osoby z niepełnosprawnością

Rob Dodson

Ten przewodnik ma pomóc użytkownikom, którzy korzystają głównie z technologii wspomagającej osoby z niepełnosprawnością (AT), takich jak czytniki ekranu, w dostępie do Narzędzi deweloperskich w Chrome i ich używaniu. Narzędzia deweloperskie w Chrome to zestaw narzędzi dla programistów stron internetowych wbudowany w przeglądarkę Google Chrome. Jeśli szukasz funkcji Narzędzi deweloperskich związanych z poprawą dostępności strony internetowej, zapoznaj się z dokumentacją ułatwień dostępu.

Ułatwienia dostępu w Narzędziach deweloperskich są w trakcie opracowywania. Niektóre panele i karty działają lepiej z technologiami wspomagającymi niż inne. Ten przewodnik omawia panele, które są najbardziej dostępne, i wskazuje konkretne problemy, które możesz napotkać.

Przegląd

Narzędzia deweloperskie są podzielone na szereg paneli, które są uporządkowane w ARIA tablist. Na przykład:

  • Panel Elementy umożliwia wyświetlanie i zmienianie węzłów DOM lub CSS.
  • Panel Konsola umożliwia odczytywanie logów JavaScriptu i edycję obiektów na żywo.

W obszarze treści każdego panelu znajduje się wiele różnych narzędzi, które w dokumentacji są często nazywane kartami lub okienkami. Na przykład panel Elementy zawiera dodatkowe karty, które umożliwiają sprawdzanie detektorów zdarzeń, drzewa dostępności i wielu innych elementów. Rozróżnienie między kartami a okienkami jest nieco arbitralne. Jedynym powodem, dla którego używamy jednego z tych terminów, jest zachowanie spójności z pozostałą częścią oficjalnej dokumentacji Narzędzi deweloperskich.

Skróty klawiszowe

Skróty klawiszowe Narzędzi deweloperskich to przydatna ściąga. Dodaj ją do zakładek i wracaj do niej, gdy będziesz przeglądać różne panele.

Otwieranie Narzędzi deweloperskich

Aby rozpocząć, przeczytaj artykuł Otwieranie Narzędzi deweloperskich w Chrome. Narzędzia deweloperskie można otworzyć na kilka sposobów, używając skrótów klawiszowych lub elementów menu.

Przechodzenie między panelami

Między panelami możesz przełączać się za pomocą klawiatury, menu poleceń lub myszy bądź trackpada.

Nawigacja za pomocą klawiatury

  • Gdy Narzędzia dla programistów są otwarte, naciśnij Control + ] lub Command + ] (Mac), aby przenieść fokus na następny panel.
  • Naciśnij Control+[ lub Command+[ (Mac), aby zaznaczyć poprzedni panel.
  • Możesz też użyć klawiszy Shift + Tab, aby przenieść fokus do tablist panelu, i klawiszy strzałek, aby zmieniać panele. Szybsze może być jednak użycie wspomnianych wcześniej skrótów.

Znane problemy

  • Niektóre panele, np. Konsola i Wydajność, mogą przenosić fokus do obszaru treści od razu po aktywowaniu. Może to utrudniać poruszanie się za pomocą klawiszy strzałek.
  • Nazwa wybranego panelu jest odczytywana, ale dopiero po tym, jak czytnik ekranu odczyta zawartość panelu, na której jest fokus. Można je łatwo przeoczyć.

Nawigacja za pomocą menu poleceń

Aby skupić się na konkretnym panelu, użyj menu poleceń:

  1. Po otwarciu Narzędzi dla programistów naciśnij Ctrl+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu poleceń. Menu poleceń to pole kombi autouzupełniania z wyszukiwaniem przybliżonym.
  2. Wpisz nazwę panelu, który chcesz otworzyć, a następnie użyj klawisza strzałki w dół, aby przejść do odpowiedniej opcji.
  3. Aby uruchomić polecenie, naciśnij Enter.

Aby na przykład otworzyć panel Elementy:

  1. Otwórz menu poleceń.
  2. Wpisz E, a następnie L. Wybrana jest opcja Panel > Pokaż elementy.
  3. Naciśnij Enter, aby uruchomić polecenie, które otwiera panel.

Otwarcie panelu w ten sposób powoduje przeniesienie fokusu na jego zawartość. W przypadku panelu Elementy zaznaczenie przenosi się do drzewa DOM.

Panel Elementy

Sprawdzanie elementu na stronie

  1. Za pomocą kursora czytnika ekranu przejdź do elementu, który chcesz sprawdzić.
  2. Symuluj kliknięcie elementu prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
  3. Wybierz opcję Zbadaj. Spowoduje to otwarcie panelu Elementy i skupienie się na elemencie w drzewie DOM.

Drzewo DOM jest ułożone jako tree ARIA. Przykład znajdziesz w artykule Poruszanie się po drzewie DOM za pomocą klawiatury.

Kopiowanie kodu elementu w widoku drzewa DOM

  1. Skup się na węźle w drzewie DOM i otwórz menu kontekstowe, klikając prawym przyciskiem myszy.
  2. Rozwiń opcję Kopiuj.
  3. Kliknij Skopiuj outerHTML.

Znane problemy

  • KopiowanieouterHTML często wybiera węzeł nadrzędny zamiast zamierzonego węzła. Zawartość elementu powinna być jednak nadal skopiowana w obrębie znacznika outerHTML.

Modyfikowanie atrybutów elementu w widoku drzewa DOM

  • Gdy fokus jest ustawiony na węźle w drzewie DOM, naciśnij Enter, aby można było go edytować.
  • Aby przełączać się między wartościami atrybutów, naciśnij Tab. Gdy usłyszysz „spacja”, będziesz w pustym polu tekstowym, w którym możesz wpisać nową wartość atrybutu.
  • Naciśnij Control+Enter lub Command+Enter (Mac), aby zaakceptować zmianę i odsłuchać całą zawartość elementu.

Znane problemy

  • Podczas wpisywania tekstu nie otrzymasz informacji zwrotnych. Jeśli zrobisz literówkę i użyjesz klawiszy strzałek, aby sprawdzić wpisany tekst, nie otrzymasz informacji zwrotnej. Najłatwiejszym sposobem sprawdzenia swojej pracy jest zaakceptowanie zmiany, a następnie odsłuchanie całego elementu.

Edytowanie kodu HTML elementu w widoku drzewa DOM

  • Gdy fokus jest ustawiony na węźle w drzewie DOM, naciśnij Enter, aby można było go edytować.
  • Aby przełączać się między wartościami atrybutów, naciśnij Tab. Gdy usłyszysz nazwę elementu, np. h2, oznacza to, że znajdujesz się w polu wpisywania tekstu i możesz zmienić typ elementu.
  • Aby zaakceptować zmianę, naciśnij Control + Enter lub Command + Enter (Mac).

Na przykład wpisanie h3 i naciśnięcie Ctrl+Enter lub Command+Enter (Mac) zmienia tagi otwierający i zamykający elementu na h3.

Karty panelu Elementy

Panel Elementy zawiera dodatkowe karty, na których możesz sprawdzić m.in. CSS zastosowany do elementu lub jego miejsce w drzewie ułatwień dostępu.

  • Gdy zaznaczony jest węzeł w drzewie DOM, naciskaj Tab, aż usłyszysz, że zaznaczony jest panel Style.
  • Aby przejrzeć inne dostępne karty, użyj strzałki w prawo.

Drzewo DOM przekształca elementy z atrybutami href w linki, na których można ustawić fokus, więc aby przejść do panelu Style, może być konieczne kilkukrotne naciśnięcie klawisza Tab.

Znane problemy

Karty Punkty przerwania DOM i Właściwości nie są dostępne za pomocą klawiatury.

Panel Style

W panelu Style znajdziesz elementy sterujące filtrowaniem stylów, przełączaniem stanów elementów (takich jak :active i :focus), przełączaniem klas i dodawaniem nowych klas. Dostępne jest też zaawansowane narzędzie do sprawdzania stylów, które umożliwia eksplorowanie i modyfikowanie stylów zastosowanych do elementu, który jest zaznaczony w drzewie DOM.

Najważniejsza kwestia dotycząca panelu Style jest taka, że wyświetla on tylko style dla aktualnie wybranego węzła w drzewie DOM. Załóżmy na przykład, że skończysz sprawdzać style węzła <header> i chcesz teraz przyjrzeć się stylom węzła <footer>. Aby to zrobić, musisz wybrać węzeł<footer> w drzewie DOM.

Możesz szybciej użyć przepływu pracy Sprawdź, aby sprawdzić węzeł znajdujący się w pobliżu węzła footer (np. link w stopce), co spowoduje skupienie się na drzewie DOM, a następnie użyć klawiatury, aby przejść do węzła, który Cię interesuje.

Poruszanie się po panelu Style

Wszystkie narzędzia do stylów są w taki czy inny sposób połączone z panelem Style, dlatego warto najpierw dobrze poznać to narzędzie.

  • Gdy zaznaczone jest okienko Style, naciśnij Tab, aby przenieść zaznaczenie do jego wnętrza i przeglądać jego zawartość.
  • Naciskaj Tab, aż pierwszy styl stanie się aktywny. Jeśli używasz czytnika ekranu, ten pierwszy styl jest odczytywany jako „element.style {}”.
  • Naciskaj strzałkę w dół, aby przeglądać listę stylów w kolejności ich szczegółowości. Czytnik ekranu odczytuje każdy styl, zaczynając od nazwy pliku CSS, numeru wiersza, w którym występuje styl, i samej nazwy stylu. Na przykład: „main.css:233 .card__img {}”
  • Naciśnij Enter, aby dokładniej przyjrzeć się stylowi. Fokus zostaje przeniesiony na edytowalną wersję nazwy stylu.
  • Naciśnij Tab, aby przełączać się między edytowalnymi wersjami poszczególnych właściwości CSS i ich wartościami. Na końcu każdego bloku stylu znajduje się puste pole tekstowe, w którym możesz dodać dodatkowe właściwości CSS.
  • Możesz nadal naciskać Tab, aby przechodzić przez listę stylów, lub nacisnąć Escape, aby wyjść z tego trybu i wrócić do poruszania się za pomocą klawiszy strzałek.

Więcej skrótów znajdziesz w informacjach o skrótach klawiszowych w panelu Style.

Znane problemy
  • Jeśli używasz edytowalnego pola tekstowego Filtr, nie możesz poruszać się po liście stylów.

Przełącz stan elementu

Aby przełączyć stan elementu, np. :active lub :focus:

  1. Otwórz panel Style i naciskaj Tab, aż zaznaczony zostanie przycisk Przełącz stan elementu.
  2. Naciśnij Enter, aby rozwinąć kolekcję stanów elementu. Stany elementu są wyświetlane jako grupa pól wyboru.
  3. Naciskaj Tab, aż zaznaczenie znajdzie się na pierwszym stanie, :active.
  4. Naciśnij spację, aby ją włączyć. Jeśli obecnie wybrany element w drzewie DOM ma styl :active, zostanie on zastosowany.
  5. Naciskaj dalej klawisz Tab, aby przejrzeć wszystkie dostępne stany.

Dodawanie zajęć, które się kończą

Obok przycisku Przełącz stan elementu znajduje się przycisk Klasy elementu. Aby przenieść na nią fokus, naciśnij Tab, a następnie Enter. Fokus zostanie przeniesiony do pola edycji tekstu z etykietą Dodaj nową klasę.

Przycisk Element Classes służy głównie do dodawania istniejących klas do elementu. Jeśli na przykład arkusz stylów zawiera klasę pomocniczą o nazwie .clearfix, możesz nacisnąć . w polu edycji tekstu, aby wyświetlić listę sugestii klas, a następnie użyć strzałki w dół, aby znaleźć sugestię .clearfix. Możesz też wpisać nazwę zajęć i nacisnąć Enter, aby ją zastosować.

Dodawanie nowej reguły stylu

Obok przycisku Klasy elementów znajduje się przycisk Nowa reguła stylu. Przenieś na niego fokus, naciskając Tab, a następnie naciśnij Enter. Fokus przenosi się do edytowalnego pola tekstowego w inspektorze stylu. Początkowa treść tekstowa pola to nazwa tagu elementu wybranego w drzewie DOM. W tym polu możesz wpisać dowolną nazwę klasy, a następnie nacisnąć Tab, aby przypisać do niej właściwości CSS.

Karta Obliczone

Gdy zaznaczona jest karta Obliczone, naciśnij Tab, aby przenieść zaznaczenie do jej wnętrza i przejrzeć jej zawartość. Na karcie Wynikowy znajdują się elementy sterujące, które umożliwiają sprawdzenie, które właściwości CSS są faktycznie stosowane do elementu w kolejności określoności.

Przeglądanie wszystkich stylów wynikowych

Naciskaj Tab, aż dojdziesz do kolekcji obliczonych stylów. Są one prezentowane jako tree ARIA. Po rozwinięciu pola listy zobaczysz, które selektory CSS stosują wygenerowany styl. Selektory te są uporządkowane według szczegółowości.

Czytnik ekranu odczytuje obliczoną wartość, selektor CSS, który do niej pasuje, nazwę pliku arkusza stylów zawierającego selektor oraz numer wiersza selektora.

Znane problemy

  • Jeśli użyjesz pola tekstowego Filtr, nie będziesz już mieć możliwości sprawdzania stylów.

Karta Detektory zdarzeń

W panelu Elementy możesz sprawdzić detektory zdarzeń zastosowane do elementu, korzystając z karty Detektory zdarzeń. Gdy zaznaczony jest panel Style, naciśnij strzałkę w prawo, aby przejść do karty Event Listeners (Odbiorniki zdarzeń).

Sprawdzanie detektorów zdarzeń

Detektory zdarzeń są prezentowane jako element ARIA tree. Możesz się po nich poruszać za pomocą klawiszy strzałek. Czytnik ekranu odczytuje nazwę obiektu DOM, do którego jest dołączony detektor zdarzeń, a także nazwę pliku, w którym jest zdefiniowany detektor zdarzeń, i numer wiersza.

Panel ułatwień dostępu

Gdy fokus znajduje się w panelu Ułatwienia dostępu, naciśnij Tab, aby przenieść fokus do panelu i przeglądać jego zawartość. W panelu Ułatwienia dostępu znajdują się elementy sterujące, które umożliwiają przeglądanie drzewa ułatwień dostępu, atrybutów ARIA zastosowanych do elementu i jego obliczonych właściwości ułatwień dostępu.

Drzewo ułatwień dostępu

Drzewo ułatwień dostępu jest przedstawione jako element ARIA tree, w którym każdy element treeitem odpowiada elementowi w DOM. Drzewo odczytuje obliczoną rolę wybranego węzła. Ogólne elementy, takie jak div i span, są odczytywane w drzewie jako „GenericContainer”. Użyj klawiszy strzałek, aby poruszać się po drzewie i sprawdzać relacje między elementami nadrzędnymi a podrzędnymi.

Znane problemy

  • Typ drzewa ARIA używanego przez panel Ułatwienia dostępu może być niedostępny w czytnikach ekranu Chrome na macOS, takich jak VoiceOver. Subskrybuj problem z Chromium nr 868480, aby otrzymywać informacje o postępach w jego rozwiązywaniu.
  • Sekcje Atrybuty ARIA i Obliczone właściwości są oznaczone jako drzewa ARIA, ale nie obejmują zarządzania fokusem. Oznacza to, że te sekcje nie działają z klawiatury.

Panel Audyty

Panel Audyty umożliwia przeprowadzanie serii testów witryny w celu sprawdzenia, czy nie występują w niej typowe problemy związane z wydajnością, dostępnością, SEO i wieloma innymi kategoriami.

Konfigurowanie i przeprowadzanie kontroli

  1. Po pierwszym otwarciu panelu Audyty fokus jest ustawiony na przycisk Uruchom audyt na końcu formularza. Domyślnie formularz jest skonfigurowany tak, aby przeprowadzać audyty w każdej kategorii przy użyciu emulacji mobilnej na symulowanym połączeniu 3G.
  2. Aby zmienić ustawienia audytu, naciśnij Shift+Tab lub wróć do poprzedniej strony w trybie przeglądania.
  3. Gdy wszystko będzie gotowe, wróć do przycisku Uruchom audyt i naciśnij Enter.
  4. Zaznaczenie przenosi się do okna modalnego z przyciskiem Anuluj, który umożliwia zakończenie audytu. Podczas przeprowadzania kontroli i wielokrotnego odświeżania strony możesz słyszeć serię sygnałów dźwiękowych.

Znane problemy

  • Poszczególne sekcje formularza konfiguracji nie są oznaczone elementem fieldset. W trybie przeglądania łatwiej jest poruszać się po tych elementach i sprawdzać, które elementy sterujące są powiązane z poszczególnymi sekcjami.
  • Po zakończeniu sprawdzania nie jest odtwarzany sygnał dźwiękowy ani komunikat w obszarze aktywnym. Zwykle trwa to około 30 sekund. Po tym czasie powinny być widoczne wyniki. Aby szybko przejść do wyników, użyj trybu przeglądania.

Poruszanie się po raporcie kontrolnym

Raport kontrolny jest podzielony na sekcje odpowiadające poszczególnym kategoriom kontroli. Raport otworzy się z listą wyników w poszczególnych kategoriach. Wyniki są też linkami, które umożliwiają przejście do odpowiednich sekcji. W każdej sekcji znajdują się rozwijane elementy details, które zawierają informacje o przeprowadzonych kontrolach. Domyślnie wyświetlane są tylko nieudane audyty. Każda sekcja kończy się elementem details, który zawiera wszystkie zaliczone kontrole.

Aby przeprowadzić nowy audyt, naciśnij Shift + Tab, aby zamknąć raport, i poszukaj przycisku Przeprowadź audyt.