JavaScript

JavaScript odgrywa ważną rolę we wszystkim, co tworzymy – od mniejszych komponentów dynamicznych po pełne produkty działające w środowisku JavaScript, takie jak React czy Angular.

To wykorzystanie (lub nadużywanie) języka JavaScript spowodowało wiele niepokojących trendów, takich jak długi czas wczytywania z powodu dużej ilości kodu, użycie niesemantycznych elementów HTML i wstrzykiwanie kodu HTML i CSS za pomocą JavaScriptu. Możecie też być niepewni, jak ułatwienia dostępu mają się do każdego z tych elementów.

Kod JavaScript może mieć ogromny wpływ na dostępność witryny. W tym module przedstawimy kilka ogólnych wzorców ułatwień dostępu udoskonalonych przez JavaScript oraz rozwiązania problemów z ułatwieniami dostępu, które wynikają z używania struktur JavaScript.

Zdarzenia aktywatora

Zdarzenia JavaScript 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ścią ruchową, osoby bez myszy czy trackpada i inne, korzysta z klawiatury podczas przeglądania internetu. Niezbędne jest dodanie do działań JavaScript obsługi klawiatury, ponieważ wpływa ona na wszystkich tych użytkowników.

Przeanalizujmy zdarzenie kliknięcia. Jeśli zdarzenie onClick() jest używane w semantycznym elemencie HTML, takim jak <button> lub <a>, obejmuje ono zarówno działanie myszy, jak i klawiatury. Jednak funkcje klawiatury nie są stosowane automatycznie, gdy zdarzenie onClick() zostanie dodane do niesemantycznego elementu, np. ogólnego <div>.

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

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

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

Jeśli zdarzenie aktywujące zawiera element niesemantyczny, musisz dodać zdarzenie klawisza lub spacji, aby umożliwić wykrywanie naciśnięcia klawisza Enter lub spacji. Dodawanie zdarzeń aktywujących do elementów niesemantycznych jest często zapominane. Niestety gdy go zapomniano, komponent jest dostępny tylko za pomocą myszy. Użytkownicy korzystający tylko z klawiatury nie będą mieć dostępu do powiązanych działań.

Tytuły stron

Jak dowiedzieliśmy się z modułu Dokument, dla użytkowników czytników ekranu tytuł strony ma kluczowe znaczenie. Informuje ona użytkowników, na jakiej stronie się znajdują i czy przeszli na nową stronę.

Jeśli używasz platformy JavaScript, musisz wziąć pod uwagę sposób obsługi tytułów stron. Jest to szczególnie ważne w przypadku aplikacji jednostronicowych (SPA), które wczytują się z jednego pliku index.html, ponieważ przejścia i trasy (zmiany strony) nie będą powodować ponownego wczytywania strony. Domyślnie tytuł nie zmienia się za każdym razem, gdy użytkownik wczytuje nową stronę w SPA.

W przypadku aplikacji jednostronicowych wartość document.title można dodać ręcznie lub za pomocą pakietu pomocniczego (w zależności od platformy JavaScript). Informowanie użytkownika czytnika ekranu o nowych tytułach stron może wymagać dodatkowej pracy, ale na szczęście mamy odpowiednie opcje, takie jak zawartość dynamiczna.

Zawartość dynamiczna

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

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

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

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

CSS możesz stosować w podobny sposób za pomocą setAttribute:

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

Ogromna moc wiąże się z dużą odpowiedzialnością. Niestety wstrzykiwanie kodu HTML i CSS do tworzenia niedostępnych treści było w przeszłości niewłaściwie wykorzystywane. Oto niektóre typowe nadużycia:

W przypadku CSS przełączaj klasy CSS, zamiast dodawać style w tekście, ponieważ ułatwia to ponowne korzystanie z nich. Za pomocą ukrytej treści na stronie i przełączania klas możesz ukrywać i wyświetlać zawartość dynamicznego kodu HTML. Jeśli chcesz dynamicznie dodawać treść do strony za pomocą JavaScriptu, zadbaj o to, aby była ona prosta, zwięzła i oczywiście przystępna.

Zarządzanie koncentracją

W module Wyróżnienie klawiatury omówiliśmy style kolejności ostrości i wskaźników. Osoby zarządzające skupieniem wiedzą, gdzie i kiedy uwięzić pułapkę.

