W narzędziach deweloperskich Chrome wprowadzamy pełne drzewo ułatwień dostępu, które ułatwia deweloperom przeglądanie całego drzewa. Z tego artykułu dowiesz się, jak tworzyć takie drzewo i jak z niego korzystać.
Czym jest drzewo ułatwień dostępu?
Technologie wspomagające, takie jak czytniki ekranu, korzystają z interfejsu API ułatwień dostępu w Chromium do interakcji z treściami internetowymi. Podstawowym modelem tego interfejsu API jest drzewo ułatwień dostępu: drzewo obiektów ułatwień dostępu, które technologia wspomagająca może przeszukiwać pod kątem atrybutów i właściwości oraz wykonywać na nich działania. Deweloperzy stron internetowych kształtują drzewo ułatwień i manipulują nim głównie za pomocą właściwości DOM, takich jak atrybuty ARIA dla HTML.
W Narzędziach deweloperskich w Chrome udostępniamy panel ułatwień dostępu, aby pomóc deweloperom zrozumieć, jak ich treści są wyświetlane w ramach technologii wspomagających. Gdy w wizualizacji drzewa DOM wybierzesz węzeł, w panelu wyświetlą się właściwości odpowiadającego mu węzła ułatwień dostępu wraz z informacjami o jego elementach nadrzędnych i bezpośrednich podrzędnych.
Jak powstaje drzewo?
Zanim przejdziemy do opisu tego, jak wygląda nowy widok pełnego drzewa w Narzędziach deweloperskich, krótko wyjaśnimy, czym jest drzewo ułatwień dostępu. Drzewo ułatwień dostępu jest pochodne od drzewa DOM. Struktura jest w przybliżeniu taka sama, ale uproszczona, aby usunąć węzły bez treści semantycznej, takie jak element <div> używany wyłącznie do stylizacji. Każdy węzeł w drzewie ma rolę, np. Button lub Heading, a często także nazwę, która może pochodzić z atrybutów ARIA lub być pochodną treści węzła. Jeśli spojrzymy na dokument HTML:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
W Chromium jest to renderowanie o nazwie Blink, które wywodzi się z wewnętrznego drzewa ułatwień dostępu w przybliżeniu w taki sposób:
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
Pamiętaj, że ta reprezentacja zawiera wiele zbędnych węzłów z rolą genericContainer, co pozornie jest sprzeczne z powyższym stwierdzeniem, że drzewo ułatwień dostępu jest uproszczonym pochodnym drzewa DOM. Większość z nich występuje jednak tylko w drzewie wewnętrznym i nie jest widoczna dla technologii wspomagających. Narzędzia deweloperskie zbierają informacje o dostępności bezpośrednio z procesu renderowania, więc to właśnie jest reprezentacja drzewa, którą obsługują.
Pełne drzewo ułatwień dostępu w Narzędziach deweloperskich
Nowe, pełne drzewo ułatwień dostępu zsynchronizowane z drzewem DOM, dzięki czemu deweloperzy mogą przełączać się między tymi dwoma drzewami. Mamy nadzieję, że nowe drzewo będzie bardziej przejrzyste, przydatne i łatwiejsze w użyciu.
Teraz, gdy już wiesz, jak działa drzewo ułatwień dostępu, możesz użyć Narzędzi deweloperskich, aby zobaczyć, jak wygląda nowy widok drzewa. Do wyświetlania drzewa służy ten dokument HTML z tytułem, nagłówkiem i 2 przyciskami.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Wcześniejsze widok drzewa umożliwiało tylko przeglądanie pojedynczego węzła i jego przodków.
Gdy teraz przełączysz nowe drzewo, zastąpi ono widok drzewa DOM i umożliwi Ci wyświetlenie pełnego drzewa ułatwień dostępu na stronie:
Lazy tree
Aby zapewnić wydajność drzewa nawet w przypadku większych witryn, jest ono tworzone w ramach front-endu w miarę eksplorowania. Gdy węzeł zostanie rozwinięty w drzewie, jego podrzędne węzły są pobierane za pomocą protokołu Chrome DevTools (CDP), a drzewo jest ponownie tworzone.
Live
Nowy widok drzewa jest aktywny i dynamicznie aktualizuje się, jeśli drzewo ułatwień dostępu zmieni się w renderze. Wykorzystuje te same mechanizmy, które powiadamią technologię wspomagającą o zmianach w drzewie, i wykorzystuje to do emitowania zdarzeń do interfejsu Narzędzi deweloperskich z aktualnymi węzłami. W praktyce backend CDP sprawdza, czy w drzewie zaszły jakieś zmiany, śledzi, które węzły zostały już zapytane, i wysyła zdarzenia do interfejsu DevTools, jeśli którykolwiek z tych węzłów ulegnie zmianie.
The tale of many trees
Z opisu drzewa ułatwień dostępu dowiesz się, jak Blink tworzy drzewo ułatwień dostępu dla renderowanego DOM-u, a DevTools pobiera to drzewo za pomocą CDP. To prawda, ale w tym opisie pominęliśmy pewne komplikacje. W rzeczywistości istnieje wiele różnych sposobów na korzystanie z drzewa ułatwień dostępu w Chromium. Podczas projektowania nowego widoku drzewa w Narzędziach dla deweloperów musieliśmy podjąć pewne decyzje dotyczące tego, które wewnętrzne funkcje dostępności w Chromium chcemy udostępnić.
Platformy
Każda platforma ma inny interfejs API ułatwień dostępu. Chociaż kształt drzewa jest taki sam na wszystkich platformach, interfejs API do interakcji z drzewem jest inny, a nazwy atrybutów mogą się różnić. Narzędzia deweloperskie wyświetlają wewnętrzne drzewo Chromium, w którym role i atrybuty zwykle odpowiadają tym zdefiniowanym w specyfikacji ARIA.
Wiele ramek i izolacja witryn
Chromium nie tylko umieszcza zawartość każdej karty w różnych procesach renderowania, ale też oddziela dokumenty między witrynami w różnych procesach renderowania, więc musimy łączyć się z każdym dokumentem podrzędnym spoza procesu osobno przez CDP i pobierać jego drzewo ułatwień dostępu. Następnie zszyjemy te poddrzewa na poziomie interfejsu, aby stworzyć iluzję jednego spójnego drzewa, mimo że znajdują się one w różnych procesach renderowania w Chromium.
Ignorowane i nieciekawe węzły
Niektóre węzły są domyślnie ukryte: węzły ignorowane i węzły z rolą „generic” bez nazwy. Te węzły nie mają znaczenia semantycznego, a w przypadku węzłów ignorowanych nie są widoczne dla technologii wspomagających. Ukrywamy te węzły, aby nie zaśmiecać widoku drzewa. W przeciwnym razie drzewo ułatwień dostępu dla większości stron internetowych wyglądałoby tak:
Oznacza to, że musimy utworzyć jeszcze jedno drzewo oprócz tego, które jest dostępne na zapleczu. Załóżmy na przykład, że mamy węzły A, B, C i X, gdzie A ma węzły podrzędne X i B, a X ma węzeł podrzędny C. Jeśli węzeł X jest pomijany, usuwamy go z drzewa i zamiast tego tworzymy drzewo, w którym węzeł C jest potomkiem węzła A.
Na interfejsie tworzymy pełne drzewo, w tym pomijane węzły, i usuwanie zbędących wykonujemy dopiero przed ich renderowaniem. Robimy to z 2 powodów:
- Ułatwia to obsługę aktualizacji węzłów z poziomu backendu, ponieważ na obu punktach końcowych mamy tę samą strukturę drzewa. Jeśli na przykład usuniemy węzeł B, otrzymamy aktualizację węzła X (ponieważ jego podrzędne się zmieniły), ale gdybyśmy go przycięli, trudno byłoby nam ustalić, co należy zaktualizować.
- Zapewnia, że wszystkie węzły DOM mają odpowiedni węzeł ułatwień dostępu. Gdy drzewo jest włączone, wybieramy węzeł odpowiadający węzłowi wybranemu w drzewie DOM. Jeśli w przypadku poprzedniego przykładu użytkownik przełączy drzewo, gdy wybrany jest węzeł DOM odpowiadający X, wprowadzimy X między węzłami A i B i wybierzemy X w drzewie. Dzięki temu użytkownik może sprawdzić węzeł ułatwień dostępu we wszystkich węzłach DOM i sprawdzić, dlaczego węzeł jest ignorowany.
Przyszłe pomysły
Wprowadzenie nowego drzewa ułatwień dostępności to dopiero początek. Mamy kilka pomysłów na przyszłe projekty, które moglibyśmy opracować na podstawie nowego widoku, ale chętnie też poznamy Twoją opinię.
Filtrowanie alternatywne
Jak wyjaśniliśmy powyżej, obecnie odfiltrowujemy węzły, które uznajemy za nieciekawe. Możemy udostępnić sposób na wyłączenie tego zachowania i wyświetlanie wszystkich węzłów lub alternatywne filtrowanie, np. Pokaż węzły orientacyjne lub Pokaż nagłówki.
Zaznacz problemy związane z funkcjami ułatwień dostępu
Moglibyśmy uwzględnić w drzewie analizę „sprawdzonych metod ułatwień dostępu” i wyróżnić problemy z ułatwieniami dostępu bezpośrednio w problematycznych węzłach.
Wyświetlanie działań związanych z ułatwieniami dostępu w Narzędziach deweloperskich
Drzewo, które obecnie wyświetlamy, jest całkowicie jednokierunkowe: pozwala nam ono poznać informacje, które są przekazywane do technologii wspomagających podczas przeglądania konkretnej strony internetowej. Działania dotyczące ułatwień dostępu umożliwiają komunikację w drugim kierunku: pozwalają technologiom wspomagającym na działanie w ramach prezentowanego interfejsu użytkownika. Moglibyśmy wyświetlać takie działania w DevTools, aby umożliwić „klikanie”, przewijanie lub zmianę wartości na stronie za pomocą interfejsu API dostępnego dla technologii wspomagających.