WCAG 1.1.1: Treści nietekstowe

WCAG 1.1.1 Treści nietekstowe: Zapewnij alternatywy tekstowe

Kryterium sukcesu WCAG 1.1.1 „Treści nietekstowe” stanowi fundamentalną zasadę dostępności cyfrowej, wymagając, aby wszystkie treści nietekstowe posiadały alternatywną wersję tekstową o równoważnym znaczeniu. Jest to klucz do zapewnienia, że informacje wizualne, dźwiękowe lub inne, które nie są tekstem, mogą być przetwarzane i prezentowane w formach dostosowanych do potrzeb różnych użytkowników, takich jak duży druk, brajl, mowa syntetyczna, symbole czy prostszy język.

Zgodność z tym kryterium oznacza, że osoby niewidome, słabowidzące, z niepełnosprawnościami poznawczymi, a także użytkownicy korzystający z technologii wspomagających, mogą w pełni zrozumieć i interaktywnie korzystać z każdej treści na stronie internetowej, która nie jest pierwotnie tekstem. To nie tylko poprawia dostępność, ale także zwiększa użyteczność i indeksację treści przez wyszukiwarki.

Czym jest alternatywa tekstowa?

Alternatywa tekstowa to tekst, który programowo jest powiązany z treścią nietekstową i przedstawia jej równoważne znaczenie lub funkcję. Oznacza to, że alternatywa tekstowa powinna przenosić tę samą informację i pozwalać na wykonywanie tej samej funkcji, co oryginalna treść nietekstowa.

Dlaczego alternatywy tekstowe są kluczowe?

Zapewnienie alternatyw tekstowych dla treści nietekstowych ma ogromne znaczenie dla dostępności i użyteczności strony internetowej:

• Wsparcie dla osób niewidomych i słabowidzących: Czytniki ekranu i wyświetlacze brajlowskie polegają na tekście do interpretowania i prezentowania treści. Bez alternatyw tekstowych obrazy, grafiki czy ikony są dla tych użytkowników niewidoczne lub niezrozumiałe.
• Wsparcie dla osób z niepełnosprawnościami poznawczymi: Dobrze napisane alternatywy tekstowe mogą pomóc w zrozumieniu złożonych obrazów lub pojęć, zwłaszcza jeśli są sformułowane prostym językiem.
• Wsparcie dla osób z głuchoślepotą: Treści tekstowe mogą być przekształcone na formę brajlowską, umożliwiając dostęp do informacji.
• Możliwość transformacji treści: Alternatywy tekstowe umożliwiają programowe przekształcanie treści na inne formy, takie jak duży druk (powiększenie tekstu), mowa syntetyczna (odczytywanie tekstu na głos), czy symboliczne przedstawienia, co jest fundamentalne dla elastyczności dostępu.
• Poprawa SEO: Wyszukiwarki internetowe nie „widzą” obrazów w taki sam sposób jak ludzie. Alternatywy tekstowe (np. atrybut alt dla obrazów) dostarczają kontekstu, co może poprawić indeksowanie i ranking strony.
• Użyteczność dla wszystkich: W przypadku wolnego połączenia internetowego lub wyłączonego ładowania obrazów, tekst alternatywny zapewnia podstawową informację o treści.

Kryteria sukcesu i wymagania

Kryterium sukcesu 1.1.1 „Treści nietekstowe” jest na poziomie A (najniższy poziom zgodności) i ma zastosowanie do wszystkich treści internetowych.

Rodzaje treści nietekstowych wymagających alternatywy tekstowej:

Wymóg alternatywy tekstowej dotyczy szerokiego zakresu elementów:

• Obrazy i grafiki: Zdjęcia, ilustracje, logotypy, wykresy, diagramy, mapy, ikony.
• Wizualne CAPTCHA: Obrazy zawierające tekst lub wzory, które użytkownik musi zidentyfikować.
• Elementy sterujące formularzy oparte na obrazach: Przycisk wysyłania (<input type="image">).
• Obiekty osadzone: Treści wtyczek (np. Flash, Java Applets), które dostarczają informacji wizualnych.
• Ramki: Elementy <frame> i <iframe> wymagają atrybutu title do opisu ich zawartości.
• Audio i wideo (w kontekście wizualnych elementów): O ile WCAG posiada szczegółowe kryteria dotyczące alternatyw dla mediów zależnych od czasu (np. napisy, audiodeskrypcja), o tyle dla elementów wideo lub audio, które przekazują informacje wizualne (np. ikona odtwarzania), również wymagane są alternatywy tekstowe.

Wyjątki od wymogu alternatywy tekstowej:

Istnieją pewne specyficzne sytuacje, w których alternatywa tekstowa nie jest wymagana lub jest wymagana w innej formie:

• Elementy dekoracyjne: Jeśli treść nietekstowa jest czysto dekoracyjna i nie przekazuje żadnej znaczącej informacji, powinna być programowo ignorowana przez technologie wspomagające (np. pusty atrybut alt="" dla obrazów lub umieszczenie ich jako tło CSS).
• Testy CAPTCHA: Choć same CAPTCHA są treścią nietekstową, alternatywa tekstowa w postaci prostego opisu jest niewystarczająca. Wymagane są alternatywy w innych formach (np. audio CAPTCHA, alternatywne metody weryfikacji tożsamości), aby zapewnić dostępność dla osób z różnymi niepełnosprawnościami.
• Alternatywy dla mediów zależnych od czasu: Dla treści audio i wideo (nagranych lub na żywo), WCAG przewiduje oddzielne kryteria sukcesu (np. napisy, transkrypcje, audiodeskrypcje), które są bardziej szczegółowe niż prosta alternatywa tekstowa.
• Testy lub ćwiczenia: Jeśli obraz jest częścią testu i alternatywa tekstowa ujawniłaby odpowiedź, tekst alternatywny może być mniej szczegółowy lub pominięty, ale muszą być dostępne inne sposoby wykonania zadania.

