WCAG 2.2 nowe standardy dostępności cyfrowej – co powinieneś wiedzieć?

Wytyczne dotyczące dostępności treści internetowych (WCAG 2.2) zostały zatwierdzone jako Rekomendacja W3C przez Grupę Roboczą ds. Wytycznych Dostępności (AG WG). Dokumenty te, wraz z dodatkowymi materiałami wyjaśniającymi, opisują, jak projektować treści internetowe, aby były bardziej dostępne dla osób z niepełnosprawnościami. WCAG 2.2 wprowadza 9 nowych kryteriów sukcesu w porównaniu z WCAG 2.1, co poprawia dostępność dla osób z różnymi niepełnosprawnościami, w tym wzrokowymi, fizycznymi i poznawczymi, a także rozszerza wytyczne dotyczące obsługi dotykowej.

Znaczenie wdrożenia standardu WCAG 2.2 

Standard WCAG 2.2 uwzględnia szerokie spektrum niepełnosprawności, takich jak wzrokowe, słuchowe, fizyczne, mowy, poznawcze, językowe, związane z uczeniem się i neurologiczne. Chociaż wytyczne te nie mogą w pełni odpowiadać na potrzeby wszystkich osób z różnymi rodzajami i stopniami niepełnosprawności, ich zastosowanie zwiększa użyteczność treści internetowych nie tylko dla osób z niepełnosprawnościami, ale także dla starszych użytkowników oraz ogółu społeczeństwa.

Tworzenie WCAG 2.2 

Proces opracowywania WCAG 2.2 odbywał się w ramach W3C, przy udziale międzynarodowych organizacji i instytucji, mając na celu stworzenie uniwersalnego standardu dostępności. WCAG 2.2 jest kontynuacją wcześniejszych wersji WCAG 2.0 i 2.1, opartych na WCAG 1.0. Standardy te zostały zaprojektowane z myślą o szerokim zastosowaniu w różnych technologiach internetowych, zarówno obecnie, jak i w przyszłości, oraz o możliwości ich testowania za pomocą automatycznych narzędzi i ocen ekspertów.

W trakcie opracowywania nowych kryteriów pojawiły się liczne wyzwania, zwłaszcza w kontekście dostępności dla osób z niepełnosprawnościami poznawczymi, językowymi i związanymi z nauką. Trudności te obejmowały ograniczony czas na prace, różnice zdań co do kryteriów testowalności i implementowalności, a także kwestie związane z ich międzynarodowym charakterem.

Znaczenie przeglądarek i narzędzi autorskich w implementacji WCAG 

Przeglądarki internetowe oraz narzędzia autorskie odgrywają istotną rolę w procesie wdrażania standardu dostępności WCAG, ułatwiając jego realizację w praktyce.

Dostępność internetu zależy nie tylko od samej treści, ale również od intuicyjnych przeglądarek internetowych i innych narzędzi, z których korzystają użytkownicy. Ważną rolę odgrywają również narzędzia autorskie, które wpływają na sposób tworzenia dostępnych treści. Aby lepiej zrozumieć, jak te elementy współpracują podczas tworzenia i korzystania z internetu, warto zapoznać się z:

• Podstawowymi składnikami dostępu do treści internetowej
• Wytycznymi dotyczącymi dostępu dla agentów użytkownika (UAAG)
• Wytycznymi dotyczącymi dostępu dla narzędzi autorskich (ATAG)
• Wytycznymi WCAG 2.2 dla technologii internetowych, takich jak HTML, CSS, JavaScript

Wytyczne WCAG dla stron internetowych są wynikiem końcowym, który zakłada, że użytkownicy powinni mieć dostęp do odpowiednich narzędzi i technik spełniających te założenia. Z punktu widzenia programistycznego proces ten można podzielić na trzy warstwy logiczne: HTML – odpowiadający za strukturę i zawartość treści, CSS – kontrolujący wizualny aspekt treści, oraz JavaScript – odpowiadający za funkcjonalność strony.

Wytyczne WCAG 2.2 dotyczące użycia HTML

