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 technologie wspomagające osoby z niepełnosprawnością mogą 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 w kodzie HTML.
W Narzędziach deweloperskich w Chrome znajduje się panel ułatwień dostępu, który pomaga deweloperom zrozumieć, jak ich treści są narażone na kontakt z technologią wspomagającą osoby z niepełnosprawnością. Po wybraniu węzła w przeglądarce drzewa DOM właściwości odpowiedniego węzła ułatwień dostępu są wyświetlane w panelu razem z widokiem elementów nadrzędnych węzła i jego najbliższych elementów podrzędnych.
Jak tworzone jest drzewo?
Zanim przejdziemy do prezentacji nowego pełnego widoku drzewa w Narzędziach deweloperskich, pokrótce omówmy w skrócie, 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 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ę, taką jak Button lub Heading, i często nazwę, która może pochodzić z atrybutów ARIA lub pochodzić z zawartoś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'
Ta reprezentacja zawiera wiele nadmiarowych węzłów z rolą genericContainer, co wydaje się 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 systemie wewnętrznym i nie podlega technologii wspomagającej osoby z niepełnosprawnością. Ponieważ Narzędzia deweloperskie zbierają informacje o ułatwieniach dostępu bezpośrednio z procesu renderowania, obsługa ta odbywa się za pomocą drzewa.
Drzewo pełnych ułatwień dostępu w Narzędziach deweloperskich
Nowe, pełne drzewo ułatwień dostępu jest zsynchronizowane z drzewem DOM, dzięki czemu deweloperzy mogą przełączać się między dwoma drzewami. Mamy nadzieję, że nowe drzewo będzie łatwiejsze do eksploracji, użyteczne i łatwiejsze w użyciu.
Wiesz już, jak działa drzewo ułatwień dostępu, więc możesz skorzystać z Narzędzi deweloperskich, aby zobaczyć, jak wygląda nowy widok drzewa. Drzewo zostało wyświetlone w następującym dokumencie HTML z tytułem, nagłówkiem i dwoma przyciskami.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Poprzedni widok drzewa umożliwiałby zbadanie tylko jednego węzła i jego elementów nadrzędnych.
Teraz po przełączeniu nowego drzewa zastępuje ono widok drzewa DOM i pozwala zobaczyć pełne drzewo ułatwień dostępu dla strony:
Budowa leniwego drzewa
Aby drzewo było wydajne nawet w przypadku większych witryn, jest ono tworzone leniwie we frontendzie podczas jego analizy. Po rozwinięciu węzła w drzewie jego elementy podrzędne są pobierane za pomocą protokołu CDP (Chrome DevTools Protocol), a drzewo jest odbudowywane.
Live
Nowy widok drzewa jest aktywny i dynamicznie aktualizowany, gdy drzewo ułatwień dostępu zmieni się w mechanizmie renderowania. Wykorzystuje tę samą mechanikę, która powiadamia technologię wspomagającą o zmianach w drzewie, i wykorzystuje ją 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 już wysłane, i wysyła zdarzenia do frontendu Narzędzi deweloperskich, jeśli któryś z tych węzłów się zmieni.
Opowieść o wielu drzewach
W opisie drzewa ułatwień dostępu wiesz, jak Blink tworzy drzewo ułatwień dostępu dla renderowanego DOM, a Narzędzia deweloperskie pobierają to drzewo przez CDP. To prawda, ale w tym opisie pominęliśmy pewne widżety. W rzeczywistości jest wiele różnych sposobów korzystania 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 innym mechanizmie renderowania, ale izoluje dokumenty pochodzące z różnych witryn w różnych mechanizmach renderowania, dlatego musimy połączyć się z każdym dokumentem podrzędnym poza procesem oddzielnie przez CDP i pobrać jego drzewo ułatwień dostępu. Następnie łączymy te poddrzewa we frontendzie, aby stworzyć wrażenie jednego spójnego drzewa, choć funkcjonują one w różnych procesach renderowania w Chromium.
Ignorowane i nieciekawe węzły
Domyślnie ukrywamy niektóre węzły: ignorowane węzły i węzły z rolą „standardowe” 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. Gdyby tak nie było, drzewo ułatwień dostępu dla większości stron internetowych wyglądałoby mniej więcej tak:
Jednak w zasadzie oznacza to, ż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, gdzie A ma podrzędne X i B, a X ma podrzędny element C. Jeśli X jest ignorowanym węzłem, odcinamy X z drzewa i zamiast tego tworzymy drzewo, w którym C jest węzłem podrzędnym wobec A.
We frontendzie budujemy pełne drzewo obejmujące ignorowane węzły i przycinamy je tylko tuż przed wyrenderowaniem węzłów. Robimy to z dwóch powodów:
- Znacznie ułatwia to obsługę aktualizacji węzłów z backendu, ponieważ w obu punktach końcowych mamy tę samą strukturę drzewa. Jeśli na przykład w tym przykładzie węzeł B zostanie usunięty, otrzymamy aktualizację węzła X (ponieważ jego elementy podrzędne się zmieniły), ale w przypadku jego przycięcia trudno byłoby nam wymyślić, co zaktualizować.
- Zapewnia to, że 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 aktualnie wybranemu w drzewie DOM. Zatem 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. Umożliwia to użytkownikowi sprawdzenie węzła ułatwień dostępu we wszystkich węzłach DOM i ustalenie, dlaczego dany węzeł jest ignorowany.
Przyszłe pomysły
Uruchomienie nowego drzewa ułatwień dostępu to dopiero początek. Mamy kilka pomysłów na przyszłe projekty, które możemy wykorzystać w nowym widoku, ale chętnie przeczytamy też Twoją opinię.
Alternatywne filtry
Jak wyjaśniliśmy powyżej, obecnie odfiltrowujemy węzły, które są uznane za nieinteresujące. 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.
Wyróżnij problemy z a11jem
Możemy uwzględnić w tym drzewie analizę „sprawdzonych metod ułatwień dostępu” i wyróżnić problemy z ułatwieniami dostępu bezpośrednio w problemach z ułatwieniami dostępu.
Wyświetlanie działań związanych z ułatwieniami dostępu w Narzędziach deweloperskich
Drzewo, które obecnie pokazujemy, jest czysto jednokierunkowe: pozwala nam się zorientować, jakie informacje zostałyby dodane do technologii wspomagającej osoby z niepełnosprawnością podczas przeglądania konkretnej strony internetowej. Działania związane z ułatwieniami dostępu reprezentują komunikację z drugiej strony: pozwalają technologii wspomagającej osoby z niepełnosprawnością działać w przedstawionym 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ą.