1.1.1 Treść nietekstowa (ang.) Non-text Content

Istota i cel kryterium

Kryterium WCAG 1.1.1 Treść Nietekstowa jest jednym z najważniejszych i najbardziej podstawowych wymogów dostępności, zapewniającym dostęp do informacji osobom niewidomym, niedowidzącym i korzystającym z technologii wspomagających.

Celem jest zapewnienie, że wszystkie treści nietekstowe (zdjęcia, wykresy, ikony, media, przyciski graficzne, (ang.) CAPTCHA) mają swój tekstowy odpowiednik (alternatywę tekstową).

Dzięki temu technologie wspomagające (np. czytniki ekranu, terminale brajlowskie) mogą odczytać lub przetworzyć te informacje i zaprezentować je użytkownikowi w dostępnej dla niego formie.

Definicja w j. angielskim

Definicja dostępna pod adresem (link otworzy się w nowej karcie):
https://www.w3.org/WAI/WCAG22/quickref/#non-text-content

Definicja w j. polskim

Definicja dostępna pod adresem (link otworzy się w nowej karcie):
https://www.w3.org/Translations/WCAG21-pl/#tresc-nietekstowa

Słownik pojęć

Alternatywa tekstowa (ang.) text alternative

–

Tekst programowo powiązany z treścią nietekstową, który przekazuje jej pełne znaczenie lub funkcję. Pozwala technologiom wspomagającym na udostępnienie informacji osobom, które nie widzą lub nie słyszą oryginalnego elementu.

Wpływ na dostępność (Kogo wspierasz?)

Realizując to kryterium, usuwasz bariery dla wielu grup użytkowników:

• Osoby niewidome i niedowidzące: Dzięki alternatywom tekstowym czytniki ekranu mogą zwerbalizować treść grafik, wykresów czy przycisków.
• Osoby z głuchoślepotą: Tekst alternatywny pozwala na przekazanie informacji za pomocą terminali brajlowskich.
• Użytkownicy z niepełnosprawnościami poznawczymi: Jasne opisy tekstowe ułatwiają zrozumienie skomplikowanych infografik czy symboli.
• Wszyscy użytkownicy: Alternatywy tekstowe pojawiają się, gdy obraz nie może zostać wczytany (np. przy słabym łączu), a także znacząco poprawiają SEO, pomagając wyszukiwarkom zrozumieć zawartość multimedialną strony.

Zasady wdrażania i wymagania techniczne

Sposób implementacji zależy od roli, jaką dany element pełni w interfejsie:

• Obiekty osadzone i ramki: Dla elementów <iframe> stosuj atrybut title, który informuje o zawartości ramki. W przypadku znacznika <object> umieść alternatywę tekstową bezpośrednio pomiędzy tagami otwierającymi i zamykającymi.
• Obrazy informacyjne: Zastosuj atrybut alt, w którym krótko i konkretnie opiszesz to, co znajduje się na obrazku. Pamiętaj, aby opis oddawał sens grafiki w danym kontekście.
• Obrazy funkcjonalne (np. ikony w linkach): W tym przypadku atrybut alt lub etykieta aria-label musi opisywać cel działania, a nie wygląd grafiki. Przykładowo, ikona koszyka powinna mieć tekst „Przejdź do koszyka”, a nie „ikona koszyka”.
• Złożone dane (wykresy, infografiki): Krótki opis w alt to za mało. Wykorzystaj aria-describedby, aby powiązać grafikę z pełnym opisem tekstowym lub tabelą danych znajdującą się na stronie.
• Elementy sterujące formularzy: Dla przycisków typu <input type="image"> zawsze definiuj atrybut alt opisujący akcję.

Wyjątki i sytuacje szczególne

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

• Testy i ćwiczenia: Jeśli opis obrazka zdradziłby odpowiedź w zadaniu, dopuszcza się mniej szczegółową alternatywę, o ile zapewniono inny sposób realizacji celu edukacyjnego.
• Grafiki dekoracyjne – elementy służące wyłącznie estetyce (np. separatory, ozdobne linie czy tła ), które nie wnoszą nowej informacji muszą być zignorowane przez technologie wspomagające, aby nie wprowadzać chaosu podczas czytania strony. Aby to osiągnąć, zastosuj pusty atrybut alt="" lub ukryj element technicznie za pomocą aria-hidden="true".
• Media zależne od czasu: Nagrania wideo i audio podlegają innym, bardziej szczegółowym kryteriom (transkrypcje, audiodeskrypcja), jednak ich elementy sterujące (ikony) nadal muszą spełniać wymóg 1.1.1.
• CAPTCHA: Ponieważ tekstowa alternatywa mogłaby zdradzić rozwiązanie, wymagane jest dostarczenie alternatywnych form weryfikacji (np. wersja dźwiękowa dla osób niewidomych) oraz opisanie celu elementu.

