JavaScript

JavaScript odgrywa ważną rolę w prawie wszystkiego, co tworzymy – dynamicznych komponentów do pełnych wersji produktów działających na platformie JavaScript, takich jak React lub Angular.

To używanie (lub nadużywanie) JavaScriptu doprowadziło do wielu niepokojących trendów. takich jak długi czas wczytywania spowodowany dużą ilością kodu, stosowanie niesemantycznego kodu HTML; oraz wstrzykiwanie kodu HTML i CSS za pomocą JavaScriptu. A być może i nie masz pewności, jak te ułatwienia odgrywają w każdym z tych elementów.

Język JavaScript może mieć ogromny wpływ na dostępność witryny. W tym przyjrzymy się ogólnym schematom ułatwień dostępu, za pomocą JavaScriptu, jak również rozwiązań problemów z ułatwieniami dostępu, które pojawiają się za pomocą platform JavaScript.

Zdarzenia aktywujące

Zdarzenia JavaScript pozwalają użytkownikom wchodzić w interakcje z treściami internetowymi i wykonywać konkretnego działania. Wiele osób, np. użytkowników czytników ekranu, osoby z niepełnosprawnością ruchową, osoby bez myszy lub trackpada, a inne do interakcji z internetem polegają na obsłudze klawiatury. Bardzo ważne jest, aby do działań JavaScript dodać obsługę klawiatury, na wszystkich tych użytkowników.

Przeanalizujmy zdarzenie kliknięcia. Jeśli zdarzenie onClick() jest używane w semantycznym elemencie HTML, np. <button> lub <a>, obejmuje też funkcje myszy i klawiatury. Pamiętaj jednak: funkcje klawiatury nie są stosowane automatycznie, gdy zdarzenie onClick() jest dodawany do elementu niesemantycznego, np. do ogólnego elementu <div>.

<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 w zdarzeniu reguły użyto elementu niesemantycznego, klucz/zdarzenie kluczowe musi być dodany, aby wykryć naciśnięcie klawisza Enter lub spacji. Dodaję zdarzenia reguły do: o elementach niesemantycznych często zapominamy. Niestety, gdy o tym zapomnisz, powstanie komponent dostępny tylko za pomocą myszy. Tylko klawiatura Użytkownicy pozostawiają użytkowników bez dostępu do powiązanych działań.

Tytuły stron

Jak dowiedzieliśmy się w module Dokument, tytuł strony jest istotny dla użytkowników czytników ekranu. Informuje on użytkowników, oraz czy przeszli na nową stronę.

Jeśli używasz platformy JavaScript, musisz zastanowić się, jak będziesz obsługiwać stronę tytuły. Jest to szczególnie ważne w przypadku: aplikacje jednostronicowe (SPA), wczytywane z pojedynczego pliku index.html, jako przejścia lub trasy (strona zmiany) nie będzie powodować ponownego załadowania strony. Za każdym razem, gdy użytkownik wczyta nową stronę w na SPA, tytuł nie zmieni się domyślnie.

W przypadku aplikacji SPA document.title można dodać ręcznie lub za pomocą pakietu pomocniczego (w zależności od JavaScript). Ogłaszamy zaktualizowane tytuły stron użytkownika czytnika ekranu może trochę potrwać, ale mamy też dobrą wiadomość: dostępnych opcji, takich jak zawartość dynamiczna.

Zawartość dynamiczna

Jedną z najwydajniejszych funkcji JavaScriptu jest możliwość dodawania tagów HTML i CSS do dowolnego elementu na stronie. Programiści mogą tworzyć aplikacje dynamiczne na podstawie działań użytkowników.

Załóżmy, że chcesz wysłać wiadomość do użytkowników, którzy logują się w Twojej witrynie. lub aplikację. Komunikat ma się wyróżniać na białym tle i przekazywać komunikat: „Zalogowano”.

Możesz użyć elementu innerHTML aby ustawić treść:

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

W podobny sposób możesz stosować CSS setAttribute:

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

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

W przypadku CSS przełącz klasy CSS zamiast dodawać style wbudowane, ponieważ jest łatwy w obsłudze i łatwy do wielokrotnego użytku. używać ukrytej treści na stronie, przełączaj zajęcia na ukrywanie i wyświetlanie treści w dynamicznym kodzie HTML. Jeśli musisz użyć do dynamicznego dodawania treści do strony. Upewnij się, że jest on prosty zwięzła i oczywiście przystępna.

Zarządzanie skupieniem

W module Sterowanie za pomocą klawiatury omówiliśmy temat stylem kolejności i wskaźników. Zarządzanie koncentracją to wiedza, gdzie i kiedy się załapać i kiedy nie należy ich ograniczać.

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

