Dostępność

Klient BigBlueButton HTML5 jest dostępny w standardzie WCAG 2.0 AA (z wyjątkami) i zgodny z sekcją 508. Zobacz nasze oficjalne oświadczenie dotyczące dostępności.

Przegląd

W oparciu o zakres projektu, skupiono się na niepełnosprawnościach związanych z wadami wzroku, słuchu i motoryki. Zaprojektowaliśmy klienta HTML5 BigBlueButton tak, aby był dostępny dla jak największej liczby użytkowników, niezależnie od stopnia niepełnosprawności.

Klient przestrzega wytycznych WCAG 2.0 dotyczących kontrastu kolorów dla wszystkich elementów wizualnych, oprócz estetycznego, zintegrowanego projektu. Ulepszono obsługę klawiatury i czytnika ekranu, szczególnie w przypadku czytnika ekranu NVDA o otwartym kodzie źródłowym. JAWS, wiodący na rynku płatny czytnik ekranu, jest również kompatybilny z klientem.

Uwaga: Istnieje kilka mniejszych elementów sterujących w kliencie, które nie są w pełni dostępne, na przykład próbnik kolorów w ustawieniach napisów kodowanych.

Dostępność

Zajmując się dostępnością sieci, musimy pamiętać o kilku kluczowych czynnikach podczas opracowywania

1. Kolejność zakładek
2. Kontrast kolorów
3. Ostrość
4. Semantyka
5. Testowanie

Kolejność tabulatorów

Celem implementacji kolejności tabulatorów jest zapewnienie logicznej i prostej kolejności elementów w sekwencji tabulatorów.

Gdy użytkownik naciśnie klawisz Tab, fokus powinien zostać przeniesiony do następnego elementu interaktywnego. Jeśli użytkownik będzie nadal naciskał klawisz Tab, fokus powinien poruszać się w logicznej kolejności po wszystkich interaktywnych elementach strony. Fokus tabulatora powinien być wizualnie zidentyfikowany, obecnie klient HTML5 dodaje cienką ramkę do pola, a po naciśnięciu tabulatora widoczny jest ruch fokusu.

Uwaga: liczba użytkowników, w tym następująca.

• Osoby z wadami wzroku, które korzystają z czytników ekranu lub narzędzi powiększających ekran.
• Osoby z ograniczoną zręcznością, które korzystają z użycie klawiatury do korzystania z myszy.
• Osoby, które mogą używać tylko jednego przełącznika do sterowania komputerem.

poruszają się po stronie za pomocą przycisku tabulatora.

Kolejność elementów w DOM określa ich miejsce w kolejności tabulacji dla elementów, na których należy się skupić. Elementy, które natywnie nie są aktywne, można wstawić do kolejności tabulacji, dodając właściwość tabindex=”0”.

Uwaga: Podczas korzystania z właściwości tabindex należy zasadniczo unikać wartości dodatnich, ponieważ umieszcza to elementy poza naturalną kolejnością tabulacji, może to powodować problemy dla użytkowników czytników ekranu, którzy polegają na nawigowaniu po DOM w sposób liniowy.

Poniższe rozszerzenie zapewnia wizualną reprezentację kolejności tabulacji w bieżącym dokumencie internetowym.

ChromeLens

oferowany przez ngzhian

https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en

Fokus

Określa, gdzie w danym momencie na stronie trafiają zdarzenia klawiatury. Wizualnie jest on reprezentowany przez pierścień wokół zaznaczonego elementu i ważne jest, aby użytkownicy mogli rozróżnić, który element na ekranie aktualnie wybierają. Do elementów interaktywnych w interfejsie klienta HTML5 zastosowano niestandardowy pierścień ostrości.

HTML5 domyślnie używa atrybutu outline do wizualnego wskazania fokusu. Ze względu na swoje ograniczenia kontur jest przezroczysty, więc staje się widoczny tylko w motywach okiennych o wysokim kontraście (dla osób z wadami wzroku związanymi z kolorem).

Etykiety Aria są ważne, na których należy się skupić podczas nawigacji za pomocą czytnika ekranu. Etykiety te były szeroko stosowane w kliencie w celu zapewnienia dźwiękowych zapowiedzi dla wybranych elementów .

Nawigacja za pomocą klawiatury

Klient HTML5 wprowadził kilka ulepszeń w domyślnej nawigacji za pomocą klawiatury. Najbardziej godnym uwagi dodatkiem jest zarządzanie pokojami podgrup, dzięki czemu możliwe jest teraz przypisywanie użytkowników do różnych pokojów.

Animowana ilustracja: pokaż lub ukryj

Skróty klawiaturowe

Istnieje wiele dostępnych skrótów klawiaturowych, które zostały skonfigurowane przy użyciu HTML5 Właściwość accessKey.

Tabela jest szersza od ekranu. Przewiń ją w poziomie.

Uwaga: atrybut accessKey ma pewne ograniczenia, takie jak brak możliwości ustawienia klawisza modyfikującego w celu aktywacji skrótu.

