JavaScript odgrywa ważną rolę niemal we wszystkim, co tworzymy – od mniejszych dynamicznych komponentów po pełne produkty działające na platformie JavaScript, takiej jak React czy Angular.
Takie użycie (lub nadużywanie) JavaScriptu spowodowało wiele niepokojących trendów, takich jak długi czas wczytywania z powodu dużej ilości kodu, używanie elementów HTML bez znaczenia semantycznego oraz wstrzykiwanie kodu HTML i CSS za pomocą JavaScriptu. Możesz nie wiedzieć, jak ułatwienia dostępu pasują do każdego z tych elementów.
JavaScript może mieć ogromny wpływ na dostępność Twojej witryny. W tym module omówimy ogólne wzorce ułatwień dostępu, które są ulepszane przez JavaScript, a także rozwiązania problemów z ułatwieniami dostępu wynikających z używania frameworków JavaScript.
Zdarzenia aktywujące
Zdarzenia JavaScriptu umożliwiają użytkownikom interakcję z treściami internetowymi i wykonywanie określonych działań. Wiele osób, np. użytkownicy czytników ekranu, osoby z niepełnosprawnościami motorycznymi, osoby bez myszki lub trackpada i inne, korzysta z klawiatury do interakcji z internetem. Konieczne jest dodanie obsługi klawiatury do działań JavaScript, ponieważ ma to wpływ na wszystkich tych użytkowników.
Przyjrzyjmy się zdarzeniu kliknięcia.
Jeśli zdarzenie onClick() jest używane w semantycznym elemencie HTML, takim jak <button> lub <a>, naturalnie obejmuje zarówno funkcje myszy, jak i klawiatury. Funkcjonalność klawiatury nie jest jednak automatycznie stosowana, gdy do elementu niesemantycznego, takiego jak ogólny element <div>, dodane jest onClick()zdarzenie.
<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 zdarzenia wywołującego używany jest element niesemantyczny, należy dodać zdarzenie keydown/keyup, aby wykrywać naciśnięcie klawisza Enter lub spacji. Dodawanie zdarzeń wywołujących do elementów niesemantycznych jest często pomijane. Niestety, jeśli o tym zapomnimy, powstanie komponent 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 dowiedzieliśmy się z modułu Dokument, tytuł strony jest niezbędny dla użytkowników czytników ekranu. Informuje użytkowników, na której stronie się znajdują i czy przeszli na nową stronę.
Jeśli używasz platformy JavaScript, musisz zastanowić się, jak obsługiwać tytuły stron. Jest to szczególnie ważne w przypadku aplikacji jednostronicowych (SPA), które wczytują się z jednego pliku index.html, ponieważ przejścia lub trasy (zmiany stron) nie wymagają ponownego wczytania strony. Za każdym razem, gdy użytkownik wczytuje nową stronę w aplikacji SPA, tytuł domyślnie się nie zmienia.
W przypadku aplikacji SPA wartość document.title można dodać ręcznie lub za pomocą pakietu pomocniczego (w zależności od platformy JavaScript). Ogłoszenie zaktualizowanych tytułów stron użytkownikowi czytnika ekranu może wymagać dodatkowej pracy, ale dobrą wiadomością jest to, że masz do dyspozycji różne opcje, np. 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ć dynamiczne aplikacje na podstawie działań lub zachowań użytkowników.
Załóżmy, że chcesz wysłać wiadomość do użytkowników, gdy zalogują się w Twojej witrynie lub aplikacji. Chcesz, aby wiadomość wyróżniała się na białym tle i zawierała tekst: „Jesteś teraz zalogowany(-a)”.
Aby ustawić treść, możesz użyć elementu
innerHTML:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Podobnie możesz zastosować CSS, 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 za pomocą JavaScriptu było w przeszłości nadużywane do tworzenia treści niedostępnych. Oto kilka typowych przypadków nadużywania:
| Możliwe nadużycie | Prawidłowe użycie |
|---|---|
| Renderowanie dużych fragmentów kodu HTML bez semantyki | Renderowanie mniejszych fragmentów semantycznego kodu HTML |
| Nie pozostawienie czasu na rozpoznanie treści dynamicznych przez technologię wspomagającą osoby z niepełnosprawnością. | Używanie opóźnienia setTimeout(), aby umożliwić użytkownikom odsłuchanie pełnej wiadomości |
Dynamiczne stosowanie atrybutów stylu do elementu onFocus() |
Używaj :focus w przypadku powiązanych elementów w arkuszu stylów CSS. |
| Stosowanie stylów wbudowanych może powodować nieprawidłowe odczytywanie arkuszy stylów użytkownika. | Aby zachować spójność motywu, style powinny być przechowywane w plikach CSS. |
| tworzenie bardzo dużych plików JavaScript, które spowalniają ogólne działanie witryny; | Używaj mniej JavaScriptu. Podobne funkcje (np. animacje czy przyklejona nawigacja) możesz wykonywać w CSS, który jest szybciej analizowany i wydajniejszy. |
W przypadku CSS przełączaj klasy CSS zamiast dodawać style wbudowane, ponieważ umożliwia to ponowne wykorzystanie i upraszcza kod. Używaj ukrytych treści na stronie i przełączaj klasy, aby ukrywać i wyświetlać treści w dynamicznym HTML-u. Jeśli musisz użyć JavaScriptu, aby dynamicznie dodawać treści do strony, upewnij się, że jest on prosty i zwięzły, a także dostępny.
Zarządzanie skupieniem uwagi
W module dotyczącym działania klawiatury omówiliśmy kolejność zaznaczania i style wskaźników. Zarządzanie ostrością polega na wiedzy, kiedy i gdzie ją zablokować, a kiedy nie.
Zarządzanie fokusem jest kluczowe dla użytkowników, którzy korzystają tylko z klawiatury.
Poziom komponentu
Pułapki klawiaturowe mogą powstawać, gdy fokus komponentu nie jest prawidłowo zarządzany. Pułapka klawiatury występuje, gdy użytkownik korzystający tylko z klawiatury utknie w komponencie lub gdy fokus nie jest utrzymywany, gdy powinien.
Jednym z najczęstszych przypadków, w których użytkownicy mają problemy z zarządzaniem fokusem, jest komponent modalny. Gdy użytkownik korzystający tylko z klawiatury napotka okno modalne, powinien móc przełączać się między elementami, które można w nim kliknąć, ale nigdy nie powinien móc wyjść poza to okno bez jego wyraźnego zamknięcia. JavaScript jest niezbędny do prawidłowego przechwytywania tego fokusu.
Poziom strony
Fokus musi być też zachowany, gdy użytkownik przechodzi z jednej strony na drugą. Jest to szczególnie ważne w przypadku aplikacji SPA, w których nie ma odświeżania przeglądarki, a cała zawartość zmienia się dynamicznie. Za każdym razem, gdy użytkownik kliknie link, aby przejść do innej strony w aplikacji, fokus pozostaje w tym samym miejscu lub może zostać przeniesiony w inne miejsce.
Podczas przechodzenia między stronami (lub routingu) zespół programistów musi zdecydować, gdzie ma się znajdować fokus po wczytaniu strony.
Możesz to zrobić na kilka sposobów:
- Przenieś fokus na główny kontener za pomocą
aria-livekomunikatu. - Przenieś fokus z powrotem na link, aby przejść do głównej treści.
- Przenieś zaznaczenie na nagłówek najwyższego poziomu na nowej stronie.
To, na czym się skupisz, zależy od używanych przez Ciebie zasad i treści, które chcesz wyświetlać użytkownikom. Może zależeć od kontekstu lub działania.
Zarządzanie stanem
Kolejnym obszarem, w którym JavaScript ma kluczowe znaczenie dla ułatwień dostępu, jest zarządzanie stanem, czyli przekazywanie bieżącego stanu wizualnego komponentu lub strony użytkownikowi technologii wspomagającej osoby z niepełnosprawnością, który jest niedowidzący, niewidomy lub głuchoniewidomy.
Stan komponentu lub strony jest często zarządzany 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 informacji, których potrzebują użytkownicy, możesz użyć wielu stanów ARIA, aby przekazywać 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 zwinięte.
Możesz też użyć aria-pressed, aby wskazać, że przycisk został naciśnięty.
Podczas stosowania atrybutów ARIA należy zachować ostrożność. Przeanalizuj ścieżkę użytkownika, aby dowiedzieć się, jakie kluczowe informacje należy przekazać użytkownikowi.
Poziom strony
Deweloperzy często używają niewidocznego obszaru zwanego aktywnym regionem ARIA, aby ogłaszać zmiany na ekranie i wysyłać alerty do użytkowników technologii wspomagających osoby z niepełnosprawnością. Ten obszar można połączyć z JavaScriptem, aby powiadamiać użytkowników o dynamicznych zmianach na stronie bez konieczności ponownego wczytywania całej strony.
Ze względu na dynamiczny charakter JavaScriptu w przeszłości występowały problemy z ogłaszaniem treści w aria-live i regionach alertów. Asynchroniczne dodawanie treści do DOM utrudnia technologiom wspomagającym wykrywanie regionu i jego odczytywanie.
Aby treść była prawidłowo odczytywana, region na żywo lub region alertu musi znajdować się w DOM podczas ładowania, a następnie tekst można dynamicznie zamieniać.
Jeśli używasz platformy JavaScript, prawie wszystkie z nich mają pakiet „live announcer”, który wykonuje całą pracę za Ciebie i jest w pełni dostępny. Nie musisz się martwić tworzeniem aktywnego regionu ani rozwiązywaniem problemów opisanych w poprzedniej sekcji.
Oto niektóre pakiety 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 umożliwia deweloperom tworzenie solidnych aplikacji internetowych. Czasami prowadzi to do nadmiernego skomplikowania i w konsekwencji do niedostępnych wzorców. Postępując zgodnie z wzorcami i wskazówkami dotyczącymi JavaScriptu w tym module, możesz zwiększyć dostępność aplikacji dla wszystkich użytkowników.