Ułatwienia dostępu w Chrome DevTools

Spędzam dużo czasu w DevTools i robiąc to, poznałem niektóre z bardziej „ukrytych” funkcji DevTools i chciałbym podzielić się z Tobą niektórymi z nich w tym artykule — w szczególności dotyczącymi dostępności.

W tym artykule używam Google Chrome, ponieważ jest to przeglądarka, której używam i z którą czuję się komfortowo. Biorąc to pod uwagę, Firefox, Safari i Edge poczyniły wielkie postępy w swoich narzędziach programistycznych i na pewno mają własne świetne funkcje związane z ułatwieniami dostępu.

Być może znasz już DevTools, ale oto krótkie przypomnienie, jak sprawdzić element na stronie internetowej:

1. Otwórz interesującą Cię stronę internetową w Google Chrome
2. Użyj skrótu Cmd + Shift + C ( Ctrl + Shift + C w systemie Windows)
3. Twój wskaźnik jest w trybie inspekcji elementu, śmiało kliknij element na stronie

Tak po prostu otworzyłeś DevTools i zacząłeś sprawdzać elementy. Poszczególne panele odpowiadają różnym funkcjom, np. debugowaniu JavaScript, wydajności i tak dalej.

Funkcje związane z ułatwieniami dostępu są rozproszone po całym świecie, więc przyjrzyjmy się, co robią, gdzie mieszkają i jak z nich korzystać.

Współczynnik kontrastu

Jest to funkcja pozwalająca sprawdzić, czy sprawdzany tekst ma zadowalający kontrast kolorów z kolorem tła.

Zazwyczaj wysoki poziom kontrastu między kolorem tekstu a podstawowym kolorem tła oznacza bardziej czytelny tekst dla użytkowników o różnych umiejętnościach. Ponadto pomaga wspierać użytkowników czytających Twój tekst w różnych warunkach środowiskowych, rozważ te przykłady, które mogą mieć wpływ na to, jak użytkownik postrzega czytelność tekstu:

• Patrzenie na ekran na zewnątrz przy dużej ilości światła słonecznego
• Urządzenie mobilne całkowicie obniżyło jasność ekranu, aby wydłużyć czas pracy baterii

„Zamiarem jest zapewnienie wystarczającego kontrastu między tekstem a jego tłem, aby mogły go czytać osoby o umiarkowanie słabym wzroku”.

— Zrozumienie kryterium sukcesu 1.4.3: Kontrast (minimum)

Użycie narzędzia współczynnika kontrastu może dać nam natychmiastową odpowiedź tak/nie na pytanie: czy ten tekst spełnia normę minimalnego kontrastu. Korzystanie z tego narzędzia może pomóc wpłynąć na projekt i schemat kolorów Twojej witryny, co może prowadzić do bardziej czytelnych treści dla użytkowników niedowidzących.

Dostępna w narzędziu próbnika kolorów funkcja współczynnika kontrastu może informować o spełnieniu minimalnego wymagania dotyczącego kontrastu. Aby uzyskać dostęp do tej funkcji:

1. Sprawdź element tekstowy za pomocą DevTools
2. Znajdź właściwość koloru w panelu Style i kliknij mały kolorowy kwadrat, aby wyświetlić narzędzie próbnika kolorów
3. Kliknij tekst, który mówi „Współczynnik kontrastu”, który zawiera dalsze informacje na ten temat

Trzy wskaźniki reprezentują:

• Twój aktualny współczynnik kontrastu
• Minimalny współczynnik kontrastu (AA)
• Zwiększony współczynnik kontrastu (AAA)

Jako ćwiczenie dla siebie: przeciągnij okrągły selektor kolorów po spektrum kolorów i obserwuj punkty, w których minimalny kontrast i zwiększone współczynniki kontrastu są spełnione.

Ta funkcja może być również zgłoszona w raporcie Lighthouse Report, omówionym w sekcji Lighthouse tego artykułu.

Inspektor dostępności

Odnosi się to do panelu DevTools, który umożliwia przeglądanie różnych właściwości dostępności i informacji ARIA dla węzłów DOM.

