WCAG – dostępność stron dla osób niepełnosprawnych

Czas czytania:

office

Aktualnie strony internetowe jak i aplikacje są dostępne dla każdego i w każdym miejscu na ziemi. Jednakże, czy tworząc własne produkty dbamy o każdego użytkownika? Z pomocą na to pytanie przychodzi nam dokument zawierający standardy WCAG.

WCAG

Standard WCAG jest to zbiór dokumentów, który zawiera określone wymogi dotyczące tworzenia produktów, aby były one dostępne również dla osób niepełnosprawnych. Głównym założeniem osób z W3C, które są autorem tego standardu było zwiększenie dostępności informacji dla wszystkich grup społecznych niezależnie od ich upośledzeń. Niestety większość serwisów nie spełnia nawet części wymogów narzucanych przez standard WCAG. W tym artykule przedstawimy najważniejsze elementy na które programista i grafik muszą zwrócić uwagę podczas tworzenia aplikacji.

Poziomy dostępności

Jak wcześniej zostało wspomniane standard WCAG zawiera określone wymogi które są pogrupowane w poziomy. Poziomy określamy za pomocą liter A i tak:

Poziom A – podstawowy, który zawiera elementy które muszą zostać spełnione podczas tworzenie strony.
Poziom AA – średniozaawansowany, który odwołuje się do elementów mniej popularnych na stronach ale dla osób z niepełnosprawnością bardzo przydatnych.
Poziom AAA – zaawansowany, zawiera elementy ściśle spersonalizowane do osób niepełnosprawnych i specjalnie dla nich przygotowanych.

