Pełne drzewo ułatwień dostępu w Narzędziach deweloperskich w Chrome

Johan Bay
Johan Bay

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.

Okienko ułatwień dostępu w Narzędziach deweloperskich w Chrome.

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.

Poprzedni widok drzewa w Narzędziach deweloperskich.

Teraz po przełączeniu nowego drzewa zastępuje ono widok drzewa DOM i pozwala zobaczyć pełne drzewo ułatwień dostępu dla strony:

Nowy widok drzewa w Narzędziach deweloperskich.

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.

Nowe drzewo ułatwień dostępu przedstawiające wynik w przypadku dużej strony.

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:

Nowy widok drzewa ze wszystkimi węzłami.

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.

Schemat pokazujący, jak przycinamy drzewo.

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ą.