WCAG 2.1 – Kryterium 1.1.1 Treść nietekstowa (poziom A)

Wszelkie treści nietekstowe przedstawione użytkownikowi mają swoją tekstową alternatywę , która służy tym samym celom.

Kryterium to wymaga, by każdy element nietekstowy (obraz, wideo, formularz, itp.) posiadał odpowiednią alternatywę tekstową, umożliwiającą użytkownikom korzystającym z technologii asystujących dostęp do tych treści.

Wyjątkiem sa sytuacje wymienione poniżej:

  • Kontrolki użytkownika i wprowadzanie danych: Jeżeli element nietekstowy jest kontrolką użytkownika lub polem wprowadzania danych, to jest ono opisane tekstowo w sposób wyjaśniający jego przeznaczenie. (Zobacz Kryterium Sukcesu 4.1.2, które dotyczy wymagań dla kontrolek i danych wejściowych.)
  • Media zależne od czasu: Jeśli element nietekstowy to media zależne od czasu, wtedy tekstowy odpowiednik musi zawierać opisowy zarys tej treści. (Wytyczna 1.2 dotyczy szczegółowych wymagań dla mediów.)
  • Testy: Jeśli element nietekstowy to test lub ćwiczenie, które traci znaczenie w formie tekstowej, tekstowy odpowiednik powinien przynajmniej wyjaśniać cel tego elementu.
  • Odczucia zmysłowe: Jeśli element nietekstowy ma na celu wywołanie określonych wrażeń zmysłowych, tekstowy odpowiednik powinien opisywać te odczucia i ich znaczenie.
  • CAPTCHA: W przypadku CAPTCHA, której celem jest weryfikacja, czy użytkownikiem jest człowiek, należy dostarczyć tekstowy opis wyjaśniający cel oraz zapewnić alternatywne rozwiązania CAPTCHA, odpowiednie dla różnych grup użytkowników, uwzględniając różne rodzaje niepełnosprawności.
  • Elementy dekoracyjne i formatowanie: Jeśli element nietekstowy pełni wyłącznie funkcję dekoracyjną, służy formatowaniu, lub nie jest wyświetlany użytkownikowi, powinien być zrealizowany w sposób, który umożliwia jego ignorowanie przez technologie wspomagające.

Zasady tworzenia tekstów alternatywnych

Stosowane techniki

Techniki dla treści nietekstowej, która jet wazna i powinna zostać zakomunikowana przez technologię wspomagającą

  • użycie atrybutu aria-label, aby zapewnić etykiety dla obiektów,
  • użycie atrybutu aria-labelledby, aby zapewnić alternatywę tekstową dla treści nietekstowej,
  • użycie tekstu alternatywnego dla jednego elementu w grupie obrazów opisujących wszystkie elementy w grupie,
  • łączenie sąsiadujących obrazów i łączy tekstowych do tego samego zasobu,
  • zapewnienie alternatyw tekstowych w elementach apletu,
  • użycie atrybutów alt w elementach img,
  • użycie ciała (treści) elementu object,
  • zapewnienie tekstowych alternatyw dla sztuki ASCII, emotikonów i tekstu szyfrowanego,
  • stosowanie alternatyw tekstowych do obrazów za pomocą wpisu Alt w dokumentach PDF,
  • użycie atrybutu aria-describedby, aby zapewnić odpowiedniki tekstowe dla obrazów,
  • użycie atrybutu aria-labelledby, aby połączyć etykietę kilku węzłów tekstowych,
  • zapewnienie alternatyw tekstowych dla elementów area graficznych map odsyłaczy,
  • zapewnienie tekstu łącza opisującego cel łącza dla elementów kotwiących,
  • użycie atrybutów alt na obrazach używanych jako przyciski przesyłania,
  • użycie elementu label do kojarzenia etykiet tekstowych z kontrolkami formularzy,
  • użycie atrybutu title do identyfikacji kontrolek formularzy, gdy nie można użyć elementu label,
  • zapewnienie długiego opisu w innym miejscu z łączem sąsiadującym bezpośrednio z treścią nietekstową,
  • zapewnienie długiego opisu w tekście w pobliżu treści nietekstowych, z odniesieniem do lokalizacji długiego opisu w krótkim opisie,
  • zapewnienie dla treści nietekstowych długiego opisu, który wskazuje ten sam cel i prezentuje te same informacje, co treści nietekstowe,
  • użycie longdesc,