W celu dokładniejszego zapoznania się z powyższymi wytycznimi zapraszam na oficjalną stroną WCAG (https://www.w3.org/TR/WCAG/). Poniżej zaś zostaną przedstawione i omówione wybrane elementy tego standardu z podziałem na poziomy.

Poziom A (podstawowy)

Opisy elementów HTML
Każdy element strony, obrazek, formularze, powinny zawierać dodatkowy opis, który przedstawia te same informacje jednakże w formie tekstowej.

HTML

<img src=”lokalizacja-plik.jpg” alt=”Opis obrazka” />

Logiczna struktura i nawigacja klawiaturą
Aplikacje powinny posiadać możliwość obsługi jedynie za pomocą klawiatury. Struktura strony powinna być intuicyjna dla użytkowników oraz zamieszczona treść ma być przedstawiona w sposób zrozumiały, czytelny dla użytkownika i programu do odczytywania treści. W każdy sektor strony użytkownik ma mieć możliwość dotarcia za pomocą klawiatury. Najczęściej wykorzystuje się do tego przyciski TAB bądź przyciski kierunkowe.
Język strony
Informacja o tym w jakim języku występują treści na stronie musi być przedstawiona w sposób jednoznaczny i łatwo dostępny dla użytkownika. Zazwyczaj odbywa się to poprzez umieszczenie w tagu HTML znacznika Lang z skrótem języka w jakim dana strona jest obsługiwana.

HTML

<html lang="pl">

Załączniki, pliki PDF
Wszystkie elementy które są dołączone do strony jako załączniki do pobrania, również powinny spełniać elementy standardu WCAG.
Kolory i kontrast
Każda aplikacja podczas tworzenia powinna zostać przeanalizowana pod względem czytelności informacji. Graficy projektując muszą zwrócić uwagę na dobór kolorów bądź przygotować wersję alternatywną z zwiększonym kontrastem kolorów. Powinna również zostać udostępniona dla użytkownika opcja powiększenia i zmniejszenia czcionek na stronie.
Przejrzyste informacje
Należy unikać na swoich stronach internetowych elementów ruchomych, rozpraszających użytkownika oraz bez konkretnej informacji skierowanej do użytkownika. Wszelkie takie elementy powinny zostać ukryte

Poziom AA (średniozaawansowany)

Deskrypcja
Elementy audio i video powinny posiadać opis zawartości tzw transkrypcję. Zazwyczaj jest to realizowane poprze podcasty lub opis tekstowy w tagu title video i audio.

HTML

<audio title="Opis tekstu" src="link-do-nagrania" controls></audio>

Mapa strony
Witryna internetowa przyjazna użytkownikom powinna zawierać przejrzystą i łatwą w obsłudze nawigację. Można zrealizować to na wiele sposobów, jednakże najpopularniejszy z nich to mapa strony. Zawiera ona wszystkie elementy w formie listy uporządkowanej. Lista musi być ułożona w hierarchii ważności oraz nawigacja po niej musi być możliwa za pomocą klawiatury.
Focus
W poziomie A zawarty jest punkt o dostępności strony poprzez nawigację samą klawiaturą, tutaj zaś dopełniamy ten punkt o widoczne zaznaczenie elementu poprzez obramowanie go lub podkreślenie. W ten sposób użytkownik posiada klarowną informacje w jakiej części strony się znajduje i gdzie ma dalej możliwość podążać.

Poziom AAA (zaawansowany)

Język migowy
Filmy przedstawione na stronie powinny zawierać opcję tłumaczenia migowego. Może być to zrealizowane poprzez zamieszczenie dodatkowego filmu lub uwzględnienie tłumacza w oryginalnym źródle.
Kontrast
Kontrast pomiędzy testem a tłem powinien wynosić co najmniej 7:1.
Opis dodatkowy
Zawartość strony, która zawiera elementy techniczne lub naukowe, powinna posiadać dodatkowy zrozumiały opis który dokładnie i prostym językiem wyjaśni użytkownikowi cel i charakter wypowiedzi.
Popupy i reklamy
Użytkownik nie może być rozpraszany przez żadne pojawiające się dodatkowe okienka z informacjami. Powinny one być zablokowane lub przedstawione w inny nie odwracający uwagi użytkownika sposób.

Przydatne dla programisty

Podczas
realizacji aplikacji dostosowanej do osób niepełnosprawnych programiści muszę
zwrócić szczególną uwagę na wymogi jakie stawia W3C dotyczące hierarchii
tekstów oraz nagłówków. Jest to bardzo istotne w momencie gdy naszą stronę
odwiedza np. osoba niewidoma i treści które są zamieszczone na naszej stronie
odczytuje lektor. Poniżej zamieszczam listę przydatnych stron/aplikacji które
ułatwią nam proces wytwarzania produktu:

https://validator.w3.org/ – strona dzięki której sprawdzimy poprawność składni HTML na naszej stronie

http://wave.webaim.org/ – chyba najbardziej przydatna aplikacja w procesie tworzenia stron dla niepełnosprawnych. Zawiera ona szereg testów począwszy od kontrastu tekstu idąc przez strukturę nagłówków, dostępność tekstów alternatywnych kończąc na tekstach dostępnych tylko dla aplikacji czytającej tekst. Dostajemy pełną informację gdzie i jak mamy poprawić dany element aby nasza strona była w pełni dostosowana do potrzeb osób niepełnosprawnych.

https://userway.org/ – dla posiadaczy stron opartych o WordPress, bardzo przyjaznym ułatwieniem jest możliwość skorzystania z wtyczki Userway, jest w pełni darmowa i oferuje szereg ułatwień dla użytkowników. Dzięki niej możemy zaoszczędzić dużo czasu na refactoryzację kodu potrzebną dostosowania strony dla użytkowników niepełnosprawnych. Poniższy screen prezentuje jakie możliwości ma wtyczka, a szczegóły dotyczące działania i instalacji są podane w linku powyżej.

Podsumowanie

Budując aplikację dostosowaną dla wszystkich użytkowników programiści muszą zmierzyć się z szeregiem wymogów. Powyżej przedstawiona jest tylko część z nich. Pełna dokumentacja znajduje się pod tym linkiem: https://www.w3.org/TR/WCAG

Tagi