Poziom komponentu

Jeśli zaznaczenie komponentu nie jest prawidłowo zarządzane, możesz tworzyć pułapki na klawiaturze. Pułapka na klawiaturze występuje, gdy użytkownik korzystający tylko z klawiatury utknie w komponencie. ostrość nie jest zachowywana, gdy powinna.

Jeden z najczęstszych wzorców problemów z zarządzaniem koncentracją u użytkowników jest komponentem modalnym. Gdy użytkownik z dostępem tylko do klawiatury napotka okno modalne, powinna umożliwiać przechodzenie pomiędzy aktywnymi elementami okna modalnego, ale nie powinny być nigdy dozwolone poza oknem modalnym, chyba że zostaną go wyraźnie zamknięte. JavaScript jest niezbędna do właściwego uwidocznienia tego zainteresowania.

Poziom strony

Trzeba też pamiętać o tym, gdy użytkownik przechodzi ze strony na stronę. To jest zwłaszcza w aplikacjach SPA, w których bez odświeżania przeglądarki, a cała jej zawartość dynamicznie się zmienia. Za każdym razem, gdy użytkownik kliknie link, aby przejść dalej do innej strony w aplikacji, zaznaczenie pozostaje bez zmian umieszczone w innym miejscu lub nawet w innym miejscu.

Przy przechodzeniu między stronami (lub routingiem) zespół programistów musi zdecydować, fokus jest ustawiony po wczytaniu strony.

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

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

To, na czym należy się skupić, zależy od używanej platformy. i treści, które chcesz wyświetlać użytkownikom. Może to być kontekst, zależą od działań.

Zarządzanie stanem

Kolejnym obszarem, w którym JavaScript ma kluczowe znaczenie dla ułatwień dostępu, jest zarządzanie stanem, lub gdy obecny stan wizualny komponentu lub strony jest przekazywany osobom niedowidzącym, niewidomym lub niewidomym użytkownikom technologii wspomagających osoby z niepełnosprawnością.

Stanem komponentu lub strony zarządzają często atrybuty ARIA, omówione w module ARIA i HTML. Przyjrzyjmy się kilku najczęstszym typom atrybutów ARIA wykorzystywanych do wspomagania zarządzać stanem elementu.

Poziom komponentu

W zależności od zawartości strony i informacji potrzebnych użytkownikom można wiele stanów ARIA, co należy wziąć pod uwagę przy przekazywaniu informacji o komponencie do użytkownika.

Możesz na przykład użyć atrybutu aria-expanded który informuje użytkownika, czy menu lub lista są rozwinięte, zwinięto.

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

Pamiętaj, by podczas stosowania atrybutów ARIA zachować ostrożność. Przemyśl aby zrozumieć, jakie kluczowe informacje należy przekazać użytkownikowi.

Poziom strony

Deweloperzy często używają ukrytego obszaru Region aktywny ARIA do informowania o zmianach na ekranie i ostrzeżeń dotyczących technologii wspomagających osoby z niepełnosprawnością (AT). Obszar ten można połączyć z kodem JavaScript, by powiadamiać użytkowników o dynamicznych wprowadza zmiany na stronie bez konieczności ponownego ładowania całej strony.

Do tej pory JavaScript miał problemy z informowaniem treści w językach: aria-live i regionów ostrzegawczych ze względu na ich dynamiczny charakter. Asynchroniczne dodawanie treści do model DOM utrudnia AT wybór regionu i jego ogłoszenie. Aby treść została poprawnie odczytana, obszar aktywności lub alertu musi znajdować się w DOM, tekst może być zastępowany dynamicznie.

Jeśli używasz platformy JavaScript, dobra wiadomość jest taka, że prawie wszystkie z nich „komentator na żywo” który wykona za Ciebie całą pracę i łatwo dostępnych rozwiązań. Nie musisz zaprzątać sobie głowy tworzeniem aktywnego regionu i postępowaniem rozwiązując problemy opisane w poprzedniej sekcji.

Oto kilka pakietów aktywnych środowisk JavaScriptu:

• React: react-aria-live oraz react-a11y-announcer
• Graniasty: LiveAnnouncer
• Adres: vue-a11y-utils

Współczesny JavaScript to zaawansowany język, który pozwala programistom tworzyć do zaawansowanych aplikacji internetowych. Czasami prowadzi to do zbyt wielu działań technicznych, z niedostępnych wzorców. Postępując zgodnie ze wzorcami i wskazówkami JavaScript W tym module możesz zwiększyć dostępność swoich aplikacji dla wszystkich użytkowników.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o języku JavaScript