Ten przewodnik ma pomóc użytkownikom, którzy korzystają głównie z technologii wspomagających, 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ą dotyczącą 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
Zanim zaczniesz, warto poznać strukturę interfejsu Narzędzi deweloperskich. Narzędzia deweloperskie są podzielone na szereg paneli, które są uporządkowane w strukturę 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 panelami jest nieco arbitralne. Jedynym powodem, dla którego używamy jednego lub drugiego terminu, jest zachowanie spójności z pozostałą częścią oficjalnej dokumentacji Narzędzi deweloperskich.
Skróty klawiszowe
Skróty klawiszowe w Narzędziach 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
Nawigacja za pomocą klawiatury
- Gdy Narzędzia dla programistów są otwarte, naciśnij Control+] lub Command+] (Mac), aby przejść do następnego panelu.
- Naciśnij Control + [ lub Command + [ (Mac), aby ustawić fokus na poprzedni panel.
- Możesz też użyć klawiszy Shift + Tab, aby przenieść fokus do panelu
tablist, a następnie użyć klawiszy strzałek do zmiany paneli. Szybsze może być jednak użycie wspomnianych wcześniej skrótów.
Znane problemy
- Niektóre panele, np. Konsola i Skuteczność, mogą po aktywowaniu od razu przenieść fokus na obszar treści. Może to utrudnić poruszanie się za pomocą klawiszy strzałek.
- Nazwa wybranego panelu jest odczytywana dopiero po odczytaniu treści, na której jest on skupiony. Można je łatwo przeoczyć.
Nawigacja za pomocą menu poleceń
Aby skupić się na konkretnym panelu, użyj menu poleceń:
- 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.
- Wpisz nazwę panelu, który chcesz otworzyć, a następnie użyj klawisza strzałki w dół, aby przejść do odpowiedniej opcji.
- Aby uruchomić polecenie, naciśnij Enter.
Aby na przykład otworzyć panel Elementy:
- Otwórz menu poleceń.
- Wpisz E, a następnie L. Wybrana jest opcja Panel > Pokaż elementy.
- Naciśnij Enter, aby uruchomić polecenie, które otworzy panel.
Otwarcie panelu w ten sposób powoduje przeniesienie fokusu na jego zawartość. W przypadku panelu Elementy fokus przenosi się do drzewa DOM.
Panel Elementy
Sprawdzanie elementu na stronie
- Za pomocą kursora czytnika ekranu przejdź do elementu, który chcesz sprawdzić.
- Symuluj kliknięcie elementu prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
- 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
- Skup się na węźle w drzewie DOM i otwórz menu kontekstowe, klikając prawym przyciskiem myszy.
- Rozwiń opcję Kopiuj.
- Kliknij Skopiuj outerHTML.
Znane problemy
- Kopiuj outerHTML często nie wybiera bieżącego węzła, ale jego węzeł nadrzędny. Zawartość elementu powinna jednak nadal znajdować się w skopiowanym kodzie outerHTML.
Modyfikowanie atrybutów elementu w widoku drzewa DOM
- Gdy fokus znajduje się 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”, oznacza to, że 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 odsłuchać całą zawartość elementu.
Znane problemy
- Podczas wpisywania tekstu nie otrzymujesz żadnych informacji zwrotnych. Jeśli zrobisz błąd i użyjesz klawiszy strzałek, aby sprawdzić wpisany tekst, również nie otrzymasz żadnych informacji. Najprostszym sposobem sprawdzenia swojej pracy jest zaakceptowanie zmiany, a następnie wysłuchanie całego elementu.
Edytowanie kodu HTML elementu w widoku drzewa DOM
- Gdy fokus znajduje się 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 wprowadzania 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 fokus znajduje się na węźle 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 się skupić, więc aby przejść do panelu Style, może być konieczne naciśnięcie klawisza Tab więcej niż raz.
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 do filtrowania stylów, przełączania stanów elementów (np. :active i :focus), przełączania klas i dodawania nowych klas. Dostępne jest też zaawansowane narzędzie do sprawdzania stylów, które umożliwia eksplorowanie i modyfikowanie stylów aktualnie zastosowanych do elementu, który jest zaznaczony w drzewie DOM.
Najważniejsza kwestia, którą należy zrozumieć w przypadku 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 najpierw 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 konkretnego 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 zostanie odczytany 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 pojawia się styl, i samej nazwy stylu. Na przykład: „main.css:233 .card__img {}”
- Naciśnij Enter, aby dokładniej przyjrzeć się stylowi. Fokus zostanie 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 odpowiednimi 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 poruszać się po liście stylów, lub nacisnąć Escape, aby wyjść z tego trybu i wrócić do nawigacji 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żyjesz pola tekstowego z możliwością edycji Filtr, nie będziesz już mieć możliwości poruszania się po liście stylów.
Przełącz stan elementu
Aby przełączyć stan elementu, np. :active lub :focus:
- Otwórz panel Style i naciskaj Tab, aż zaznaczony zostanie przycisk Przełącz stan elementu.
- Naciśnij Enter, aby rozwinąć kolekcję stanów elementu. Stany elementu są przedstawione jako grupa pól wyboru.
- Naciskaj Tab, aż zaznaczony zostanie pierwszy stan,
:active. - Naciśnij spację, aby ją włączyć. Jeśli obecnie wybrany element w drzewie DOM ma styl
:active, zostanie on zastosowany. - Naciskaj 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. Przenieś na nią fokus, naciskając Tab, a następnie Enter. Fokus zostanie przeniesiony do pola tekstowego z etykietą Dodaj nową klasę.
Przycisk Element Classes (Klasy elementów) 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 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. Przejdź do niego, naciskając Tab, a następnie naciśnij Enter. Fokus zostanie przeniesiony 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 Wynikowe
Gdy zaznaczona jest karta Obliczone, naciśnij Tab, aby przenieść zaznaczenie do jej wnętrza i przejrzeć 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 ich ważności.
Wyświetlanie wszystkich stylów wynikowych
Naciskaj Tab, aż dojdziesz do kolekcji obliczonych stylów. Są one prezentowane jako tree ARIA. Po rozwinięciu pola listy widać, które selektory CSS stosują wygenerowany styl. Te selektory są uporządkowane według szczegółowości. Czytnik ekranu odczytuje obliczoną wartość, selektor CSS, który jest obecnie dopasowywany, 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ń. W panelu Style naciśnij strzałkę w prawo, aby przejść do karty Event Listeners (Detektory zdarzeń).
Sprawdzanie detektorów zdarzeń
Detektory zdarzeń są prezentowane jako element ARIA tree. Do poruszania się po nich możesz używać 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 zaznaczony jest panel Ułatwienia dostępu, naciśnij Tab, aby przenieść zaznaczenie do jego wnętrza i zapoznać się z jego zawartością. 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 przedstawiane 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ą w drzewie ogłaszane jako „GenericContainer”. Użyj klawiszy strzałek, aby poruszać się po drzewie i sprawdzać relacje między elementami nadrzędnymi i podrzędnymi.
Znane problemy
- Typ drzewa ARIA używanego przez panel Ułatwienia dostępu może nie być prawidłowo udostępniany w Chrome czytnikom ekranu na macOS, takim 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 obecnie nie mają funkcji zarządzania fokusem, więc nie można ich obsługiwać za pomocą 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
- 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 urządzeń mobilnych w symulowanym połączeniu 3G.
- Aby zmienić ustawienia audytu, naciśnij Shift + Tab lub wróć do trybu przeglądania.
- Gdy wszystko będzie gotowe, wróć do przycisku Uruchom audyt i naciśnij Enter.
- Zaznaczenie zostanie przeniesione do okna modalnego z przyciskiem Anuluj, który umożliwia zamknięcie audytu. Podczas sprawdzania 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ą obecnie oznaczone elementem
fieldset. W trybie przeglądania łatwiej jest się po nich poruszać 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 ogłoszenie dotyczące regionu na żywo. Zwykle trwa to około 30 sekund. Po tym czasie powinny być widoczne wyniki. Najłatwiej będzie to zrobić w trybie 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 dla każdej kategorii. 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 zaliczonej lub niezaliczonej kontroli. Domyślnie wyświetlane są tylko nieudane audyty.
Każda sekcja kończy się elementem details, który zawiera wszystkie zaliczone testy.
Aby przeprowadzić nowy audyt, naciśnij Shift+Tab, aby zamknąć raport, i poszukaj przycisku Przeprowadź audyt.