Szkolenia Dostępność i WCAG

Wdrożenia WCAG na stronach internetowych obejmują uporządkowanie struktury treści, obsługę klawiatury, poprawę kontrastu, opisów alternatywnych i komunikatów formularzy zgodnie z zasadami POUR. W praktyce warto zacząć od audytu aktualnego serwisu, sprawdzenia nagłówków, landmarków, fokusa, kolejności tabulacji oraz błędów wykrywanych automatycznie i manualnie. Przykładem takiego działania jest poprawienie formularza przez powiązanie pól z etykietami, dodanie komunikatów błędów odczytywanych przez czytniki ekranowe i uzupełnienie semantyki HTML.
Ten temat przerabiamy praktycznie na szkoleniu: Dostępność cyfrowa stron zgodnie z WCAG dla programistów.

Testowanie dostępności cyfrowej łączy narzędzia automatyczne z weryfikacją manualną, ponieważ same skanery nie wykrywają wszystkich problemów zgodności z WCAG. Warto sprawdzać serwisy w axe DevTools, Lighthouse, WAVE lub Pa11y, a następnie przejść stronę klawiaturą, zweryfikować kolejność odczytu i zachowanie w czytnikach ekranowych. Dobrym przykładem jest sytuacja, w której skaner nie zgłasza błędu, ale modal blokuje fokus i uniemożliwia zamknięcie okna bez myszy.
Dokładnie ten zestaw narzędzi i workflow ćwiczymy podczas szkolenia: Dostępność cyfrowa i standard WCAG.

WCAG 2.2 rozwijają wymagania znane z WCAG 2.1, szczególnie w obszarach związanych z nawigacją, fokusem i obsługą interfejsów przez różne grupy użytkowników. Przy porównaniu wersji warto sprawdzić, które kryteria sukcesu dotyczą formularzy, widoczności elementu aktywnego, przeciągania oraz wielkości celów dotykowych w używanych serwisach i komponentach. Przykładem są interaktywne elementy mobilne, które spełniały wcześniejsze wymagania, ale po aktualizacji standardu wymagają korekt w rozmiarze i sposobie obsługi.
Jeśli chcesz przećwiczyć to krok po kroku, zobacz: Podstawy dostępności cyfrowej.

Dostępne pliki PDF wymagają poprawnej struktury tagów, logicznej kolejności czytania, opisów alternatywnych, właściwych nagłówków oraz odpowiednio przygotowanych tabel i list. Podczas weryfikacji trzeba sprawdzić metadane, autotagowanie, jakość OCR dla skanów, linki, artefakty oraz raporty z Adobe Acrobat Pro i PDF Accessibility Checker. Typowym przykładem jest dokument wyeksportowany z edytora tekstu, który wygląda poprawnie wizualnie, ale nie ma prawidłowej hierarchii nagłówków ani odczytywalnej struktury dla technologii asystujących.
Wersję warsztatową (z konfiguracją i przykładami) znajdziesz w programie szkolenia: Dostępne pliki PDF.

Opisy alternatywne powinny oddawać funkcję i sens grafiki w konkretnym kontekście, a nie jedynie wymieniać wszystkie widoczne elementy. W praktyce trzeba ustalić, czy dana grafika jest informacyjna, funkcjonalna, dekoracyjna czy złożona, a następnie dobrać długość i poziom szczegółowości opisu do miejsca publikacji. Przykładem jest ikona lupy w wyszukiwarce, której opis nie powinien brzmieć „lupa”, tylko wskazywać działanie, na przykład „Szukaj”.
To jedno z zagadnień omawianych podczas szkolenia: Tworzenie opisów alternatywnych.

Najczęstsze błędy w treściach marketingowych i redakcyjnych dotyczą nieczytelnych linków, tekstu osadzonego na grafikach, słabego kontrastu, nieopisanych materiałów wizualnych i nieprawidłowej struktury nagłówków. Najpierw warto sprawdzić elementy wpływające bezpośrednio na odbiór treści: CTA, grafiki promocyjne, posty w mediach społecznościowych, napisy do wideo oraz dostępność formularzy kampanijnych. Przykładem szybkiej poprawy jest zamiana linku „kliknij tutaj” na opis celu działania oraz dodanie tekstu alternatywnego do baneru publikowanego w social mediach.
Ten temat przerabiamy praktycznie na szkoleniu: WCAG dla redakcji i marketingu - dostępne treści i komunikacja.