ARIA odnosi się do zbioru właściwości, zwykle używanych w HTML, co z kolei sprawia, że ​​Twoja witryna jest bardziej dostępna dla osób o różnych umiejętnościach. Absolutnie warto z niego korzystać na własnych stronach internetowych, ale wymaga to zrozumienia podstaw dostępności sieci, aby upewnić się, że korzystasz z niej w sposób, który pomoże Twoim użytkownikom.

Rozważmy na przykład następujący fragment kodu HTML:

 <p class="alert" role="alert"> That transaction was successful </p>

Urządzenie pomocnicze, takie jak czytnik ekranu, może używać właściwości role="alert" , aby ogłaszać takie informacje użytkownikowi. Okienko Dostępność w DevTools może wybrać taką właściwość ( role ) i przedstawić ją Tobie, aby było jasne, jakie właściwości związane z dostępnością ma dany element.

Weryfikacja informacji wyświetlanych w tym okienku może pomóc w odpowiedzi na pytanie: „Czy koduję dostępność nieprawidłowo”, niezależnie od tego, czy jest to składniowe, czy strukturalne, pamiętaj tylko, że stosowanie technik ułatwień dostępu z poprawną składnią i posiadanie dostępnej witryny internetowej to dwa różne rzeczy!

Aby zacząć z tego korzystać, możesz otworzyć okienko Dostępność ze sprawdzanym elementem:

1. Sprawdź dowolny element na stronie, np. hiperłącze lub pole wyszukiwania
2. Otwórz panel Dostępność, który znajduje się w panelu Elementy
   Dodatkowa wskazówka : zamiast szukać okienka (domyślnie nie jest ono otwarte), wyszukuję „Pokaż dostępność” w menu poleceń ( Cmd + Shift + P ).

Znajdziesz tutaj wiele informacji, takich jak:

• Drzewo dostępności (podzbiór drzewa DOM)
• Atrybuty ARIA
• Obliczone właściwości dostępności (np. czy można się skupić, czy można to edytować, czy przechodzi walidację formularza)

W zależności od kontrolowanego elementu, niektóre z tych informacji mogą nie mieć zastosowania, na przykład być może element zgodnie z prawem nie potrzebuje atrybutów ARIA.

Podobnie jak w przypadku większości funkcji DevTools, to, co widzisz w tym panelu, jest „na żywo” — zmiany wprowadzone w drzewie DOM panelu Elements są natychmiast odzwierciedlane z powrotem w tym panelu, co ułatwia na przykład poprawianie błędnie napisanego atrybutu ARIA.

Jeśli masz pewność, że korzystasz z ułatwień dostępu, prawdopodobnie dlatego, że używasz alternatywnego narzędzia do automatycznego testowania, takiego jak axe, możesz nie używać tego okienka zbyt często i to jest w porządku.

Jeśli chcesz dowiedzieć się więcej podczas przeglądania rzeczywistych witryn, przygotowałem 14-minutowy film na temat debugowania ułatwień dostępu za pomocą Chrome DevTools.

Latarnia morska

Lighthouse to zautomatyzowany program do sprawdzania witryn internetowych, który może skanować w poszukiwaniu najlepszych praktyk, dostępności, bezpieczeństwa i nie tylko.

Jeśli przeczytałeś trochę teorii dostępności i chcesz dowiedzieć się, jak skutecznie zastosować ją we własnej witrynie internetowej, jest to świetne narzędzie do użycia, ponieważ jest to dosłownie interfejs typu „wskaż i kliknij” — nie wymaga instalacji. Ponadto wszystkie audyty są bardzo instruktażowe, informujące o tym, co zawiodło i dlaczego coś zawiodło.

Postępowanie zgodnie z sugestiami tego narzędzia prawie na pewno pomoże poprawić dostępność Twojej witryny.

Podczas sprawdzania bezpieczeństwa, ogólnych najlepszych praktyk internetowych, pomocna jest wydajność. Skupmy się na tym, jak przeprowadzić audyt dostępności w Lighthouse:

