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 głównie korzystają z technologii wspomagających, takich jak czytniki ekranu i Narzędzi deweloperskich w Chrome. Narzędzia deweloperskie w Chrome to pakiet narzędzi dla programistów stron internetowych wbudowanych w przeglądarkę Google Chrome. Jeśli szukasz funkcji DevTools związanych z poprawą ułatwień dostępu na stronie internetowej, zapoznaj się z dokumentacją ułatwień dostępu.

Ułatwienia dostępu w Narzędziach deweloperskich są w toku. Niektóre panele i karty działają lepiej w przypadku technologii wspomagających niż inne. Ten przewodnik pomoże Ci wybrać najbardziej dostępne panele i wyróżnić konkretne problemy, które możesz napotkać.

Opis

Zanim zaczniesz, dobrze jest mieć sobie wyobrażenie o strukturze interfejsu użytkownika Narzędzi dla deweloperów. Narzędzia deweloperskie są podzielone na serię paneli utworzonych w ramach funkcji ARIA tablist. Na przykład:

  • W panelu Elementy możesz wyświetlać i zmieniać węzły DOM oraz CSS.
  • Panel Konsola umożliwia odczytywanie dzienników JavaScriptu i obiektów edycji na żywo.

W obszarze treści każdego panelu znajduje się wiele różnych narzędzi określanych w dokumentacji jako karty lub panele. Na przykład panel Elementy zawiera dodatkowe karty umożliwiające badanie detektorów zdarzeń, drzewa ułatwień dostępu i wielu innych opcji. Rozróżnienie między kartami a panelami jest dość arbitralne. Jedynym powodem, dla którego widzisz jeden z tych terminów, jest zachowanie spójności z resztą oficjalnej dokumentacji narzędzi dla deweloperów.

Skróty klawiszowe

Informacja o skrótach klawiszowych dostępnych w Narzędziach deweloperskich to przydatna ściągawka. Dodaj ją do zakładek i korzystaj z niej podczas przeglądania różnych paneli.

Otwórz Narzędzia deweloperskie

Na początek przeczytaj artykuł Otwieranie Narzędzi deweloperskich w Chrome. Narzędzia deweloperskie można otwierać na wiele sposobów za pomocą skrótów klawiszowych lub elementów menu.

Przechodzenie między panelami

