W Narzędziach deweloperskich w Chrome wprowadzamy pełne drzewo ułatwień dostępu, które ułatwi deweloperom przeglądanie całego drzewa. Z tego posta dowiesz się, jak tworzy się to drzewo i jak z niego korzystać w pracy.
Czym jest drzewo ułatwień dostępu?
Technologie wspomagające, takie jak czytniki ekranu, używają 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 w HTML.
W Narzędziach deweloperskich w Chrome udostępniamy panel ułatwień dostępu, który pomaga deweloperom zrozumieć, jak ich treści są wyświetlane w przypadku technologii wspomagających. Gdy w podglądzie 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 rodzicach i bezpośrednich podrzędnych.
Jak tworzone jest 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. Jego struktura jest mniej więcej taka sama, ale uprościliśmy ją, aby usuwać węzły bez zawartości semantycznej, np. element <div> używany wyłącznie do określania stylu. 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>
Mechanizm renderowania w Chromium, o nazwie Blink, tworzy wewnętrzne drzewo ułatwień dostępu mniej więcej w ten 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. Ponieważ Narzędzia deweloperskie zbierają informacje o ułatwieniach dostępu bezpośrednio z procesu renderowania, obsługa ta odbywa się za pomocą drzewa.
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śniejsza wersja widoku drzewa umożliwiała eksplorowanie tylko jednego węzła i jego przodków.
Gdy teraz przełączysz nowe drzewo, zastąpi ono widok drzewa DOM i umożliwi wyświetlenie pełnego drzewa ułatwień dostępu na stronie:
Budowa drzewa o leniwej strukturze
Aby zapewnić wydajność drzewa nawet w przypadku większych witryn, jest ono tworzone w sposób leniwy na etapie 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 ona 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 deweloperskich wprowadziliśmy kilka opcji dotyczących ułatwień dostępu w Chromium.
Platformy
Każda platforma ma inny interfejs API ułatwień dostępu, a kształt drzewa jest taki sam na wszystkich platformach, interfejs API służący do interakcji z drzewem jest też inny, a nazwy atrybutów mogą się różnić. Narzędzia deweloperskie pokazują wewnętrzne drzewo Chromium, w którym role i atrybuty odpowiadają zwykle 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 i w przypadku węzłów ignorowanych nie są narażone na działanie technologii wspomagającej osoby z niepełnosprawnością. 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 węzeł 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 się zorientować, co należy zaktualizować.
- Zapewnia to, ż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. W poprzednim przykładzie: jeśli użytkownik przełączy drzewo, gdy wybrany jest węzeł DOM odpowiadający węzełowi X, wstrzykiwamy między węzłami A i B, a następnie wybieramy 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ępu 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 wyłączenia tego zachowania i wyświetlenie wszystkich węzłów lub udostępnić alternatywne filtry, takie jak Pokaż węzły punktów orientacyjnych 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 dostępnością 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 uzyskać ogólne pojęcie, jakie informacje będą 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 interfejsie. Możemy wyświetlić takie działania w Narzędziach deweloperskich, aby umożliwić wykonywanie działań takich jak „klikanie, przewijanie czy zmienianie wartości na stronie” za pomocą interfejsu API dostępnego dla technologii wspomagających osoby z niepełnosprawnością.