Przykłady implementacji

Obrazy informacyjne

Obrazy funkcjonalne (przyciski/linki)

Obrazy dekoracyjne

Złożone obrazy (wykresy)

CAPTCHA

Najczęstsze błędy

• F3: Użycie właściwości (ang.) CSS (np. background-image) do osadzenia grafik przekazujących istotne informacje bez zapewnienia dostępnej alternatywy w kodzie (ang.) HTML.
• F13: Brak uwzględnienia w tekście alternatywnym informacji, które na obrazie są przekazywane wyłącznie za pomocą różnic kolorystycznych.
• F20: Nieaktualizowanie tekstu alternatywnego w momencie dynamicznej zmiany stanu lub zawartości elementu graficznego.
• F30: Używanie nazw plików (np. alt="wykres1.png"), rozszerzeń lub napisów zastępczych (np. alt="placeholder") jako tekstu zastępczego.
• F38: Całkowite pominięcie atrybutu alt w elementach <img> pełniących funkcję czysto dekoracyjną.
• F39: Wpisanie niepustej wartości w atrybucie alt dla grafik, które powinny być ignorowane przez czytniki ekranu (np. alt="linia" lub alt="ozdobnik").
• F65: Brak atrybutu alt na znacznikach <img>, <area> oraz <input type="image">.
• F67: Udostępnienie długiego opisu rozszerzonego, który przekazuje inne informacje lub realizuje inny cel niż grafika źródłowa.
• F71: Stosowanie znaków wizualnie imitujących litery (np. (ang.) leetspeak) bez dostarczenia czytelnej alternatywy tekstowej.
• F72: Używanie grafiki (ang.) ASCII art bez podania tekstowego odpowiednika lub mechanizmu umożliwiającego jej pominięcie.

Najlepsze praktyki

• Obrazy informacyjne: Każda grafika niosąca treść musi posiadać atrybut alt. Opis powinien być zwięzły i przekazywać tę samą informację, co obraz (np. <img src="wykres.png" alt="Wykres słupkowy pokazujący 20% wzrost sprzedaży w marcu">).
• Obrazy funkcjonalne: W przypadku grafik będących częścią przycisków lub linków, atrybut alt musi opisywać działanie elementu, a nie jego wygląd (np. <img src="lupa.png" alt="Szukaj">).
• Obrazy dekoracyjne: Elementy czysto estetyczne (tła, linie, ozdobniki) muszą posiadać pusty atrybut alt="". Dzięki temu czytniki ekranu pominą je, nie rozpraszając użytkownika.
• Obrazy złożone: Dla infografik i skomplikowanych diagramów stosuj krótkie podsumowanie w alt oraz pełny opis tekstowy w bezpośrednim sąsiedztwie grafiki (np. w formie tabeli danych). Możesz także użyć aria-describedby
• Ikony samodzielne: Jeśli ikona występuje bez towarzyszącego tekstu, musi posiadać czytelną alternatywę tekstową (np. aria-label="Zamknij menu" dla ikony krzyżyka).
• Ikony towarzyszące: Gdy ikona znajduje się obok tekstu, który już wyjaśnia jej funkcję, należy ją ukryć przed technologiami wspomagającymi, stosując alt="" lub aria-hidden="true".
• Graficzne przyciski formularzy: Elementy typu <input type="image"> wymagają atrybutu alt, który jasno określa funkcję przycisku (np. alt="Zapisz się do newslettera").
• Ramki (iframe): Każdy element <iframe> musi posiadać atrybut title, który krótko i precyzyjnie opisuje zawartość ramki (np. title="Odtwarzacz wideo z instrukcją logowania").
• Obiekty osadzone: Dla tagu <object> alternatywę tekstową umieszczaj zawsze pomiędzy znacznikiem otwierającym a zamykającym.
• Systemy CAPTCHA: Zawsze udostępniaj co najmniej dwie metody weryfikacji (np. wizualną i dźwiękową). W opisie tekstowym grafiki (ang.) CAPTCHA zawrzyj informację o jej celu oraz o dostępności innych form testu.

Metody testowania