Zarządzanie fokusem jest kluczowe dla użytkowników korzystających tylko z klawiatury.

Poziom komponentu

Jeśli zaznaczenie komponentu nie jest prawidłowo zarządzane, możesz utworzyć kontury klawiatury. Pułapka na klawiaturze ma miejsce, gdy użytkownik korzystający tylko z klawiatury utknie w komponencie lub nie zostanie zachowany, mimo że powinien.

Jednym z najczęstszych wzorców problemów z zarządzaniem koncentracją jest komponent modalny. Gdy użytkownik korzystający tylko z klawiatury natrafi na okno modalne, powinien mieć możliwość przechodzenia między jego aktywnymi elementami, ale nigdy nie powinien wykraczać poza okno, nie zamykając go. JavaScript jest niezbędny do prawidłowego śledzenia tego zaznaczenia.

Poziom strony

Skoncentruj się także na przechodzeniu użytkownika między stronami. Zwłaszcza w przypadku aplikacji jednostronicowych, które nie odświeżają się w przeglądarce, a wszystkie treści zmieniają się dynamicznie. Za każdym razem, gdy użytkownik kliknie link, aby przejść do innej strony w aplikacji, kursor pozostaje w tym samym miejscu lub może zostać przeniesiony zupełnie gdzie indziej.

Podczas przełączania się między stronami (lub routingu) zespół programistyczny musi zdecydować, na którym z nich ma skupić się po wczytaniu strony.

Można to osiągnąć na kilka sposobów:

• Ustaw fokus na kontenerze głównym za pomocą ogłoszenia aria-live.
• Umieść ponownie zaznaczenie na linku, aby przejść do głównej treści.
• Przenieś zaznaczenie na nagłówek najwyższego poziomu nowej strony.

Decyzja o tym, na czym należy się skupić, zależy od używanej platformy i treści, które chcesz wyświetlać użytkownikom. Wszystko zależy od kontekstu lub działania.

Zarządzanie województwem

Innym 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 osobie niewidomej, niewidomej lub niewidomej osoby z niepełnosprawnością.

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

Poziom komponentu

W zależności od treści strony i informacji potrzebnych użytkownikom istnieje wiele stanów ARIA, które należy wziąć pod uwagę podczas przekazywania informacji o komponencie użytkownikowi.

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

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

Ważne jest, aby podczas stosowania atrybutów ARIA postępować selektywnie. Zastanów się, jakie informacje należy przekazać użytkownikowi, by dowiedzieć się, jakie informacje należy mu przekazać.

Poziom strony

Deweloperzy często korzystają z ukrytego obszaru nazywanego aktywnym regionem ARIA, aby informować o zmianach na ekranie i wysyłać alerty do użytkowników technologii wspomagających (AT). 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.

W przeszłości JavaScript miał problem z wyświetlaniem treści w regionach aria-live i regionach alertów ze względu na swój dynamiczny charakter. Asynchroniczne dodawanie treści do DOM utrudnia usłudze AT odebranie regionu i jego powiadomienie. Aby treść została prawidłowo odczytana, aktywny region lub region alertu musi znajdować się w DOM po załadowaniu. Potem tekst może być dynamicznie zamieniany.

Jeśli używasz platformy JavaScript, dobra wiadomość jest taka, że prawie wszystkie z nich mają pakiet „transmisji na żywo”, który wykonuje całą pracę za Ciebie i jest w pełni dostępny. Nie musisz się martwić o utworzenie aktywnego regionu i rozwiązywanie problemów opisanych w poprzedniej sekcji.

Oto kilka aktywnych pakietów dla popularnych platform JavaScript:

• Reakcja: react-aria-live i react-a11y-announcer
• Angular: LiveAnnouncer
• Wyświetl: vue-a11y-utils

Nowoczesny JavaScript to zaawansowany język umożliwiający programistom tworzenie wydajnych aplikacji internetowych. Czasem prowadzi to do nadmiernej pracy w inżynierii, a co za tym idzie – do ułatwiania dostępu do wzorców. Postępując zgodnie z wzorcami i wskazówkami dotyczącymi JavaScriptu z tego modułu, możesz ułatwić dostęp do swoich aplikacji wszystkim użytkownikom.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o języku JavaScript