1. Przejdź do panelu Lighthouse w DevTools
2. Usuń zaznaczenie wszystkich kategorii, ale pozostaw zaznaczoną opcję „Ułatwienia dostępu”
3. Kliknij „Wygeneruj raport”
4. W otrzymanym raporcie klikaj różne sugestie, aby dowiedzieć się o nich więcej

Jeśli chcesz dowiedzieć się więcej o dostępności (z pewnością to robię!), przeklikanie się nie powiodło się, ale nawet pomyślnie przeszły audyty, to świetny sposób na naukę, ponieważ prawie każdy audyt prowadzi do dedykowanej dokumentacji dla programistów internetowych na temat samego audytu i dlaczego jest to ważne.

W większości strony z dokumentacją audytu są niezwykle zwięzłe i bardzo je polecam. Przyjrzyjmy się dokumentacji audytu, aby upewnić się, że element <title> jest obecny. Określa:

• Jak nie udaje się audyt tytułu Lighthouse
• Jak dodać tytuł
• Wskazówki dotyczące tworzenia świetnych tytułów
• Przykład tytułu, którego nie należy używać, wraz z tytułem, którego warto użyć

A w przypadku dokumentacji tytułowej dokumentu wyjaśnienie tych 4 punktów zajęło zaledwie 300 słów.

Warto zauważyć, że w przeciwieństwie do panelu Dostępność, audyty latarni są domyślnie bardzo instruktażowe, dzięki czemu panel Lighthouse jest doskonałym miejscem do odwiedzenia, gdy dopiero zaczynasz.

Gdy staniesz się bardziej zaawansowany w tworzeniu dostępnych stron, możesz odejść od wstępnie zdefiniowanych audytów i spędzać więcej czasu w okienku ułatwień dostępu.

“

Naśladuj braki wzroku

Jest to funkcja DevTools, która pozwala zastosować wady wzroku, takie jak niewyraźne widzenie, na bieżącej stronie.

„Na całym świecie około 1 na 12 mężczyzn (8%) i 1 na 200 kobiet ma zaburzenia widzenia kolorów”.

— Wymagania dostępności dla osób niedowidzących

Użyj tej funkcji, aby upewnić się, że Twoja witryna spełnia potrzeby użytkowników. Jeśli Twoja witryna wyświetla ważny obraz, może się okazać, że ten obraz jest trudny do zrozumienia dla osoby z tritanopią (upośledzone widzenie w kolorze niebieskim i żółtym), a nawet jest trudny do zrozumienia dla osoby z niewyraźnym widzeniem.

„Niektóre słabą ostrość wzroku można skorygować za pomocą okularów, soczewek kontaktowych lub operacji — a niektóre nie. Dlatego niektórzy ludzie będą mieć niewyraźne widzenie (słabą ostrość wzroku) bez względu na wszystko”.

— Wymagania dostępności dla osób niedowidzących

Na przykład w przypadku obrazu może się okazać, że jest dostępny do pobrania obraz o wyższej rozdzielczości podczas emulacji niewyraźnego widzenia za pomocą DevTools, a nie użytkownik z niewyraźnym widzeniem, który może użyć i z kolei zrozumieć, co pokazuje obraz. Będzie to wymagało pewnych umiejętności rozwiązywania problemów opartych na projektowaniu/UX — być może od Ciebie/Twoich współpracowników — ale może to być różnica między zaspokajaniem potrzeb użytkowników lub ich niespełnieniem.

️ Uwaga : Poniższy obraz jest częściowo zamazany, aby zademonstrować funkcję emulacji „Niewyraźnej wizji” w DevTools.

Możesz wypróbować tę funkcję, wykonując następujące czynności:

1. Otwórz menu poleceń ( Cmd + Shift + P lub Ctrl + Shift + P w systemie Windows)
2. Wyszukaj i wybierz „Pokaż renderowanie”
3. Wybierz wadę wzroku, taką jak „Niewyraźne widzenie” z sekcji Emuluj wady wzroku w okienku renderowania.

Oto kilka przykładów wad wzroku, które można zastosować za pomocą DevTools:

• Rozmazany obraz
  Gdzie wizja jest mniej precyzyjna
