JavaScript

JavaScript odgrywa ważną rolę we wszystkich naszych działaniach – od mniejszych komponentów dynamicznych po pełne usługi oparte na platformie JavaScript, takiej jak React czy Angular.

To używanie (lub nadużywanie) JavaScriptu ma wiele niepokojących trendów, takich jak długi czas wczytywania ze względu na duże ilości kodu, stosowanie niesemantycznych elementów HTML oraz wstrzykiwanie kodu HTML i CSS za pomocą JavaScriptu. Być może nie do końca wiecie, jak ułatwienia dostępu mieszczą się w każdym z tych elementów.

Kod JavaScript może mieć ogromny wpływ na dostępność witryny. W tym module omówimy ogólne wzorce ułatwień dostępu, które są wzbogacane przez JavaScript, a także rozwiązania problemów z ułatwieniami dostępu, które występują podczas korzystania z ramek JavaScript.

Zdarzenia aktywujące

Zdarzenia JavaScript umożliwiają użytkownikom interakcję z treścią w internecie i wykonywanie określonych działań. Wiele osób, na przykład użytkownicy czytników ekranu, osoby z zaburzeniami koordynacji ruchów precyzyjnych, osoby bez myszy lub trackpada, korzystają z klawiatury, aby wchodzić w interakcje z internetem. Do działań JavaScript należy koniecznie dodać obsługę klawiatury, ponieważ dotyczy ona wszystkich tych użytkowników.

Przyjrzyjmy się zdarzeniu kliknięcia. Jeśli zdarzenie onClick() jest używane w przypadku elementu semantycznego HTML, np. <button> lub <a>, obejmuje ono naturalnie zarówno funkcję myszy, jak i klawiatury. Jednak funkcje klawiatury nie są automatycznie stosowane, gdy do niesemantycznego elementu, takiego jak ogólny element <div>, dodasz zdarzenie onClick().

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Wyświetl podgląd tego porównania w CodePen.

Jeśli do wywołania zdarzenia używasz elementu niesemantycznego, musisz dodać zdarzenie keydown/keyup, aby wykryć naciśnięcie klawisza Enter lub Spacja. Dodawanie zdarzeń wyzwalających do elementów niesemantycznych jest często pomijane. Niestety, jeśli o tym zapomnisz, komponent będzie dostępny tylko za pomocą myszy. Użytkownicy korzystający tylko z klawiatury nie mają dostępu do powiązanych działań.

Tytuły stron

Jak już wiesz z modułu Dokumenty, tytuł strony jest niezbędny dla użytkowników czytników ekranu. Pokazuje użytkownikom, na której stronie się znajdują i czy przeszli na nową stronę.

Jeśli używasz platformy JavaScript, musisz zastanowić się, jak chcesz obsługiwać tytuły stron. Jest to szczególnie ważne w przypadku aplikacji jednostronicowych (SPA), które wczytują się z pojedynczego pliku index.html, ponieważ przejścia lub ścieżki (zmiany strony) nie powodują ponownego wczytywania strony. Za każdym razem, gdy użytkownik wczyta nową stronę w aplikacji SPA, tytuł nie zmieni się domyślnie.

W przypadku aplikacji SPA wartość document.title można dodać ręcznie lub za pomocą pakietu pomocniczego (w zależności od frameworka JavaScript). Ogłoszenie zaktualizowanych tytułów stron dla użytkownika czytnika ekranu może wymagać dodatkowej pracy, ale mamy dla Ciebie dobrą wiadomość: możesz skorzystać z opcji takich jak treści dynamiczne.

Zawartość dynamiczna

Jedną z najpotężniejszych funkcji JavaScriptu jest możliwość dodawania kodu HTML i CSS do dowolnego elementu na stronie. Deweloperzy mogą tworzyć aplikacje dynamiczne na podstawie działań lub zachowań użytkowników.

Załóżmy, że chcesz wysłać wiadomość do użytkowników logujących się w Twojej witrynie lub aplikacji. Wiadomość powinna wyróżniać się na białym tle i zawierać komunikat: „Jesteś zalogowany”.

Za pomocą elementu innerHTML możesz ustawić treść:

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

Możesz zastosować kod CSS w podobny sposób, używając setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Z wielką mocą wiąże się wielka odpowiedzialność. Niestety wstrzykiwanie kodu HTML i CSS do JavaScriptu w przeszłości było niewłaściwie wykorzystywane do tworzenia niedostępnych treści. Oto kilka częstych nadużyć:

W przypadku kodu CSS zamiast dodawania stylów wbudowanych przełączaj klasy CSS, ponieważ pozwala to na ponowne wykorzystanie i upraszczanie. Ukrywaj na stronie ukrytą treść i przełączaj klasy, by ukryć lub pokazać zawartość dynamicznego HTML. Jeśli musisz użyć JavaScriptu, aby dynamicznie dodawać treści do strony, zadbaj o to, aby były proste i zwięzłe, a także – oczywiście – dostępne.

Zarządzanie skupieniem

W module dotyczącego skupienia na klawiaturze omówiliśmy kolejność skupienia i style wskaźników. Zarządzanie koncentracją to wiedza, gdzie i kiedy należy się skupić, a kiedy nie powinno go ograniczać.