Praktyczne wskazówki dotyczące zgodności

1. Obrazy i grafiki:

• Obrazy informacyjne: Użyj atrybutu alt, aby dostarczyć krótki, ale treściwy opis obrazu. Tekst powinien przekazywać tę samą informację, co obraz.Przykład: <img src="piesek.jpg" alt="Szczeniak rasy beagle leżący na miękkim kocu.">
• Obrazy funkcjonalne (przyciski, linki): Atrybut alt powinien opisywać funkcję lub cel linku/przycisku, a nie sam obraz.Przykład: <a href="/koszyk"><img src="ikona-koszyka.png" alt="Przejdź do koszyka"></a>
• Obrazy dekoracyjne: Użyj pustego atrybutu alt="". Jeśli obraz jest czysto estetyczny i nie przekazuje żadnej informacji, nie powinien być odczytywany przez czytniki ekranu. Alternatywnie, umieść takie obrazy jako tło w CSS.Przykład: <img src="ozdobnik.png" alt="">
• Złożone obrazy (wykresy, diagramy): Dla obrazów zawierających dużo informacji, alt powinien zawierać krótkie podsumowanie lub wskazywać na dłuższą, szczegółową alternatywę tekstową (np. link do opisu tekstowego, tabela danych, lub użycie aria-describedby do powiązania obrazu z dłuższym tekstem na tej samej stronie).

2. Ikony:

• Ikony z towarzyszącym tekstem: Jeśli ikona jest obok tekstu, który już opisuje jej funkcję (np. ikona lupy obok słowa „Szukaj”), ikona jest często dekoracyjna i można użyć alt="" lub aria-hidden="true".
• Ikony bez towarzyszącego tekstu (samodzielne): Jeśli ikona jest jedynym elementem przekazującym informację lub funkcję (np. ikona koszyka bez tekstu), musi mieć dostępną alternatywę tekstową (np. alt lub aria-label dla elementu interaktywnego).

3. CAPTCHA:

• Zapewnij co najmniej dwie różne formy CAPTCHA, aby użytkownicy mogli wybrać tę, która jest dla nich dostępna (np. wizualna i dźwiękowa).
• Dla CAPTCHA wizualnych, opisz cel i ewentualnie instrukcje w tekście alternatywnym, ale pamiętaj, że to nie zastąpi alternatywnej formy.

4. Elementy sterujące formularzy (graficzne):

• Dla <input type="image"> zawsze używaj atrybutu alt, który opisuje działanie przycisku.

5. Obiekty osadzone (np. wideo, audio, Flash):

• Dla elementów <iframe> lub <frame>, użyj atrybutu title, aby opisać zawartość ramki.
• Dla <object>, zawartość tekstowa między tagami <object></object> służy jako alternatywa tekstowa.

Przykłady implementacji

Obrazy informacyjne

Obrazy funkcjonalne (przyciski/linki)

Obrazy dekoracyjne

Złożone obrazy (wykresy)

CAPTCHA

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Kontekstualność i zwięzłość: Tekst alternatywny powinien być krótki, ale wystarczająco informatywny, aby przekazać istotę obrazu w danym kontekście.
• Unikaj zwrotów typu „obrazek przedstawia”: Czytniki ekranu zazwyczaj automatycznie informują, że element jest obrazem. Dodatkowe słowa są zbędne.
• Testowanie: Regularnie testuj swoją stronę za pomocą czytników ekranu, aby upewnić się, że alternatywy tekstowe są poprawnie interpretowane i zrozumiałe.
• Regularne audyty: Przeprowadzaj audyty dostępności, aby identyfikować i korygować błędy w alternatywach tekstowych.
• Dla złożonych obrazów, oferuj pełną transkrypcję: Zamiast próbować upchnąć wszystkie informacje w atrybucie alt, podaj link do strony z pełnym opisem, tabelą danych lub transkrypcją, lub użyj aria-describedby.

Typowe pułapki:

• Brak atrybutu alt: Najczęstszy błąd, powodujący, że obrazy są całkowicie niedostępne.
• Powtarzające się lub zbyt długie alt: Tekst alternatywny powinien być zwięzły. Zbyt długi tekst może być męczący dla użytkowników czytników ekranu.
• Dekoracyjne obrazy z treścią w alt: Powoduje to niepotrzebne zaśmiecanie czytników ekranu i utrudnia nawigację.
• Używanie atrybutu title zamiast alt: Atrybut title służy do dostarczania dodatkowych, uzupełniających informacji i nie jest niezawodnie odczytywany przez wszystkie technologie wspomagające jako substytut alt. Niektóre przeglądarki wyświetlają go jako dymek, ale nie jest to uniwersalna alternatywa.
• Automatycznie generowany tekst alternatywny: Narzędzia do generowania tekstu alternatywnego (np. na podstawie nazwy pliku) często tworzą bezużyteczne lub mylące opisy (np. alt="DSC_001.jpg").
• Brak alternatywnych form dla CAPTCHA: Poleganie wyłącznie na wizualnej formie CAPTCHA wyklucza wiele grup użytkowników.

Podsumowanie

Zapewnienie odpowiednich alternatyw tekstowych dla wszystkich treści nietekstowych jest fundamentalnym krokiem w tworzeniu dostępnych stron internetowych. Zgodność z WCAG 1.1.1 nie tylko spełnia standardy dostępności, ale także wzbogaca doświadczenie użytkownika dla wszystkich, niezależnie od ich zdolności lub używanych technologii. Dbałość o szczegóły w tworzeniu tekstów alternatywnych to inwestycja w inkluzywny i użyteczny internet.