Testowanie stron internetowych Drupala pod kątem dostępności za pomocą WCAG 2.1

Czy wiesz, że 1 na 4 dorosłych w USA jest niepełnosprawny*? To oszałamiająca liczba 61 milionów ludzi, na których mogą mieć wpływ niedostępne strony internetowe.

Jako programista Drupala możesz coś zmienić, upewniając się, że Twoja witryna spełnia wytyczne dotyczące dostępności treści internetowych (WCAG). Na tym blogu przyjrzymy się kluczowym funkcjom i najlepszym praktykom testowania dostępności WCAG 2.1 w Drupal, abyś mógł tworzyć strony internetowe, które są otwarte dla wszystkich użytkowników.

Czym jest dostępność (A11y)

Dostępność odnosi się do tego, aby strona internetowa była użyteczna dla jak największej liczby osób, w szczególności dla osób niepełnosprawnych. Do czego odnosi się A11y? A11y po prostu odnosi się do słowa „Dostępność”, gdzie 11 oznacza liczbę znaków między „A” a „Y”

WCAG i jego początki

WCAG oznacza wytyczne dotyczące dostępności treści internetowych. Jest uważany za znormalizowany punkt odniesienia dla dostępności stron internetowych. Stworzone przez konsorcjum World Wide Web Consortium (W3C) wytyczne WCAG są najlepszym i najłatwiejszym sposobem uczynienia witryny użyteczną dla wszystkich. Wytyczne WCAG są ściśle przestrzegane przez większość organizacji rządowych i opieki zdrowotnej, aby zapewnić, że witryna jest zgodna z przepisami dotyczącymi dostępności (na przykład sekcja 508).

Zasady WCAG

Istnieją cztery główne zasady dostępności, jeśli chcesz przyjąć zgodność z WCAG. Są one zgodne z akronimem „POUR”, co oznacza Perceivable, Operaable, Understandable i Solid .

Dostrzegalny

Mówiąc prościej, treść powinna być wykrywalna dla zmysłów użytkownika. Oznacza to, że muszą być w stanie rozpoznać informacje, które są im prezentowane. Obejmuje to umożliwienie użytkownikom wyraźnego słyszenia treści audio i upewnienie się, że jest ona odróżnialna od szumu tła.

Wykonalny

Chodzi o to, aby użytkownicy mogli wygodnie poruszać się po Twojej witrynie, a interfejs był przyjazny dla użytkownika. Nie może istnieć żadna niedostępna część witryny ani czynności, których użytkownicy mogliby nie być w stanie wykonać. Podczas projektowania treści internetowych należy unikać szybko poruszających się i migających treści. Należy ułatwić przeglądanie witryny bez klawiatury, a także upewnić się, że witryna jest dostępna z klawiatury dla użytkowników, którzy nie mogą używać myszy.

Zrozumiale

Użytkownicy muszą być w stanie przetwarzać prezentowane im informacje, a także być w stanie zrozumieć, jak korzystać ze strony internetowej i poruszać się po niej. Obejmuje to uczynienie tekstu jasnym, czytelnym i przewidywalnym, aby upewnić się, że strony pojawiają się w przyjazny dla użytkownika i oczekiwany sposób.

Solidny

Podkreśla to, że technologia może ewoluować i budować Twoją witrynę internetową wraz z przyszłymi zmianami technologicznymi. Zgodnie z ogólną zasadą, jeśli technologia zmienia się i rozwija, treść powinna również pozostać dostępna. Musi być również zrozumiały dla szerokiego spektrum użytkowników z różnymi niepełnosprawnościami i nadal pozostaje łatwy do zrozumienia. Na przykład witryna dostosowała ją do pracy z najnowszą wersją czytników ekranu.

Dlaczego warto przestrzegać WCAG

Poniżej przedstawiamy kilka zalet wdrożenia WCAG

• Przystępna strona internetowa buduje dobrą wolę wobec Twojej marki i poprawia optymalizację wyszukiwarek. Twoja witryna będzie wyżej w wynikach wyszukiwania.
• Dostępna witryna umożliwia większe zaangażowanie, zasięg i retencję, ponieważ skutecznie usuniesz bariery uniemożliwiające szerokiemu gronu osób dostęp do Twoich treści.
• Gdy WCAG zostanie wdrożony jako część dowolnej witryny internetowej, jest uważany za standard.

Kryteria sukcesu WCAG 2.0/2.1: najczęściej stosowane

