JavaScript odgrywa ważną rolę w prawie wszystkich naszych projektach – od mniejszych komponentów dynamicznych po pełne usługi działające na platformie JavaScript, takiej jak React czy Angular.
Takie używanie JavaScriptu (lub nadużywanie go) spowodowało wiele niepokojących trendów, takich jak długi czas wczytywania spowodowany dużą ilością kodu, używanie niesemantycznych elementów HTML oraz wstrzykiwanie kodu HTML i CSS za pomocą JavaScriptu. Możesz też nie mieć pewności, jak dostępność ma się do każdego 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, oraz 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 myszki lub gładzika, 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ń wywołujących do elementów niesemantycznych jest często pomijane. Niestety, jeśli o tym zapomnimy, 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 JavaScript 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ć użytkownikom wiadomość, gdy logują się w Twojej witrynie lub aplikacji. Chcesz, aby wiadomość wyróżniała się na białym tle i przekazywała informację: „Jesteś teraz zalogowany”.
Aby ustawić treść, możesz użyć elementu
innerHTML:
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 JavaScript do kodu HTML i CSS było w przeszłości wykorzystywane do tworzenia niedostępnych treści. Oto kilka przykładów niewłaściwego użycia:
| Możliwe niewłaściwe użycie | Prawidłowe użycie |
|---|---|
| renderowanie dużych fragmentów niesemantycznego kodu HTML; | Renderowanie mniejszych fragmentów semantycznego HTML |
| Nie pozostawianie czasu na rozpoznanie zawartości dynamicznej przez technologię wspomagającą | Użycie opóźnienia setTimeout(), aby umożliwić użytkownikom usłyszenie całej wiadomości |
Dynamiczne stosowanie atrybutów stylów do onFocus() |
Używaj tagu :focus w arkuszu stylów CSS w przypadku powiązanych elementów. |
| Stosowanie stylów wbudowanych może powodować nieprawidłowe odczytywanie arkuszy stylów użytkownika | Zachowaj styl w plikach CSS, aby zachować spójność motywu. |
| tworzenie bardzo dużych plików JavaScript, które spowalniają ogólną wydajność witryny; | Używaj mniej kodu JavaScript. Możesz wykonywać podobne funkcje w CSS (np. animacje lub nawigację na stałe), które są analizowane szybciej i mają lepszą wydajność. |
W przypadku kodu CSS zamiast dodawania stylów wbudowanych przełączaj klasy CSS, ponieważ pozwala to na ponowne wykorzystanie i upraszczanie. Używaj ukrytej treści na stronie i klas toggle, aby ukrywać i wyświetlać treści w przypadku kodu HTML dynamicznego. 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 skupieniem polega na tym, aby wiedzieć, kiedy i gdzie należy zablokować fokus, a kiedy nie.
Zarządzanie obszarem fokusu jest kluczowe dla użytkowników korzystających 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, w których użytkownicy mają problemy z zarządzaniem fokusem, 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. Aby prawidłowo zablokować ten punkt skupienia, musisz użyć JavaScriptu.
Poziom strony
Musi ona być zachowana 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, aby przejść na inną stronę w aplikacji, punkt skupienia pozostanie w tym samym miejscu lub może zostać przeniesiony gdzie indziej.
Podczas przechodzenia między stronami (lub przekierowywania) zespół programistów musi zdecydować, na czym ma skupiać się kursor podczas wczytywania strony.
Można 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.
- Przesuń 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, które pomagają zarządzać 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ć znaku aria-pressed, aby wskazać, że przycisk został naciśnięty.
Stosując atrybuty ARIA, należy zachować ostrożność. Przeanalizuj przepływ danych użytkownika, aby dowiedzieć się, jakie kluczowe informacje należy przekazać użytkownikowi.
Poziom strony
Deweloperzy często używają ukrytego obszaru zwanego regionem na żywo ARIA, aby informować o zmianach na ekranie i wysyłać alerty do użytkowników technologii wspomagających. Ten obszar może być połączony 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. Asyncjoniczne dodawanie treści do DOM utrudnia AT wykrycie regionu i ogłoszenie go.
Aby treści mogły być prawidłowo odczytywane, region na żywo lub alert musi znajdować się w DOM-ie 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.
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
Nowoczesny JavaScript to zaawansowany język, który pozwala deweloperom tworzyć niezawodne aplikacje internetowe. Czasami prowadzi to do nadmiernego skomplikowania i w konsekwencji niemożności zastosowania pewnych wzoró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
Jak najlepiej zmienić styl elementu za pomocą JavaScript?
Czy wszystkie akcje JavaScript obsługują użytkowników korzystających z klawiatury?