Strona główna » Blog » WCAG 2.2 nowe standardy dostępności cyfrowej – co powinieneś wiedzieć?
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.
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.