• Unikalność atrybutów id na stronie.
• Dodawanie atrybutów alt do obrazków używanych jako przyciski wysyłania.
• Użycie atrybutu title w elementach iframe.
• Stosowanie list opisowych.
• Grupa powiązanych linków za pomocą elementu nav.
• Użycie elementu ruby dla wsparcia wymowy.
• Definiowanie skrótów za pomocą elementu abbr.
• Udostępnienie mechanizmów wyboru strony.
• Stosowanie elementu track do dostarczania napisów i opisów dźwiękowych.
• Użycie przycisków w połączeniu z elementem select do wykonania akcji.
• Użycie atrybutu alt w elementach img dla opisów obrazków.
• Tworzenie dobrze sformułowanych stron internetowych.
• Korzystanie z elementu caption w celu połączenia podpisów z tabelami danych.
• Użycie elementu dfn do oznaczania definicji słowa.
• Zapewnienie tekstowych alternatyw dla emoji, emotikonów i ASCII.
• Oznaczenie wymaganych kontrolek formularza za pomocą label lub legend.
• Wprowadzenie nagłówków na początku każdej sekcji treści.
• Użycie tekstu linku, który jasno opisuje cel linku w elementach a.
• Użycie atrybutu title do dostarczenia dodatkowego kontekstu.
• Wskazanie otwierania nowego okna dla linku za pomocą atrybutu target.
• Wykluczenie tekstu alternatywnego i atrybutu title w obrazkach, które powinny być ignorowane przez technologie pomocnicze.
• Opisanie celu linku za pomocą tekstu w kontekście list, akapitów lub tabel danych.
• Stosowanie HTML zgodnie ze specyfikacją.
• Użycie atrybutów językowych do oznaczania zmian języka.
• Określenie języka na stronie za pomocą atrybutu lang w elemencie HTML.
• Grupowanie elementów option przy użyciu optgroup.
• Użycie meta refresh do przekierowania na inną stronę.
• Udostępnienie przycisków wysyłania.
• Przypisanie tekstowych etykiet do kontrolek formularza przy użyciu elementu label.
• Grupowanie powtarzających się treści za pomocą elementów ramki.
• Dostarczanie alternatywnych opisów tekstowych dla elementów map obrazkowych.
• Oznaczanie nagłówków za pomocą h1-h6.
• Dostarczanie opisów grup kontrolek formularza za pomocą fieldset i legend.
• Zapewnienie prawidłowo oznaczonych pól e-mail i hasła.
• Dodawanie atrybutów autouzupełniania HTML 5.2.
• Zastosowanie atrybutu scope do powiązania komórek nagłówków i danych w tabelach.
• Wykorzystanie elementu title do dostarczenia tytułów.
• Zapewnienie prawidłowego użycia tagów otwierających i zamykających zgodnie ze specyfikacją.
• Zapewnienie kontroli formularza HTML i linków.
• Stosowanie znaczników Unicode (RLM lub LRM) dla mieszania kierunku tekstu.
• Identyfikacja regionów strony przy użyciu semantycznych elementów HTML.
• Prezentacja danych w tabeli za pomocą znacznika tabeli.
• Użycie elementu link i narzędzi nawigacyjnych.
• Łączenie obrazka i tekstu prowadzących do tego samego zasobu.
• Uzupełnianie tekstu linku za pomocą atrybutu title.
• Stosowanie list (ol, ul, dl) do organizowania treści lub grupowania linków.
• Użycie semantycznych znaczników do wyróżnienia lub specjalnego oznaczenia tekstu.
• Zastosowanie treści w elemencie object.
• Dodawanie atrybutu title do kontrolek formularza, gdy nie można użyć elementu label.
• Stosowanie atrybutu dir do rozwiązywania problemów z kierunkiem tekstu.
• Opisanie celu linku w tabeli danych za pomocą tekstu linku połączonego z otaczającą komórką tabeli.

Wytyczne WCAG 2.2 dla CSS

• Stosowanie min-height i min-width, aby zapewnić odpowiednie odstępy docelowe.
• Używanie CSS Flexbox do ponownego przepływu treści.
• Włączanie dekoracyjnych obrazów za pomocą CSS.
• Tworzenie wskaźnika fokusu w dwóch kolorach, aby zapewnić odpowiedni kontrast z komponentami.
• Zastępowanie tekstu obrazami za pomocą CSS i dostarczanie użytkownikom kontrolek do przełączania.
• Dopasowanie kolejności DOM do kolejności wizualnej.
• Używanie width, max-width, i Flexbox do dopasowywania etykiet i pól wprowadzania danych.
• Określanie rozmiarów kontenerów tekstowych za pomocą jednostek em.
• Używanie przełącznika stylu do dostarczenia alternatywnej wersji.
• Używanie zapytań medialnych do odblokowywania przylegających nagłówków i stopek.
• Regulowanie odstępów między literami przy użyciu właściwości letter-spacing w CSS.
• Stosowanie jednostek względnych do ustawiania szerokości kolumn, aby linie tekstu miały średnio 80 znaków lub mniej po przeskalowaniu przeglądarki.
• Tworzenie silnego wskaźnika fokusu dla komponentów.
• Określanie granic i układu w CSS do wyznaczenia obszarów strony, bez definiowania kolorów tekstu i tła.
• Zezwolenie na nadpisanie odstępów tekstu.
• Użycie wartości procentowych do określania rozmiarów kontenerów.
• Określanie kolorów tekstu i tła dla treści drugorzędnej, jak banery, funkcje i nawigacja, bez określania kolorów tekstu i tła głównej treści.
• Używanie max-width i height do dopasowywania rozmiarów obrazów.
• Używanie CSS do ukrywania części tekstu w linkach.
• Skalowanie elementów formularza zawierających tekst.
• Stosowanie zapytań CSS reduce-motion w celu ograniczenia ruchu.
• Określanie wyrównania do lewej lub prawej przy pomocy CSS.
• Używanie zapytań medialnych i CSS Grid do zarządzania przepływem kolumn.
• Określanie interlinii (line-height) za pomocą CSS.
• Stosowanie nazwanych rozmiarów czcionek.
• Stosowanie CSS do zmiany prezentacji komponentu interfejsu użytkownika, gdy otrzymuje on fokus.
• Tworzenie dobrze sformułowanych stron internetowych.
• Użycie jednostek em do ustalania rozmiarów czcionek.
• Zezwolenie na przepływ tekstu i długich adresów URL.
• Używanie CSS do ustalania marginesów i wypełnień (padding) zamiast obrazów, aby projektować układ strony.
• Pozycjonowanie treści w oparciu o znaczniki strukturalne.
• Użycie procentów do określania rozmiarów czcionek.
• Kontrolowanie wizualnej prezentacji tekstu przy użyciu CSS.
• Używanie zapytań medialnych do odblokowywania przylegających nagłówków/stopki.
• Zapewnienie, że strony internetowe są dobrze sformułowane.
• Zezwalanie na odstępy tekstu bez zawijania.