Nawiguj za pomocą klawiatury

  • Po otwarciu Narzędzi deweloperskich naciśnij Control + ] lub Command + ] (Mac), aby zaznaczyć następny panel.
  • Naciśnij Control+[ lub Command+[ (Mac), aby zaznaczyć poprzedni panel.
  • Możesz też użyć skrótu Shift+Tab, aby przenieść zaznaczenie do tablist panelu, i użyć klawiszy strzałek do zmiany paneli. Jednak szybsze mogą być użycie wspomnianych wcześniej skrótów.

Znane problemy

  • Niektóre panele, np. Konsola i Wydajność, mogą od razu po aktywowaniu przejść na obszar treści. To może utrudniać poruszanie się za pomocą klawiszy strzałek.
  • Nazwa wybranego panelu jest ogłoszona, ale tylko po odczytaniu aktywnej treści w panelu. Przez to bardzo łatwo może ją przegapić.

Nawigowanie według menu poleceń

Aby zaznaczyć konkretny panel, użyj menu poleceń:

  1. Po otwarciu Narzędzi deweloperskich naciśnij Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu poleceń. Menu polecenia to pole złożone z autouzupełnianiem wyszukiwania.
  2. Wpisz nazwę panelu, który chcesz otworzyć, i za pomocą klawiatury strzałki w dół przejdź do właściwej 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. Wybrano opcję Panel > Show Elements (Panel > Pokaż elementy).
  3. Naciśnij Enter, aby uruchomić polecenie otwierające panel.

Otwarcie panelu w ten sposób powoduje kierowanie zaznaczenia na jego zawartość. W przypadku panelu Elementy zaznaczenie przechodzi do drzewa DOM.

Panel Elementy

Sprawdzanie elementu na stronie

  1. Za pomocą kursora czytnika ekranu przejdź do elementu, który chcesz sprawdzić.
  2. Symulowanie kliknięcia elementu prawym przyciskiem myszy w celu otwarcia menu kontekstowego.
  3. Kliknij opcję Zbadaj. Otworzy się panel Elementy i wyróżniony element w drzewie DOM.

Drzewo DOM jest prezentowane jako ARIA tree. Przykład znajdziesz w sekcji Poruszanie się po drzewie DOM przy użyciu klawiatury.

Skopiuj kod elementu w drzewie DOM

  1. Po zaznaczeniu węzła w drzewie DOM otwórz menu kontekstowe dostępne po kliknięciu prawym przyciskiem myszy.
  2. Rozwiń opcję Kopiuj.
  3. Wybierz Kopiuj outerHTML.

Znane problemy

  • Kopiuj outerHTML często nie wybiera bieżącego węzła, ale zamiast tego wybiera jego węzeł nadrzędny. Jednak zawartość tego elementu powinna nadal znajdować się w skopiowanym kodzie outerHTML.

Modyfikowanie atrybutów elementu w drzewie DOM

  • Po zaznaczeniu węzła w drzewie DOM naciśnij Enter, aby umożliwić jego edytowanie.
  • Naciskaj Tab, aby przechodzić między wartościami atrybutów. Gdy usłyszysz „spację”, znajdujesz się w pustym polu tekstowym i możesz wpisać nową wartość atrybutu.
  • Naciśnij Control+Enter lub Command+Enter (Mac), aby zaakceptować zmianę i usłyszeć całą zawartość elementu.

Znane problemy

  • Podczas pisania nie pojawia się żaden komunikat. Jeśli pomylisz się przy użyciu klawiszy strzałek do przejrzenia wpisanego tekstu, również nie otrzymasz opinii. Najłatwiejszym sposobem sprawdzenia wyników jest zaakceptowanie zmiany, a następnie nasłuchiwanie komunikatu o całym elemencie.

Edytowanie kodu HTML elementu w drzewie DOM

  • Po zaznaczeniu węzła w drzewie DOM naciśnij Enter, aby umożliwić jego edytowanie.
  • Naciskaj Tab, aby przechodzić między wartościami atrybutów. Gdy usłyszysz nazwę elementu, np. „h2”, wejdziesz do pola tekstowego i możesz zmienić jego typ.
  • Naciśnij Control+Enter lub Command+Enter (Mac), aby zaakceptować zmianę.

Na przykład wpisanie h3 i naciśnięcie Control+Enter lub Command+Enter (Mac) zmienia tag początkowy i końcowy elementu na h3.

Karty panelu Elementy

Panel Elementy zawiera dodatkowe karty, za pomocą których możesz np. sprawdzić kod CSS zastosowany do elementu lub jego miejsce w drzewie ułatwień dostępu.

  • Po zaznaczeniu węzła w drzewie DOM naciskaj Tab, aż usłyszysz, że został wybrany panel Style.
  • Użyj strzałki w prawo, aby przejrzeć inne dostępne karty.

Drzewo DOM przekształca elementy z atrybutami href w linki, które można zaznaczyć, dlatego aby przejść do panelu Style, trzeba prawdopodobnie nacisnąć klawisz Tab więcej niż raz.

Znane problemy

Karty Punkty przerwania DOM i Właściwości nie są dostępne przy użyciu klawiatury.

Okienko stylów

W panelu Style znajdziesz opcje filtrowania stylów, przełączania stanów elementów (np. :active i :focus) oraz klas i dodawania nowych klas. Dostępne jest również zaawansowane narzędzie do sprawdzania stylów, które pozwala przeglądać i modyfikować style stosowane obecnie do elementu wybranego w drzewie DOM.

Panel Style zawiera tylko style aktualnie wybranego węzła w drzewie DOM. Załóżmy na przykład, że zakończyliśmy sprawdzanie stylów węzła <header>, a teraz chcesz przejrzeć style węzła <footer>. Aby to zrobić, musisz najpierw wybrać węzeł <footer> w drzewie DOM. Szybszym rozwiązaniem może być skorzystanie z przepływu pracy Zbadaj w celu zbadania węzła znajdującego się w pobliżu węzła footer (np. linku w stopce), który koncentruje się na drzewie DOM, a następnie za pomocą klawiatury przejdź do konkretnego węzła.

Poruszanie się po panelu Style

Wszystkie narzędzia stylu łączą się w pewny sposób z panelem Style, dlatego warto najpierw zostać ekspertem w zakresie tego narzędzia.

  • Po wybraniu panelu Style naciśnij Tab, aby przenieść zaznaczenie do wnętrza i zapoznać się z jego zawartością.
  • Naciskaj Tab, aż pierwszy styl stanie się aktywny. Jeśli korzystasz z czytnika ekranu, ten pierwszy styl będzie oznaczony jako „element.style {}”.
  • Naciskaj strzałkę w dół, aby poruszać się po liście stylów w kolejności szczegółowości. Czytnik ekranu odczytuje każdy styl, zaczynając od nazwy pliku CSS, numeru wiersza, w którym ma się on pojawić, oraz nazwy stylu. Na przykład: „main.css:233 .card__img {}”
  • Aby dokładniej sprawdzić styl, naciśnij Enter. Zaznacza się edytowalna wersja nazwy stylu.
  • Naciskaj Tab, aby przechodzić między edytowalnymi wersjami poszczególnych właściwości CSS i odpowiadających im wartości. Na końcu każdego bloku stylu znajduje się puste pole tekstowe z możliwością edytowania, w którym możesz dodawać kolejne właściwości CSS.
  • Możesz dalej naciskać Tab, aby przechodzić między stylami, albo naciskać Escape, aby wyjść z tego trybu i wrócić do nawigowania przy użyciu klawiszy strzałek.

Zapoznaj się z informacjami o klawiaturach w panelu Style, by poznać dodatkowe skróty.

Znane problemy
  • Jeśli używasz pola tekstowego z możliwością edycji Filtr, nie będzie już można nawigować po liście stylów.

Przełącz stan elementu

Aby zmienić stan elementu, np. :active lub :focus:

  1. Przejdź do panelu Style i naciskaj Tab, aż zaznaczony zostanie przycisk Przełącz stan elementu.
  2. Naciśnij Enter, aby rozwinąć zbiór stanów elementów. Stany elementów mają postać grupy pól wyboru.
  3. Naciskaj Tab, aż zostanie zaznaczony pierwszy stan (:active).
  4. Aby je włączyć, naciśnij spację. Jeśli obecnie wybrany element w drzewie DOM ma styl :active, zostanie on zastosowany.
  5. Naciskaj Tab, aby przeglądać wszystkie dostępne stany.

Dodawanie zajęć, które opuszczają

Obok przycisku Przełącz stan elementu jest przycisk Klasy elementu. Aby przenieść zaznaczenie, naciśnij Tab, a następnie Enter. Zaznaczenie zostanie przeniesione do pola edycji o nazwie Add New Class (Dodaj nową klasę).

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

Dodaj nową regułę stylu

Obok przycisku Klasy elementu znajduje się przycisk Nowa reguła stylu. Aby przenieść zaznaczenie, naciśnij Tab i naciśnij Enter. Zaznaczenie przechodzi do edytowalnego pola tekstowego w inspektorze stylu. Początkowa zawartość tekstowa pola to nazwa tagu elementu wybranego w drzewie DOM. Możesz wpisać w tym polu dowolną nazwę klasy, a następnie nacisnąć Tab, aby przypisać do niego właściwości CSS.

Karta Obliczone

Po zaznaczeniu karty Obliczono naciśnij Tab, aby przenieść zaznaczenie do środka i przejrzeć jego zawartość. Na karcie Obliczone znajdują się ustawienia pozwalające sprawdzić, które właściwości CSS są faktycznie stosowane do elementu w kolejności wynikającej ze specyfiki.

Przeglądaj wszystkie style obliczeniowe

Naciskaj Tab, aż dojdziesz do zbioru obliczonych stylów. Są one widoczne jako tree ARIA. Po rozwinięciu pola listy widać, które selektory arkusza CSS stosują obliczony styl. Są one uporządkowane według szczegółowości. Czytnik ekranu odczytuje obliczoną wartość, która jest obecnie dopasowywana przez selektor arkusza CSS, nazwę pliku arkusza stylów zawierającego selektor i numer wiersza selektora.

Znane problemy

  • Jeśli użyjesz pola tekstowego Filtr, nie będzie można sprawdzać stylów.

Karta Detektory zdarzeń

W panelu Elementy możesz sprawdzać detektory zdarzeń zastosowane do elementu za pomocą karty Detektory zdarzeń. Po wybraniu panelu Style naciśnij strzałkę w prawo, aby przejść do karty Detektory zdarzeń.

Przeglądaj detektory zdarzeń

Detektory zdarzeń są wyświetlane jako tree ARIA. Do poruszania się możesz używać klawiszy strzałek. Czytnik ekranu wypowiada nazwę obiektu DOM, do którego jest dołączony detektor zdarzeń, a także nazwę pliku, w którym jest zdefiniowany odbiornik, oraz numer wiersza.

Panel ułatwień dostępu

Po wybraniu panelu Ułatwienia dostępu naciśnij Tab, aby przenieść zaznaczenie i przejrzeć jego zawartość. W panelu Ułatwienia dostępu znajdziesz elementy sterujące drzewem ułatwień dostępu, atrybutami ARIA zastosowanymi do elementu i jego obliczonymi właściwościami ułatwień dostępu.

Drzewo ułatwień dostępu

Drzewo ułatwień dostępu jest prezentowane w postaci tree ARIA, w którym każda wartość treeitem odpowiada elementowi w DOM. Drzewo informuje o obliczonej roli wybranego węzła. Elementy ogólne, takie jak div i span, mają w drzewie nazwę „TypoweContainer”. Użyj klawiszy strzałek, aby poruszać się po drzewie i poznać relacje między nadrzędnym a podrzędnymi.

Znane problemy

  • Typ drzewa ARIA używany w panelu Ułatwienia dostępu może nie być prawidłowo widoczny w Chrome na potrzeby czytników ekranu z systemem macOS, takich jak VoiceOver. Zasubskrybuj numer sprawy Chromium nr 868480, aby być na bieżąco z postępami w rozwiązaniu tego problemu.
  • Sekcje Atrybuty ARIA i Właściwości obliczeniowe są oznaczone jako drzewa ARIA, ale obecnie nie są w nich zarządzane, przez co nie można ich używać z klawiatury.

Panel kontroli

W panelu Audyty możesz przeprowadzać serię testów witryny w poszukiwaniu typowych problemów z wydajnością, ułatwieniami dostępu, SEO i wieloma innymi kategoriami.

Konfigurowanie i przeprowadzanie kontroli

  1. Po pierwszym otwarciu panelu Kontrole zaznaczono przycisk Uruchom kontrolę na końcu formularza. Domyślnie formularz jest skonfigurowany do przeprowadzania audytów każdej kategorii z wykorzystaniem emulacji urządzenia mobilnego przy symulowanym połączeniu 3G.
  2. Użyj klawiszy Shift + Tab lub wróć do trybu przeglądania, aby zmienić ustawienia kontroli.
  3. Gdy zechcesz przeprowadzić kontrolę, wróć do przycisku Uruchom kontrolę i naciśnij Enter.
  4. Aktywuje się okno modalne z przyciskiem Anuluj, który umożliwia zamknięcie kontroli. W miarę przeprowadzania kontroli i wielokrotnego odświeżania strony możesz usłyszeć szereg ikon audio.

Znane problemy

  • Różne sekcje formularza konfiguracji nie są obecnie oznaczone elementem fieldset. W trybie przeglądania możesz łatwiej poruszać się po nich, aby określić, które elementy sterujące są powiązane z poszczególnymi sekcjami.
  • Po zakończeniu kontroli nie jest przekazywana ikona audio ani informacje dotyczące regionu aktywnego. Zwykle zajmuje to około 30 sekund. Po tym czasie można przejść do wyników. Najłatwiejszym sposobem na dotarcie do wyników jest użycie trybu przeglądania.

Poruszanie się po raporcie kontrolnym

Raport kontrolny jest podzielony na sekcje, które odpowiadają poszczególnym kategoriom kontroli. Otworzy się raport z listą wyników dla każdej kategorii. Wyniki to także linki, dzięki którym można przejść do odpowiednich sekcji. W każdej sekcji znajdują się rozwijane elementy details, które zawierają informacje o zaliczonych lub niezaliczonych audytach. Domyślnie wyświetlane są tylko niezaliczone kontrole. Każda sekcja kończy się końcowym elementem details, który zawiera wszystkie zdane audyty.

Aby przeprowadzić nowy audyt, zamknij raport, naciskając Shift + Tab, i poszukaj przycisku Przeprowadź kontrolę.