• Protanopia
  Ślepota barw wynikająca z niewrażliwości na światło czerwone
• Tritanopia
  Zaburzenia widzenia niebieskiego i żółtego

Funkcje emulacji, takie jak ta, nie będą w pełni wyjaśniać subtelnych różnic w tym, jak takie braki objawiają się u osób, nie mówiąc już o szerokim zakresie wad wzroku. Mając to na uwadze, ta funkcja może nadal pomóc nam jako programistom internetowym w zrozumieniu i poprawie dostępności naszych stron.

Sprawdź etykietkę elementu

Ta funkcja odnosi się do ulepszonej podpowiedzi, która teraz wyświetla informacje związane z ułatwieniami dostępu podczas korzystania z funkcji „Sprawdź element”. Jest to subtelna, ale wciąż bardzo ważna funkcja, ponieważ w mgnieniu oka informuje o dostępności elementów.

Mówię, że jest to ważne, ponieważ w przypadku czterech innych funkcji wymienionych w tym artykule wymagają one celowego działania z naszej strony (kliknij przycisk generowania raportu, przejdź do okienka Dostępność, otwórz narzędzie do wybierania kolorów itd.). Jednak w przypadku tej funkcji pojawia się w jednym z najczęstszych działań DevTools podczas sprawdzania elementu.

Jako krótkie wyzwanie dla siebie, spójrz na poniższe dwa zrzuty ekranu. Demonstrują ulepszoną etykietkę narzędzia DevTools Inspect Element, która ma teraz sekcję ułatwień dostępu. Czy możesz określić, co reprezentują właściwości w tej sekcji?

Możesz zauważyć, że są to dokładnie te same informacje, które widzieliśmy wcześniej — w ramach sekcji Współczynnik kontrastu i Inspektora dostępności. Są to te same właściwości, ale uwidocznione w (miejmy nadzieję) prostszy sposób.

Uwaga: W tej podpowiedzi (ostatnim elemencie) znajduje się również właściwość „Możliwa do skupienia się na klawiaturze”. Wskazuje, czy element jest dostępny z klawiatury. Jeśli to prawda, zazwyczaj sugeruje to, że dany element można skoncentrować, naciskając na niego tabulator.

Sposób, w jaki to widzę: Inspect Element jest niezwykle powszechnym przypadkiem użycia w przeglądarce DevTools, więc wybór przydatnych właściwości związanych z ułatwieniami dostępu dla podpowiedzi Inspect Element może służyć jako pomocne przypomnienie i skłonić nas jako programistów internetowych do dalszego zbadania i zapewnienia to, co budujemy, jest dostępne.

Wniosek

Na przestrzeni lat narzędzia dla programistów internetowych poprawiające dostępność szybko się poprawiły, ale czasami narzędzia te są ukryte lub po prostu nieudokumentowane. W tym artykule omówiliśmy niektóre z tych funkcji, które, miejmy nadzieję, mogą nam pomóc w stosowaniu najlepszych praktyk w zakresie ułatwień dostępu do tworzonych przez nas witryn.

Oto przypomnienie tego, co omówiliśmy:

• Współczynnik kontrastu
  Sprawdź, czy sprawdzany element tekstowy ma zadowalający współczynnik kontrastu.
• Inspektor dostępności
  Przeglądaj różne właściwości ułatwień dostępu i informacje ARIA.
• Latarnia morska
  Narzędzie do sprawdzania witryn internetowych, które obejmuje najlepsze praktyki, dostępność i nie tylko.
• Emuluj wady wzroku
  Narzędzie do nanoszenia wad wzroku (takich jak niewyraźne widzenie) na stronie.
• Sprawdź etykietkę elementu
  Ulepszona etykietka narzędzi, która wyświetla informacje dotyczące ułatwień dostępu.

Tworzę listę mailingową Dev Tips, jeśli chcesz być na bieżąco z ponad 200 wskazówkami dotyczącymi tworzenia stron internetowych! Na moim Twitterze zamieszczam również mnóstwo dodatkowych materiałów do tworzenia stron internetowych.

Na razie to wszystko! Dziękuję za przeczytanie.