1. Każde pole wprowadzania na stronie ma odpowiednią etykietę
2. Treść dekoracyjna jest wdrażana w taki sposób, że może zostać zignorowana przez technologię wspomagającą. Na przykład obrazy dekoracyjne ignorowane przez czytniki ekranu
3. Podpisy są dostępne dla wszystkich nagranych treści audio/wideo
4. W przypadku treści audio zapewnione jest tłumaczenie na język migowy
5. Znacząca sekwencja treści, na przykład nagłówki na dowolnej stronie, są ułożone w kolejności sekwencyjnej
6. Użytkownik może wstrzymać lub zatrzymać dźwięk lub kontrolować głośność dźwięku niezależnie od ogólnej głośności systemu w celu automatycznego odtwarzania filmów.
7. Współczynnik kontrastu tekstu i obrazów tekstu wynosi 4,5:1, a tekstu i obrazów w dużej skali — 3:1. Współczynnik kontrastu nie dotyczy treści dekoracyjnych ani logo lub nazwy marki
8. Cichy lub brak dźwięku w tle. Wstępnie nagrany materiał audio/wideo nie zawiera żadnych szumów tła
9. Wszystkie funkcje treści są dostępne za pośrednictwem interfejsu klawiatury. Nie będzie pułapki na słowa kluczowe.
10. Zapewnienie użytkownikom wystarczającej ilości czasu na zapoznanie się z treścią i korzystanie z niej
11. Jeśli treść jest oparta na czasie, użytkownik może wstrzymać lub dostosować ograniczenie czasowe
12. W przypadku szybko poruszających się treści, takich jak automatyczne karuzele, użytkownik otrzyma opcje wstrzymania lub zatrzymania
13. Gdy sesja uwierzytelnionego użytkownika wygaśnie, użytkownik będzie mógł kontynuować sesję bez utraty danych po ponownym uwierzytelnieniu.
14. Tytuły stron, nagłówki i etykiety opisują temat strony internetowej
15. Fokus klawiatury jest widoczny i dobrze podświetlony
16. Komponenty, na których można ustawić ostrość, otrzymają ostrość w kolejności, która oznacza znaczenie i funkcjonalność.
17. Każdej sekcji strony internetowej towarzyszy nagłówek sekcji
18. Z wyjątkiem obrazów dekoracyjnych wszystkie obrazy mają zrozumiały tekst Alt
19. Dźwięk, wideo, formularze, menu rozwijane, tekst zakotwiczenia, adresy URL i tekst alternatywny są dostępne dla klawiatury i czytnika ekranu
20. Przejrzystość treści dostosowuje się do stopnia powiększenia strony. Treść jest wyraźnie widoczna, nawet przy maksymalnym powiększeniu
21. Menu nagłówka i stopki wraz z kontekstem pomocy powinno być dostępne na wszystkich stronach serwisu
22. Witryny mają poprawną implementację stanów najechania i skupienia

Czytniki ekranu

Wiele osób z problemami wizualnymi korzysta z lup i czytników ekranu. Czytnik ekranu to oprogramowanie, które odczytuje na głos cyfrowy tekst wyświetlany na ekranie. Niektóre przykłady czytników ekranu obejmują:

• Płatne produkty, takie jak JAWS (Windows) i Dolphin Screen Reader (Windows).
• Darmowe oprogramowanie, takie jak NVDA (Windows), ChromeVox (Chrome) i Orca (Linux).
• Oprogramowanie wbudowane w system operacyjny (system operacyjny), takie jak VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (w systemie operacyjnym Chrome) i TalkBack (Android).

Trzy poziomy dostępności

WCAG 2.1 ma 3 poziomy kryteriów sukcesu

• Poziom A: Spełnione są wszystkie 30 podstawowych kryteriów sukcesu zdefiniowanych w WCAG 2.0. Taki poziom zgodności powinny spełniać co najmniej wszystkie witryny internetowe.
• Poziom AA: Wszystkie kryteria sukcesu na poziomie A są spełnione, a dodatkowe 28 kryteriów sukcesu dostępności jest spełnionych. Ten poziom zapewnia szersze spektrum dostępności i często jest celem większości zespołów programistycznych.
• Poziom AAA: Strona internetowa powinna spełniać wszystkie trzy poziomy kryteriów sukcesu, w tym 28 dodatkowych kryteriów sukcesu. Ten poziom jest zwykle zarezerwowany dla specjalnych witryn, takich jak organizacje rządowe.

Większość witryn kompatybilnych z WCAG zasadniczo spełnia kryteria sukcesu dostępności na poziomie A lub AA.

Testowanie dostępności witryny Drupal

Poniżej przedstawiono kroki, które należy wykonać, aby przeprowadzić test dostępności dla witryny Drupal

1. Przeprowadź audyt Google Chrome Lighthouse i napraw wyróżnione problemy z ułatwieniami dostępu
2. Przeprowadź audyt narzędzia Wave
3. Sprawdź ręcznie fokus podświetlenia klawiatury i kolejność tabulatorów na stronie
4. Sprawdź stronę za pomocą wymaganego oprogramowania czytnika ekranu. Na przykład VoiceOver
5. Sprawdź dostępność witryny we wszystkich rozdzielczościach, takich jak szeroki pulpit, laptop, karta i urządzenia mobilne
6. Zweryfikuj kod witryny za pomocą narzędzi do sprawdzania poprawności W3C dla znaczników i CSS
7. Zweryfikuj kontrast kolorów witryny, aby upewnić się, że spełnia standardy (4:5:1), używając narzędzia rozszerzeń Chrome, takiego jak Kontrast, lub aplikacji, takiej jak Color Contrast Analyzer