• NVDA: Uruchom czytnik ekranu i przejdź przez wszystkie elementy nietekstowe (obrazy, ikony, grafiki). Upewnij się, że syntezator odczytuje treść, która oddaje cel lub znaczenie grafiki, a nie np. nazwę pliku. Pamiętaj, aby sprawdzić, czy obrazy dekoracyjne są przez program pomijane.
• Narzędzie deweloperskie (ang.) Developer Tools: Otwórz inspektora kodu (DOM) i sprawdź, czy każdy znaczniki <img> posiada atrybut alt. Zweryfikuj, czy elementy dekoracyjne mają pusty atrybut alt="" lub są wyciszone za pomocą aria-hidden="true", co pozwala technologiom wspomagającym na ich prawidłowe zignorowanie.
• (ang.) WAVE Evaluation Tool: Skorzystaj z tego rozszerzenia, aby uzyskać szybki podgląd wszystkich tekstów alternatywnych na stronie. Narzędzie to natychmiast oznaczy czerwonymi ikonami grafiki pozbawione opisu oraz zasygnalizuje potencjalne błędy w ich strukturze.
• (ang.) IBM Equal Access Toolkit: Przeprowadź automatyczny skan dostępności. Narzędzie to precyzyjnie wskaże błędy w implementacji mediów nietekstowych i pomoże Ci wykryć elementy graficzne, które wymagają uzupełnienia warstwy semantycznej.
• ANDI.JS: Wybierz moduł (ang.) „Graphics/Images”, aby sprawdzić, co dokładnie „widzi” technologia wspomagająca. Narzędzie podświetli każdy element graficzny i wyświetli tekst zastępczy, który zostanie przekazany użytkownikowi, ułatwiając weryfikację kontekstu.
• Testowanie manualne: Wyłącz ładowanie obrazów w ustawieniach przeglądarki. Sprawdź, czy strona pozostaje w pełni zrozumiała dla odbiorcy, a wyświetlone w miejscu grafik teksty alternatywne zachowują ciągłość i sens przekazu.

Sprawdź swoją wiedzę

W poniżej podanym linku znajduje się 5 przykładów zastosowania grafik na stronie internetowej. Twoim zadaniem jest ocenić, czy są one zgodne czy niezgodne z WCAG.

Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzie testowe, zbadaj elementy (Inspektor kodu) i zapisz swoje wnioski na kartce.

Proponowane narzędzia: (ang.) WAVE Evaluation Tool, (ang.) IBM Equal Access Toolkit, ANDI.JS, NVDA, Narzędzie deweloperskie (ang.) Developer Tools

Link: https://pdc.ambiscale.com/training/wcag-1-1-1/

Źródła

• Abou-Zahra S., Eggert E., Vanderheiden G. [i in.] (red.), „1.1.1 Non-text Content Level A”, [w:] Web Content Accessibility Guidelines (WCAG) 2.2 Quick Reference, 2025, https://www.w3.org/WAI/WCAG22/quickref/#non-text-content [dostęp: 13.03.2026].
• Accessibility Guidelines Working Group Participants, „Understanding SC 1.1.1 Non-text Content (Level A)”, [w:] WCAG 2.2 Understanding Docs, 2025, https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html [dostęp: 13.03.2026].
• World Wide Web Consortium (W3C), „Kryterium sukcesu 1.1.1 Treść nietekstowa”, [w:] Web Content Accessibility Guidelines (WCAG) 2.1, tłum. Fundacja Instytut Rozwoju Regionalnego, 2021, https://www.w3.org/Translations/WCAG21-pl/#tresc-nietekstowa [dostęp: 13.03.2026].
• Accessibility Guidelines Working Group Participants, „Technique F3: Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images”, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F3 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F13 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F20 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F30 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F38 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology”, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F39 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type „image””, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F65 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F67 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative”, [w:] Techniques for WCAG 2.2, 2025, https://www.w3.org/WAI/WCAG22/Techniques/failures/F71 [dostęp: 31.08.2026].
• Accessibility Guidelines Working Group Participants, „Technique F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative”, [w:] Techniques for WCAG 2.2, 2026, https://www.w3.org/WAI/WCAG22/Techniques/failures/F72 [dostęp: 31.08.2026].
• DOCK sp. z o.o., WCAG 1.1.1: Treści nietekstowe, https://wcag.dock.codes/pl/dokumentacja/wcag-111/ [dostęp: 13.03.2026].

Dodatkowe linki

• W3C WCAG:
  • Dokładna definicja: https://www.w3.org/WAI/WCAG22/quickref/#non-text-content
  • Zrozumienie podpunktu: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html