Korzyścią jest lepsza widoczność dostępnych skrótów dla czytników ekranu.

Kontrast kolorów

Kiedy mamy do czynienia z kontrastem kolorów, mówimy o znalezieniu kolorów dla schematu, który nie tylko zapewnia maksymalny kontrast, ale zapewnia odpowiedni kontrast między treścią a tłem dla osób z niewielkimi wadami wzroku, niedoborami kolorów lub utratą kontrastu zwykle towarzyszącą procesowi starzenia.

Klient HTML5 zapewnia, że ​​wszystkie projekty wizualne spełniają minimalny współczynnik kontrastu kolorów zarówno dla normalnego, jak i dużego tekstu na tle, opisany przez standardy WCAG 2.0 AA. „Kontrast (minimalny): zrozumienie kryterium sukcesu 1.4.3.”

Aby mieć pewność, że spełniliśmy te wytyczne, w Internecie dostępnych jest wiele narzędzi, które pozwalają na porównanie kolorów pierwszego planu i tła za pomocą wartości szesnastkowych, aby sprawdzić, czy mieszczą się one w odpowiednim współczynniku kontrastu.

https://webaim.org/resources/contrastchecker/

Aktualnie realizowane kolory:

• Niebieski - kolor podstawowy - przyciski akcji
• Czerwony - dźwięk zamykania, wskaźniki i powiadomienia o błędach
• Zielony - wskaźnik dźwiękowy, powiadomienie o powodzeniu, znaczniki wyboru
• Pomarańczowy - alerty ostrzegawcze
• Ciemnoniebieski - Nagłówki
• Szary - podstawowy kolor typografii

Uwaga: Rozszerzenie ChromeLens umożliwia także przeglądanie przeglądarki przy użyciu różnych profili użytkowników, którzy mogą przeglądać treści internetowe z różnymi wadami wzroku. Jest to szczególnie przydatne przy podejmowaniu decyzji o wyborze odpowiednich schematów kolorów, które najlepiej odpowiadają szerszemu gronu użytkowników.

Semantyka

Użytkownicy z niepełnosprawnością wzroku mogą utracić możliwości wizualne. Musimy mieć pewność, że informacje, które staramy się przekazać, są wyrażane w sposób wystarczająco elastyczny, aby technologia wspomagająca mogła je wychwycić; stworzenie alternatywnego interfejsu dla naszych użytkowników. nazywamy to wyrażeniem semantyki elementu.

Klient HTML5 wykorzystuje WAI-ARIA (Inicjatywa dostępności sieci – dostępne bogate aplikacje internetowe) w celu zapewnienia dostępu do czytników ekranu. Poniższa lista powszechnie używanych atrybutów arii:

• aria-role
• aria-label
• aria-labelledby
• aria-opisana przez
• aria-ukryta
• aria-live
• aria-rozwinięta
• aria-haspopup

Linki

Specyfikacja HTML5 ARIA — https://www.w3.org/TR/aria-in-html/

Specyfikacja ARIA — https://www.w3.org/WAI/PF/aria/

Role — https://www.w3.org/TR/2023/WD-dpub-aria-1.1-20230515/#role_definitions

Stany i właściwości - https://www.w3.org/TR/wai-aria-1.0/states_and_properties

Wzorce projektowe - https://www.w3.org/TR/wai-aria-practices/#aria_ex

Testowanie

Testowanie dostępności może być dość bolesnym procesem, jeśli spróbujesz ręcznie znaleźć i naprawić wszystkie problemy. Chociaż dobrą praktyką jest przejrzenie listy kontrolnej i upewnienie się, że wszystkie elementy klienta HTML5 spełniają wymagania dotyczące dostępności, proces ten może być bardzo powolny i czasochłonny. Z tego powodu sugeruje się skorzystanie w pierwszej kolejności z automatycznego audytora dostępności.

topór

oferowane przez Deque Systems

https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

Narzędzia dla programistów ułatwień dostępu

oferowane przez Google Dostępność

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

Obydwa rozszerzenia zapewniają możliwość skanowania DOM i raportowania wszelkich problemów z dostępnością w oparciu o poziomy, które można ustawić, niezależnie od tego, czy są to standardy AA czy AAA. Na potrzeby klienta HTML5 kierujemy się wytycznymi AA. Do wszelkich zgłoszonych błędów dołączona jest także lista potencjalnych poprawek.

Uwaga: Po zainstalowaniu tych rozszerzeń w przeglądarce należy je uruchomić z poziomu konsoli.

Szkolenie

Zalecamy zapoznanie się z tym bezpłatnym kursem dostępności online, który może zapewnić bardzo dobre zrozumienie podstaw radzenia sobie z dostępnością sieci zarówno dla programistów, jak i projektantów.

Jeśli nie musisz brać udziału w kursie, ale nadal chcesz uzyskać dostęp do informacji jako odniesienia, kurs można znaleźć również w formularzu pełnego dokumentu. Jest to dokument aktywny, który jest aktualizowany przez programistów w Google.