Techniki dla treści nietekstowej, która powinna być ignorowana przez przez technologię wspomagającą

  • użycie CSS do dodawania obrazów dekoracyjnych,
  • użycie pustego tekstu alternatywnego i nieużywanie atrybutu title w elementach img dla obrazów, które powinny być zignorowane przez technologię wspomagającą,
  • Ukrywanie obrazów dekoracyjnych za pomocą znacznika Artifact w dokumentach PDF.

Najczęściej spotykane błędy

  • użycie CSS do osadzania obrazów, które przekazują ważne informacje
  • alternatywa tekstowa, która nie zawiera informacji przekazywanych przez różnice kolorów w obrazie
  • brak aktualizacji tekstów alternatywnych w przypadku wystąpienia zmian w treści nietekstowej
  • użycie alternatyw tekstowych, które nie są alternatywne (np. nazw plików lub tekstu zastępczego)
  • pominięcie w HTML atrybutu alt dla treści nietekstowych wykorzystywanych wyłącznie w celach dekoracyjnych
  • dostarczenie tekstu alternatywnego, który nie jest pusty (np. alt="spacja" lub alt="obraz") dla obrazów, które powinny zostać zignorowane przez technologię asystującą
  • pominięcie atrybutu alt lub tekstu alternatywnego w elementach img, elementach area i polach typu "image"
  • podawanie długich opisów dla treści nietekstowych, które nie służą temu samemu celowi lub nie przedstawiają tych samych informacji
  • używanie symboli tekstowych w celu przedstawienia tekstu bez zapewnienia tekstu alternatywnego
  • używanie grafiki ASCII bez zapewniania tekstu alternatywnego

Pytania kontrolne dotyczące kryterium

Pytania z listy kontrolnej do badania zgodności stron internetowych z wymaganiami ustawy z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych, opublikowanej na stronie internetowej Ministerstwa Cyfryzacji Jak samodzielnie zbadać dostępność cyfrową strony internetowej? Link otwiera się w nowym oknie

  • Czy w przypadku obecności na badanych stronach elementów multimedialnych, każdemu z nich przypisany jest poprawnie sformułowany tytuł wyjaśniający co jest przedstawione lub czego dotyczy?
  • Czy istnieje alternatywne, rozwiązanie powodujące pełną dostępność elementów związanych z CAPTCHA, jeśli takie rozwiązanie zostało zastosowane?
  • Czy elementy graficzne, jeśli tego wymagają, posiadają poprawnie sformułowany, łatwo dostępny poszerzony opis (np. za pomocą znaczników details i summary)?
  • Czy w przypadku obecności na badanych stronach któregokolwiek z elementów applet, object, embed, canvas, każdemu z nich przypisany jest poprawnie sformułowana alternatywa tekstowa lub odpowiednio „noembed” lub ewentualnie długi opis albo inny jednoznaczny, wyczerpujący opis zawartości znajdujący się w bezpośredniej bliskości na stronie?
  • Czy we wszystkich przypadkach, gdy pojawia się opis alternatywny (atrybut alt) tekst opisu alternatywnego jest odpowiednio zwięzły?
  • Czy każdemu graficznych elementów osadzonych w znacznikach img mających wyłącznie rolę dekoracyjną przypisany jest pusty atrybut „alt” (alt=””)?
  • Czy w przypadku obecności na badanych stronach któregokolwiek z tych elementów, każdemu z nich przypisany jest poprawnie sformułowany atrybut „alt” (lub inny, odpowiedni sposób opisu)?
  • Czy element formularza ma odpowiednio sformułowaną i poprawnie umieszczoną w kodzie HTML etykietę (label)?
  • Czy w tekście nie ma użycia symboli ASCII-Art, bądź jeśli są, to czy jest dostarczona dla nich poprawna, dostępna alternatywa?
  • Czy dokumenty do pobrania w serwisie są dostępne lub czy posiadają dostępną alternatywę?
  • Czy w przypadku obecności w arkuszu stylów właściwości „content” (za wyjątkiem ikon zawartych w plikach czcionek), przekazana treść nie niesie znaczącej informacji bądź czy niesiona informacja jest dostępna również w inny sposób?
  • Czy w przypadku gdy skrypt powoduje zmianę w elemencie nietekstowym na stronie lub wewnątrz ramki, alternatywa tekstowa dla tego elementu ulega również zmianie jeśli jest to niezbędne?

Przyczytaj także:

Skontaktuj się z nami

Dowiedz się więcej o tym, jak możemy pomóc Twojemu biznesowi rozwijać się w cyfrowym świecie.

Razem stworzymy coś wyjątkowego!