WCAG 2.2 jako standard i wzorzec dla stron WWW

Wytyczne dostępu do treści internetowej (WCAG 2.2) zostały opublikowane jako Rekomendacja W3C przez Grupę Roboczą ds. Wytycznych Dostępności (AG WG). Dokumenty WCAG i towarzyszące im wyjaśniają, jak tworzyć treść bardziej dostępną dla osób z niepełnosprawnościami. WCAG 2.2 wprowadza 9 nowych wymagań (nazywanych kryteriami sukcesu) w stosunku do WCAG 2.1. Udoskonalają one dostępność dla osób z niepełnosprawnościami wzrokowymi, fizycznymi oraz poznawczymi. Na przykład, rozszerzają one wytyczne dotyczące wejścia dotykowego.

Dlaczego wdrożenie standardu dostępności WCAG 2.2 jest ważne?

Dostępność dotyczy szerokiego zakresu niepełnosprawności, w tym wzrokowych, słuchowych, fizycznych, mowy, poznawczych, językowych, uczenia się oraz neurologicznych. Chociaż te wytyczne obejmują szeroki zakres problemów, nie są w stanie zaspokoić potrzeb wszystkich osób z różnymi rodzajami, stopniami i kombinacjami niepełnosprawności. Dostosowanie treści internetowych zgodnie z tymi wytycznymi zwiększa ich użyteczność nie tylko dla osób starszych, których zdolności zmieniają się z wiekiem, ale często także dla ogółu użytkowników.

Proces tworzenia WCAG 2.2

WCAG 2.2 zostały opracowane w procesie W3C we współpracy z jednostkami i organizacjami z całego świata. Celem było stworzenie wspólnego standardu dostępu do treści internetowej, który spełni potrzeby jednostek, organizacji oraz rządów na całym świecie. WCAG 2.2 bazuje na WCAG 2.0 i WCAG 2.1, które z kolei bazują na WCAG 1.0. Są one zaprojektowane tak, aby były stosowane szeroko do różnych technologii internetowych teraz i w przyszłości, oraz by były możliwe do przetestowania za pomocą testów automatycznych oraz oceny ludzi.

Podczas definiowania dodatkowych kryteriów napotkano znaczące wyzwania, zwłaszcza w odniesieniu do niepełnosprawności poznawczych, językowych oraz uczących się. Wyzwania te obejmowały krótki czas na rozwój, trudności w osiągnięciu konsensusu dotyczącego testowalności, implementowalności oraz międzynarodowych aspektów propozycji.

Rola przeglądarek i narzędzi autorskich w procesie wdrażania standardu dostępności WCAG

Dostępność internetowa zależy nie tylko od dostępnej treści, ale również od przystępnych przeglądarek internetowych i innych agentów użytkownika. Narzędzia autorskie odgrywają również ważną rolę w dostępie do internetu. Aby uzyskać przegląd tego, jak te komponenty współdziałają w procesie tworzenia i interakcji w sieci, zobacz:

• Podstawowe składniki dostępu do treści internetowej
• Wytyczne dostępu dla agentów użytkownika (UAAG)
• Wytyczne dostępu dla narzędzi autorskich (ATAG)

Wytyczne WCAG 2.2 dla technologii internetowych HTML, CSS, JavaScript

Zbiór wytycznych WCAG stron stron internetowych ma postać wynikową, tzn. końcowy użytkownik powinien mieć wdrożone narzędzia i techniki do realizacji tych założeń. Pod kątem programistycznym podział ten jest jednak bardziej złożony i możemy go podzielić na 3 wartwy logiczne: HTML – dla treści i zawartości, CSS – dla aspektów wizualnych zaawartości, JS – dla aspektów funkcjonalnych.

Wytyczne WCAG 2.2 dla HTML