Wytyczne WCAG 2.2 dla JavaScript

• Dodanie akcji dostępnych z klawiatury do statycznych elementów HTML.
• Zapewnienie walidacji po stronie klienta i dodawanie tekstu o błędzie za pomocą DOM.
• Tworzenie niestandardowych okien dialogowych w sposób niezależny od urządzenia.
• Dostosowywanie akcji do obsługi klawiatury poprzez użycie zdarzenia onclick dla kotwic i przycisków.
• Używanie skryptu do przewijania treści i zapewnienie mechanizmu do jej wstrzymania.
• Używanie rozwijanego i zwijanego menu do omijania bloku treści.
• Używanie skryptów do zmiany tekstu linku.
• Tworzenie zgodnej alternatywnej wersji dla strony internetowej zaprojektowanej z stopniową poprawą.
• Zapewnienie mechanizmu umożliwiającego użytkownikom wyświetlanie ruchomego, przewijanego lub automatycznie aktualizowanego tekstu w statycznym oknie lub obszarze.
• Używanie skryptów do kontrolowania migotania i zatrzymania go w ciągu pięciu sekund lub krócej.
• Zapewnienie mechanizmu umożliwiającego użytkownikom przedłużenie domyślnego limitu czasu.
• Użycie zdarzenia onchange na elemencie select bez powodowania zmiany kontekstu.
• Korzystanie zarówno z funkcji klawiatury, jak i innych funkcji specyficznych dla urządzenia.
• Wstawianie dynamicznej treści do Modelu Obiektu Dokumentu (DOM) bezpośrednio po jej elemencie wyzwalającym.
• Używanie skryptu do zmiany koloru tła lub obramowania elementu z fokusem.
• Obliczanie rozmiaru i pozycji w sposób skalujący się z rozmiarem tekstu.
• Zapewnienie walidacji po stronie klienta i alertu.
• Zmienianie kolejności sekcji na stronie za pomocą Modelu Obiektu Dokumentu.
• Tworzenie niestandardowych okien dialogowych w sposób niezależny od urządzenia.
• Zapewnienie, że treść pojawiająca się po najechaniu kursorem lub ustawieniu fokusu jest możliwa do usunięcia i trwała.
• Dostarczanie skryptu, który ostrzega użytkownika, że limit czasu ma zaraz wygasnąć.
• Używanie funkcji Modelu Obiektu Dokumentu (DOM) do dodawania treści do strony.
• Tworzenie zgodnej alternatywnej wersji dla strony internetowej zaprojektowanej z użyciem stopniowej poprawy.
• Użycie redundantnych procedur obsługi zdarzeń dla klawiatury i myszy.
• Używanie skryptów do czynienia opcjonalnych, nieistotnych alertów.

Podsumowanie wytycznych WCAG 2.2 dotyczących obsługi skryptów i dynamicznych treści koncentruje się na zapewnieniu pełnej dostępności stron internetowych dla użytkowników, niezależnie od ich urządzeń i preferencji. Kluczowe rekomendacje obejmują:

• Obsługę klawiatury: Dodawanie funkcji dostępnych z klawiatury do elementów HTML i dostosowywanie akcji dla kotwic i przycisków.
• Kontrola treści dynamicznych: Zapewnienie mechanizmów do wstrzymywania, przewijania i usuwania dynamicznej treści, takiej jak przewijane teksty, a także dostosowanie interfejsu do potrzeb użytkowników.
• Walidacja i komunikacja: Zapewnienie walidacji po stronie klienta oraz odpowiednich komunikatów o błędach, aby ułatwić użytkownikom poprawne korzystanie z formularzy.
• Zarządzanie czasem: Oferowanie opcji przedłużenia limitu czasu na wykonanie akcji i ostrzeganie o jego upływie.
• Skalowalność i dostępność treści: Używanie skryptów do dynamicznego modyfikowania treści w sposób skalowalny i zgodny z dostępnością.

Te zasady pomagają w tworzeniu stron internetowych przyjaznych dla wszystkich użytkowników, bez względu na ich zdolności lub używane technologie.

Więcej informacji na temat tych wytycznych można znaleźć na stronie: WCAG 2.2.