Jak Drupal pomaga osiągnąć standardy dostępności

Tworzenie stron internetowych musi obejmować dostępność, aby upewnić się, że strony internetowe są funkcjonalne i dostępne dla osób niepełnosprawnych. Drupal jest znany ze swojego niezłomnego przywiązania do dostępności. Przyjrzyj się, w jaki sposób Drupal promuje dostępność oraz jakie narzędzia i funkcje zapewnia, aby pomóc stronom internetowym być bardziej przyjaznymi dla użytkownika.

1. Budowanie dostępności w Drupalu

Celem zespołu programistów Drupala zawsze było zbudowanie platformy, z której będzie mogła korzystać jak największa liczba użytkowników. Wytyczne dotyczące dostępności treści internetowych (WCAG) 2.1 Poziom AA są przestrzegane podczas opracowywania podstawowej platformy Drupal. Oznacza to, że dostęp do stron Drupal mogą uzyskać osoby z różnymi rodzajami niepełnosprawności, takie jak te wpływające na systemy wzrokowe, słuchowe, fizyczne, werbalne, poznawcze i neurologiczne.

2. Domyślne funkcje ułatwień dostępu

• Dzięki możliwości dostosowania się do różnych rozmiarów ekranu i urządzeń dzięki responsywnemu projektowi, domyślne motywy Drupala są przydatne dla tych, którzy korzystają z urządzeń mobilnych lub technologii wspomagających.
• Drupal tworzy semantyczne znaczniki HTML, które pomagają czytnikom ekranu i innym narzędziom technologii wspomagających w zrozumieniu struktury witryny.
• Drupal zawiera pole do dodawania alternatywnego tekstu do zdjęć, co pomaga osobom niewidomym w zrozumieniu treści serwisu.
• Drupal obsługuje nawigację za pomocą klawiatury, co jest kluczowe dla użytkowników, którzy nie mogą używać myszy.
• Formularze, które są łatwe w użyciu i nawigacji dzięki technologii wspomagającej, są generowane przez Drupala i są dostępne.

3. Drupal zapewnia wtyczki i moduły ułatwiające dostęp

Aby poprawić dostępność witryny, Drupal zapewnia różnorodne moduły i wtyczki ułatwień dostępu, które można wdrożyć. Oto kilka popularnych modułów i wtyczek ułatwień dostępu:

• Editoria11y Accessibility Checker: Ten moduł sprawdza witrynę internetową pod kątem problemów z dostępnością i przedstawia zalecenia dotyczące rozwiązań.
• Wtyczka ułatwień dostępu CKEditor: Ten dodatek poprawia dostępność powszechnie używanego edytora tekstu dla Drupala, CKEditor.
• Widżet ułatwień dostępu typu „wszystko w jednym”: ten moduł zawiera widżet ułatwień dostępu, który umożliwia użytkownikom zmianę rozmiaru tekstu, kontrastu i innych ustawień związanych z ułatwieniami dostępu w witrynie.
• A11Y: Pomocnicy formularzy: Ten moduł pomaga sprawić, by wszystkie formularze Drupala spełniały standardy dostępności
• Zablokuj role punktów orientacyjnych ARIA: Ten moduł dodaje dodatkowe elementy do formularzy konfiguracji bloków, które umożliwiają użytkownikom przypisanie roli punktów orientacyjnych ARIA i/lub etykiet ARIA do bloku.

4. Silne wsparcie społeczności dla ułatwień dostępu

Deweloperzy i projektanci, którym zależy na dostępności, stanowią znaczną część społeczności Drupala. Wysiłek prowadzony przez społeczność, aby Drupal był bardziej dostępny dla osób niepełnosprawnych, to Drupal Accessibility Group. Grupa oferuje wskazówki, narzędzia i najlepsze praktyki dotyczące tworzenia witryn Drupal zgodnych z ADA.

Bibliografia:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Końcowe przemyślenia

Drupal to skuteczny system zarządzania treścią o otwartym kodzie źródłowym, który zapewnia różnorodne funkcje, narzędzia i wtyczki poprawiające dostępność witryny. Ze względu na swoje zaangażowanie w dostępność i siłę społeczności skupionej na dostępności, Drupal jest fantastyczną platformą do tworzenia stron internetowych, które są użyteczne i dostępne dla osób z niepełnosprawnościami.
Mam nadzieję, że ten artykuł zapewni Ci wymagany wgląd w testowanie dostępności za pomocą WCAG 2.1. Chcesz zbudować dostępną witrynę Drupal od podstaw lub chcesz, aby Twoja obecna witryna była bardziej dostępna? Chcielibyśmy, aby tak się stało! Porozmawiajmy!