• Łączenie obok siebie obrazka i tekstu linkujących do tego samego zasobu
• Dostarczanie tekstowych alternatyw dla elementów obszaru map obrazkowych
• Udostępnianie tytułu za pomocą elementu title
• Dostarczanie definicji dla skrótów za pomocą elementu abbr
• Dostarczanie tekstu linku, który opisuje cel linku dla elementów kotwicy
• Udostępnianie przycisków wysyłania
• Uzupełnianie tekstu linku atrybutem title
• Użycie znacznika Unicode right-to-left (RLM) lub left-to-right (LRM) do mieszania kierunku tekstu w treści
• Użycie atrybutów alt na obrazkach używanych jako przyciski wysyłania
• Użycie atrybutów alt na elementach img
• Użycie elementów caption do skojarzenia podpisów tabeli z tabelami danych
• Użycie list opisowych
• Użycie h1-h6 do identyfikacji nagłówków
• Użycie atrybutów id i headers do skojarzenia komórek danych z komórkami nagłówka w tabelach danych
• Użycie elementów label do skojarzenia tekstowych etykiet z kontrolkami formularza
• Użycie ol, ul i dl do list lub grup linków
• Użycie semantycznego znacznika do oznaczania wyróżnionego lub specjalnego tekstu
• Użycie znacznika tabeli do prezentacji informacji w formie tabelarycznej
• Użycie treści elementu object
• Użycie elementu dfn do identyfikacji definicyjnego wystąpienia słowa
• Użycie atrybutu dir w elemencie liniowym, aby rozwiązać problemy z zagnieżdżonymi sekwencjami kierunkowymi
• Użycie atrybutu języka na elemencie HTML
• Użycie atrybutów językowych do identyfikacji zmian w języku ludzkim
• Użycie elementu link i narzędzi nawigacyjnych
• Użycie elementu ruby
• Użycie atrybutu scope do skojarzenia komórek nagłówka i komórek danych w tabelach danych
• Użycie atrybutu title elementu iframe
• Użycie atrybutu title do identyfikacji kontrolki formularza, gdy nie można użyć elementu label
• Użycie pustego tekstu alternatywnego i braku atrybutu title na elementach img dla obrazów, które technologie pomocnicze powinny ignorować
• Dostarczanie elementów nagłówka na początku każdej sekcji treści
• Użycie elementów ramki do grupowania bloków powtarzalnego materiału
• Dostarczanie opisu dla grup kontrolki formularza za pomocą elementów fieldset i legend
• Zapewnienie, że tagi otwierające i zamykające są używane zgodnie z specyfikacją
• Zapewnienie, że strony internetowe są dobrze sformułowane
• Użycie meta refresh do stworzenia natychmiastowego przekierowania po stron
• Identyfikacja celu linku za pomocą tekstu linku połączonego z jego otaczającą pozycją listy
• Identyfikacja celu linku za pomocą tekstu linku połączonego z jego otaczającym akapitem
• Identyfikacja celu linku w tabeli danych za pomocą tekstu linku połączonego z jego otaczającą komórką tabeli i powiązanymi komórkami nagłówka tabeli
• Identyfikacja celu linku za pomocą tekstu linku połączonego z poprzednim elementem nagłówka
• Identyfikacja celu linku w zagnieżdżonej liście za pomocą tekstu linku połączonego z nadrzędną pozycją listy, w której lista jest zagnieżdżona
• Użycie atrybutu target do otwarcia nowego okna na żądanie użytkownika i wskazanie tego w tekście linku
• Użycie przycisku z elementem select do wykonania akcji
• Użycie optgroup do grupowania elementów option wewnątrz select
• Dostarczanie tekstowych alternatyw dla emoji, emotikonów, sztuki ASCII i leetspeak
• Użycie HTML zgodnie ze specyfikacją
• Użycie atrybutu title do dostarczenia pomocy w kontekście
• Wskazanie wymaganych kontrolki formularza za pomocą label lub legend
• Użycie kontrolki formularza HTML i linków
• Zapewnienie, że atrybuty id są unikalne na stronie internetowej
• Zapewnienie, że elementy nie zawierają zduplikowanych atrybutów
• Użycie elementu track do dostarczenia napisów
• Użycie elementu track do dostarczenia opisów dźwiękowych
• Grupowanie powiązanych linków za pomocą elementu naw
• Użycie atrybutów autouzupełniania HTML 5.2
• Udostępnienie mechanizmu wyboru strony
• Dostarczanie poprawnie oznaczonych pól e-mail i hasła
• Użycie semantycznych elementów HTML do identyfikacji regionów strony

Wytyczne WCAG 2.2 dla CSS

• Pozycjonowanie treści w oparciu o znaczniki strukturalne
• Używanie CSS do ukrycia części tekstu linku
• Regulacja odstępów wewnątrz słowa przy pomocy właściwości letter-spacing w CSS
• Włączanie dekoracyjnych obrazów za pomocą CSS
• Używanie procentów do określania rozmiarów czcionek
• Używanie nazwanych rozmiarów czcionek
• Używanie jednostek em do określania rozmiarów czcionek
• Używanie CSS do zmiany prezentacji komponentu interfejsu użytkownika, gdy otrzymuje on fokus
• Skalowanie elementów formularza zawierających tekst
• Używanie reguł CSS dla marginesów i paddingu zamiast obrazów odstępczych do projektowania układu
• Określanie wyrównania do lewej LUB prawej w CSS
• Używanie względnych jednostek do ustawiania szerokości kolumn, tak aby linie miały średnio 80 znaków lub mniej po przeskalowaniu przeglądarki
• Określanie interlinii w CSS
• Kontrolowanie wizualnej prezentacji tekstu przy pomocy CSS
• Określanie kolorów tekstu i tła treści drugorzędnej, takiej jak banery, funkcje i nawigacja w CSS, nie określając jednocześnie kolorów tekstu i tła głównej treści
• Używanie wartości procentowych w CSS do określania rozmiarów kontenerów
• Określanie granic i układu w CSS, aby wyznaczyć obszary strony internetowej, nie określając jednocześnie kolorów tekstu i tła
• Dopasowywanie kolejności DOM do kolejności wizualnej
• Określanie rozmiaru kontenerów tekstowych za pomocą jednostek em
• Używanie przełącznika stylu do dostarczenia zgodnej alternatywnej wersji
• Używanie CSS do zastępowania tekstu obrazami tekstu i dostarczanie kontrolek interfejsu użytkownika do przełączania
• Używanie CSS Flexbox do ponownego przepływu treści
• Używanie zapytań medialnych i siatki CSS do przepływu kolumn
• Zezwolenie na przepływ z długimi adresami URL i ciągami tekstu
• Używanie zapytań medialnych do odblokowywania przylegających nagłówków/stopki
• Zezwolenie na odstępy tekstu bez zawijania
• Zezwalanie na nadpisanie odstępów tekstu
• Używanie max-width i height w CSS do dopasowywania obrazów
• Używanie width, max-width i flexbox w CSS do dopasowywania etykiet i pól wprowadzania
• Używanie zapytania CSS reduce-motion do zapobiegania ruchowi
• Tworzenie wskaźnika fokusu w dwóch kolorach, aby zapewnić wystarczający kontrast ze wszystkimi komponentami
• Tworzenie silnego wskaźnika fokusu w komponencie
• Używanie min-height i min-width w celu zapewnienia wystarczającego odstępu docelowego
• Używanie marginesu i scroll-margin w CSS, aby odsłonić treść

Wytyczne WCAG 2.2 dla JavaScript

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

Więcej informacji: https://www.w3.org/TR/WCAG22/