Zarządzanie fokusem ma kluczowe znaczenie w przypadku użytkowników, którzy korzystają tylko z klawiatury.

Poziom komponentu

Możesz tworzyć pułapki na klawiaturę, gdy nie będziesz odpowiednio zarządzać skupieniem komponentu. Pułapka klawiatury występuje, gdy użytkownik korzystający tylko z klawiatury utknie w komponencie lub gdy fokus nie jest utrzymywany w chwili, w której powinien.

Jednym z najczęstszych wzorców problemów z zarządzaniem koncentracją u użytkowników jest komponent modalny. Gdy użytkownik korzystający tylko z klawiatury natrafi na okno modalne, powinien mieć możliwość przechodzenia między elementami tego okna, ale nigdy nie powinien mieć możliwości opuszczenia okna bez jego zamknięcia. JavaScript jest niezbędna do właściwego uwidocznienia tego zainteresowania.

Poziom strony

Punkt skupienia musi być zachowany również podczas przechodzenia przez strony. Dotyczy to w szczególności aplikacji SPA, w których nie ma odświeżania przeglądarki, a wszystkie treści zmieniają się dynamicznie. Za każdym razem, gdy użytkownik kliknie link i przejdzie na inną stronę w aplikacji, zaznaczenie zostanie zachowane w tym samym miejscu lub może zostać całkowicie umieszczone w innym miejscu.

Przy przechodzeniu między stronami (lub routingiem) zespół programistów musi zdecydować, na czym ma skupiać się podczas wczytywania strony.

Możesz to zrobić na kilka sposobów:

• Ustaw fokus na głównym kontenerze z wiadomością aria-live.
• Wróć do linku, aby przejść do głównej treści.
• Przenieś zaznaczenie na nagłówek najwyższego poziomu nowej strony.

To, na czym zdecydujesz się skupić, zależy od używanych przez Ciebie zasad oraz treści, które chcesz wyświetlać użytkownikom. Może zależeć od kontekstu lub działania.

Zarządzanie stanem

Innym obszarem, w którym JavaScript jest kluczowy dla ułatwień dostępu, jest zarządzanie stanem. Dotyczy to sytuacji, gdy bieżący stan wizualny komponentu lub strony jest przekazywany użytkownikowi technologii wspomagających, który ma ograniczone widzenie, jest niewidomy lub niewidomy i niesłyszący.

Stanem komponentu lub strony często zarządza się za pomocą atrybutów ARIA, jak opisano w module ARIA i HTML. Przyjrzyjmy się kilku najpopularniejszym typom atrybutów ARIA służących do zarządzania stanem elementu.

Poziom komponentu

W zależności od treści strony i potrzebnych informacji użytkowników należy wziąć pod uwagę wiele stanów ARIA, aby przekazać użytkownikowi informacje o komponencie.

Możesz na przykład użyć atrybutu aria-expanded, aby poinformować użytkownika, czy menu lub lista są rozwinięte, czy zwężone.

Możesz też użyć aria-pressed, aby wskazać, że przycisk został naciśnięty.

Pamiętaj, by podczas stosowania atrybutów ARIA zachować ostrożność. Przeanalizuj przepływ danych, aby dowiedzieć się, jakie kluczowe informacje należy przekazać użytkownikowi.

Poziom strony

Deweloperzy często używają ukrytego obszaru zwanego regionem ARIA na żywo, aby ogłaszać zmiany na ekranie i wysyłać alerty do użytkowników technologii wspomagających. Ten obszar można połączyć z JavaScriptem, aby informować użytkowników o dynamicznych zmianach na stronie bez konieczności jej ponownego wczytywania.

Ze względu na swój dynamiczny charakter kod JavaScript miał do tej pory problemy z ogłaszaniem treści w regionach aria-live i ostrzeganiach. Asynchroniczne dodawanie treści do modelu DOM utrudnia AT rozpoznanie regionu i ogłoszenie. Aby treść była prawidłowo odczytywana, region aktywnego lub alertu musi być w projekcie DOM podczas wczytywania, a następnie tekst może być dynamicznie zastępowany.

Jeśli używasz platformy JavaScript, mamy dobrą wiadomość: prawie wszystkie mają pakiet „live announcer”, który wykonuje za Ciebie całą pracę i jest w pełni dostępny. Nie musisz się martwić tworzeniem regionu produkcyjnego ani rozwiązywaniem problemów opisanych w poprzedniej sekcji.

Oto kilka pakietów na żywo dla popularnych frameworków JavaScript:

• React: react-aria-live i react-a11y-announcer
• Graniasty: LiveAnnouncer
• Vue: vue-a11y-utils

Współczesny JavaScript to potężny język, który pozwala programistom tworzyć niezawodne aplikacje internetowe. Prowadzi to do nadmiernej analizy i w efekcie niedostępności wzorców. Stosując wzorce i wskazówki dotyczące JavaScriptu opisane w tym module, możesz zwiększyć dostępność swoich aplikacji dla wszystkich użytkowników.

Sprawdź swoją wiedzę

Sprawdzian wiedzy o JavaScript