W Narzędziach deweloperskich w Chrome wprowadzamy pełne drzewo ułatwień dostępu, które ułatwi programistom zapoznanie się z całym drzewem. Z tego posta dowiesz się, jak tworzy się to drzewo i jak używać go w swojej pracy.
Czym jest drzewo ułatwień dostępu?
Technologie wspomagające osoby z niepełnosprawnością, takie jak czytniki ekranu, używają interfejsu Accessibility API 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 asystująca może wysyłać zapytania o atrybuty i właściwości oraz wykonywać na nich działania. Programiści stron internetowych kształtują drzewo ułatwień dostępu i manipulują nim głównie za pomocą właściwości DOM, takich jak atrybuty ARIA dla języka HTML.
W Narzędziach deweloperskich w Chrome udostępniamy panel ułatwień dostępu, który pomaga deweloperom zrozumieć, w jaki sposób ich treści są podatne na technologię wspomagającą osoby z niepełnosprawnością. Oznacza to, że po wybraniu węzła w przeglądarce drzewa DOM w panelu wyświetlane są właściwości odpowiedniego węzła ułatwień dostępu wraz z widokiem jego elementów nadrzędnych i bezpośrednich węzłów podrzędnych.
Jak tworzy się drzewo?
Zanim przejdziemy do tego, jak wygląda nowy pełny widok drzewa w Narzędziach deweloperskich, przyjrzyjmy się pokrótce tym, czym jest drzewo ułatwień dostępu. Drzewo ułatwień dostępu jest pochodną drzewa DOM. Jego struktura jest mniej więcej taka sama, ale została uproszczona w celu usunięcia węzłów bez zawartości semantycznej, np. elementu <div> służącego wyłącznie do określania stylu. Każdy węzeł w drzewie ma rolę taką jak Button lub Heading i często jest nazwą, która może pochodzić z atrybutów ARIA lub z zawartości węzła. Patrząc 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'
Zwróć uwagę, że ta reprezentacja zawiera wiele zbędnych węzłów z rolą genericContainer, co prawdopodobnie jest sprzeczne z powyższym stwierdzeniem, że drzewo ułatwień dostępu jest uproszczoną pochodną drzewa DOM. Mimo to większość z tych węzłów występuje tylko w wewnętrznym drzewie i nie byłaby narażona na technologię wspomagającą osoby z niepełnosprawnością. Narzędzia deweloperskie zbierają informacje o ułatwieniach dostępu bezpośrednio z procesu renderowania, więc tę reprezentację obsługuje Narzędzia deweloperskie.
Pełne drzewo ułatwień dostępu w Narzędziach deweloperskich
Nowe, pełne drzewo ułatwień dostępu zsynchronizowane z drzewem DOM, umożliwiając programistom przełączanie się między 2 drzewami. Mamy nadzieję, że nowe drzewo będzie łatwiejsze w eksploracji, użyteczniejsze i łatwiejsze w użyciu.
Wiesz już, jak działa drzewo ułatwień dostępu, więc możesz użyć Narzędzi deweloperskich, aby zobaczyć, jak wygląda nowy widok drzewa. Następujący dokument HTML z tytułem, nagłówkiem i 2 przyciskami służy do pokazania drzewa.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Poprzedni widok drzewa umożliwiłby zbadanie tylko jednego węzła i jego elementów nadrzędnych.
Teraz gdy przełączysz nowe drzewo, zastąpi ono widok drzewa DOM i umożliwi wyświetlenie pełnego drzewa ułatwień dostępu dla danej strony:
Budowa leniwego drzew
Aby drzewo było wydajne, nawet w większych witrynach, jest leniwie konstruowane w interfejsie podczas badania. Gdy węzeł w drzewie zostanie rozwinięty, jego elementy podrzędne zostaną pobrane przy użyciu protokołu Chrome DevTools Protocol (CDP) i drzewo zostanie utworzone ponownie.
Transmisje na żywo
Nowy widok drzewa jest aktywny i dynamicznie aktualizowany, jeśli w mechanizmie renderowania zmieni się drzewo ułatwień dostępu. Łączy się z tą samą mechaniką, która powiadamia technologię wspomagającą o zmianach w drzewie, i używa jej do wysyłania zdarzeń do frontendu Narzędzi deweloperskich ze zaktualizowanymi węzłami. W praktyce backend CDP nasłuchuje aktualizacji drzewa, śledzi, które węzły zostały wysłane wcześniej i wysyła zdarzenia do frontendu Narzędzi deweloperskich, jeśli którykolwiek z tych węzłów się zmieni.
Opowieść o wielu drzewach
Z opisu drzewa ułatwień dostępu dowiedzieliśmy się, jak Blink tworzy drzewo ułatwień dostępu dla renderowanego elementu DOM, a Narzędzia deweloperskie pobierają to drzewo przez CDP. To prawda, ale w tym opisie pominęliśmy kilka komplikacji. W rzeczywistości jest sporo różnych sposobów na korzystanie z drzewa ułatwień dostępu w Chromium. Podczas projektowania nowego widoku drzewa na potrzeby Narzędzi deweloperskich wprowadziliśmy kilka opcji w zakresie ułatwień dostępu w Chromium, które chcieliśmy pokazać.
Platformy
Każda platforma ma inny interfejs API ułatwień dostępu i 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ć. W Narzędziach deweloperskich widać wewnętrzne drzewo Chromium, w którym role i atrybuty są zgodne z tymi zdefiniowanymi w specyfikacji ARIA.
Wiele ramek i izolacja witryn
Chromium nie tylko umieszcza zawartość każdej karty w różnych procesach renderowania, ale izoluje dokumenty z różnych stron w ramach różnych procesów renderowania, więc musimy osobno łączyć się z każdym dokumentem podrzędnym poza procesem za pomocą CDP i pobierać drzewo ułatwień dostępu. Następnie łączysz te poddrzewa z frontendu, aby uzyskać iluzję jednego, spójnego drzewa, które funkcjonuje w różnych procesach renderowania w Chromium.
Ignorowane i nieciekawe węzły
Domyślnie ukrywamy niektóre węzły: zignorowane i węzły o roli „ogólne” bez nazwy. Węzły te nie mają znaczenia semantycznego, a w przypadku węzłów zignorowanych nie są narażone na działanie technologii wspomagającej osoby z niepełnosprawnością. Te węzły są ukrywane, by nie zaśmiecały widoku drzewa. W przeciwnym razie drzewo ułatwień dostępu w przypadku większości stron internetowych wyglądałoby mniej więcej tak:
Pamiętaj jednak, że musimy utworzyć jeszcze inne drzewo niż to, które jest dostępne w backendzie. Załóżmy na przykład, że mamy węzły A, B, C i X, w których A ma elementy podrzędne X i B, a X – podrzędne C. Jeśli X jest węzłem zignorowanym, usuwamy z drzewa X i zamiast tego tworzymy drzewo, w którym C jest elementem podrzędnym względem drzewa A.
W frontendzie tworzymy pełne drzewo obejmujące ignorowane węzły i przycinamy je tylko tuż przed wyrenderowaniem węzłów. Dzieje się tak z dwóch powodów:
- Ułatwia to obsługę aktualizacji węzłów z backendu, ponieważ w obu punktach końcowych wygląda identyczna struktura drzewa. Jeśli na przykład węzeł B zostanie usunięty w przykładzie, otrzymamy aktualizację węzła X (ponieważ zmieniły się jego elementy podrzędne), ale gdybyśmy go przycięli, mielibyśmy problemy z określeniem, co trzeba zaktualizować.
- Dzięki temu wszystkie węzły DOM mają odpowiedni węzeł ułatwień dostępu. Po przełączeniu drzewa wybieramy węzeł odpowiadający węzłowi wybranemu obecnie w drzewie DOM. W poprzednim przykładzie, jeśli użytkownik przełącza drzewo, gdy wybrany jest węzeł DOM odpowiadający węzełowi X, wstrzykujemy X między węzłami A i B i wybieramy X w drzewie. Dzięki temu użytkownik może sprawdzić węzeł ułatwień dostępu wszystkich węzłów DOM i ustalić, dlaczego jest on ignorowany.
Przyszłe pomysły
Uruchomienie nowego drzewa ułatwień dostępu to dopiero początek. Mamy kilka pomysłów na kolejne projekty, które moglibyśmy wykorzystać w nowej wersji widoku danych, ale chętnie też posłuchamy Waszych opinii.
Alternatywne filtry
Jak wyjaśniliśmy powyżej, obecnie odfiltrowujemy węzły, które są nieciekawe. Możemy umożliwić wyłączenie tego działania i wyświetlenie wszystkich węzłów lub udostępnienie alternatywnych filtrów, takich jak Pokaż węzły punktów orientacyjnych lub Pokaż nagłówki.
Wyróżnianie problemów związanych z ułatwieniami dostępu
Możemy dołączyć analizę „sprawdzonych metod dotyczących ułatwień dostępu” do drzewa i wyróżnić problemy z ułatwieniami dostępu bezpośrednio w węzłach naruszających zasady.
Wyświetlanie działań związanych z ułatwieniami dostępu w Narzędziach deweloperskich
Drzewo, które obecnie pokazujemy, działa tylko w jedną stronę – podczas przeglądania konkretnej strony możemy się zorientować, jakie informacje byłyby przekazywane do technologii wspomagającej osoby z niepełnosprawnością. Działania związane z ułatwieniami dostępu odzwierciedlają komunikację w innym kierunku – umożliwiają technologii wspomagającej działanie w przedstawionym interfejsie. Możemy wyświetlać takie działania w Narzędziach deweloperskich, aby umożliwić takie działania jak „klikanie”, przewijanie lub zmienianie wartości na stronie za pomocą interfejsu API dostępnego dla technologii wspomagających.