WCAG 1.1.1: Treści nietekstowe

Co Oznacza Ta Zasada

Kryterium sukcesu WCAG 1.1.1 Non-text Content jest wymaganiem na poziomie A w ramach zasady Postrzegalność. Stanowi ono, że cała treść nietekstowa prezentowana użytkownikowi musi mieć tekstową alternatywę, która pełni równoważną funkcję. „Treść nietekstowa” jest zdefiniowana szeroko: obejmuje obrazy rastrowe (JPEG, PNG, GIF, WebP), grafiki wektorowe (SVG), przyciski i pola formularzy oparte na obrazach, mapy obrazów, elementy canvas, klipy audio, wideo, animacje, CAPTCHAs oraz dekoracyjne ozdobniki.

Tekstowa alternatywa może przyjmować różne formy w zależności od typu elementu: atrybut alt w elemencie <img>, aria-label lub aria-labelledby w SVG lub elemencie z rolą, element title wewnątrz <object> albo <figcaption> powiązany z elementem figure. Kluczowym wymaganiem jest to, aby tekst alternatywny przekazywał tę samą informację lub funkcję co sama treść wizualna — nie może być jedynie nazwą pliku ani ogólnym wypełniaczem.

Kryterium definiuje kilka konkretnych przypadków, które określają, jak powinna wyglądać odpowiednia tekstowa alternatywa:

• Kontrolki i pola wejściowe: Jeśli treść nietekstowa jest kontrolką lub przyjmuje dane od użytkownika (np. przycisk graficzny lub obraz użyty jako link), tekstowa alternatywa musi opisywać jej cel lub funkcję, a nie tylko wygląd.
• Media zależne od czasu: Treści tylko audio lub tylko wideo używane jako samodzielna prezentacja wymagają co najmniej opisowej etykiety je identyfikującej; pełne transkrypcje i napisy są omawiane w późniejszych kryteriach (1.2.x).
• Testy i doświadczenia sensoryczne: Jeśli treść jest testem lub ćwiczeniem, którego nie da się przedstawić w formie tekstu bez zniweczenia jego celu (np. wizualna łamigłówka), tekstowa alternatywa musi jedynie identyfikować i opisywać treść nietekstową.
• CAPTCHAs: Tekstowe alternatywy muszą opisywać cel CAPTCHA, a także należy zapewnić alternatywną formę CAPTCHA wykorzystującą inny zmysł.
• Dekoracja, formatowanie i treść niewidoczna: Jeśli obraz jest czysto dekoracyjny, użyty do odstępów lub nie jest prezentowany użytkownikom, powinien być zaimplementowany tak, aby technologia asystująca mogła go zignorować — zazwyczaj poprzez pusty atrybut alt="" lub role="presentation".

Pozytywny wynik jest osiągnięty, gdy każdy znaczący element nietekstowy albo udostępnia programistyczną tekstową alternatywę, która równoważnie przekazuje jego cel, albo jest wyraźnie oznaczony jako dekoracyjny, tak aby technologie asystujące mogły go pominąć. Negatywny wynik występuje, gdy obraz w ogóle nie ma atrybutu alt, gdy wartość alt jest nazwą pliku (np. alt="img_header_logo_v2.png"), gdy SVG użyty jako treść znacząca nie ma ani elementu <title>, ani dostępnej etykiety, lub gdy obraz dekoracyjny błędnie ma opisowy tekst alt, który wprowadza szum dla użytkowników czytników ekranu.

Dlaczego To Ma Znaczenie

Zgodnie z danymi Światowej Organizacji Zdrowia około 2,2 miliarda osób na świecie ma jakąś formę zaburzenia widzenia lub ślepoty. Użytkownicy czytników ekranu — którzy polegają na syntezatorze mowy lub monitorach brajlowskich do konsumowania treści cyfrowych — są całkowicie zależni od tekstowych alternatyw, aby zrozumieć obrazy, ikony, wykresy i graficzne kontrolki. Bez poprawnego tekstu alt strona produktu w serwisie e-commerce sprowadza się do listy cen bez kontekstu wizualnego; nawigacja banku pełna logotypów staje się rzędem nieopisanych przycisków; diagram w szpitalnym narzędziu do samodzielnej oceny objawów jest niewidoczny dla użytkownika próbującego samodzielnie się zdiagnozować.

Rozważmy konkretny scenariusz: użytkownik, który jest niewidomy, odwiedza turecką platformę e-commerce, aby kupić kurtkę. Karuzela produktów zawiera sześć obrazów pokazujących różne kąty i warianty kolorystyczne kurtki. Jeśli żaden z tych obrazów nie ma znaczącego tekstu alt, czytnik ekranu użytkownika ogłasza jedynie „image, image, image” — sześć razy. Nie jest w stanie ustalić, który wariant jest granatowy, a który czarny, nie rozumie, który obraz pokazuje tylną kieszeń i może całkowicie zrezygnować z zakupu. Widziany kolega z tym samym linkiem do produktu finalizuje zakup w mniej niż dwie minuty. Ta różnica jest zarówno porażką w zakresie dostępności, jak i stratą biznesową.

Poza ślepotą, to kryterium przynosi korzyści także użytkownikom z niepełnosprawnościami poznawczymi, którzy polegają na narzędziach text-to-speech jako wsparciu w czytaniu, użytkownikom z niepełnosprawnościami ruchowymi, którzy nawigują za pomocą klawiatury i głosu i potrzebują jasnych etykiet na kontrolkach interaktywnych, oraz użytkownikom z ograniczoną przepustowością łącza, u których obrazy mogą się nie wczytać — w takich przypadkach tekst alt pełni funkcję awaryjnego zamiennika. Dodatkowo dobrze przygotowany tekst alt poprawia indeksowanie przez wyszukiwarki, ponieważ roboty traktują atrybuty alt obrazów jako istotne sygnały tekstowe, bezpośrednio wspierając wyniki SEO.

Powiązane Zasady Axe-core

Silnik dostępności axe-core egzekwuje WCAG 1.1.1 za pomocą siedmiu odrębnych zautomatyzowanych zasad. Zrozumienie, co każda z nich sprawdza — i gdzie leżą jej ograniczenia — jest kluczowe dla kompletnej strategii testowania.

• image-alt: Sprawdza, czy każdy element <img> ma atrybut alt (który może być pusty dla obrazów dekoracyjnych) lub nazwę dostępną zapewnioną przez aria-label, aria-labelledby lub title. Oznacza obrazy, które w ogóle nie mają atrybutu alt, ponieważ przeglądarka wówczas udostępnia ścieżkę pliku jako nazwę dostępną.
• input-image-alt: Sprawdza, czy elementy <input type="image"> mają niepusty atrybut alt. Pola typu image działają jako przyciski wysyłania i muszą przekazywać swoją funkcję, a nie tylko wygląd. Brak lub pusty alt w polu typu image sprawia, że przycisk jest w praktyce bezużyteczny dla użytkownika czytnika ekranu.
• area-alt: Sprawdza, czy każdy element <area> w mapie obrazów ma niepustą tekstową alternatywę poprzez alt, aria-label lub aria-labelledby. Mapy obrazów są wzorcem legacy, nadal używanym w niektórych aplikacjach korporacyjnych i portalach sektora publicznego, a każdy hotspot musi niezależnie opisywać swój cel lub miejsce docelowe linku.
• object-alt: Sprawdza, czy elementy <object> mają nazwę dostępną. Element <object> był historycznie używany do osadzania treści Flash, plików PDF lub innych mediów; bez etykiety czytniki ekranu nie mają sposobu, aby zidentyfikować osadzoną treść.
• svg-img-alt: Sprawdza, czy osadzone w kodzie elementy <svg> z role="img" mają nazwę dostępną, zazwyczaj zapewnianą przez podrzędny element <title> (z pasującym aria-labelledby) lub atrybut aria-label w elemencie głównym SVG. Nowoczesne interfejsy szeroko wykorzystują SVG do ikon i ilustracji; ta zasada wychwytuje nieopisane SVG, które niosą znaczenie.
• role-img-alt: Sprawdza, czy każdy element z role="img" — które można zastosować do elementów innych niż SVG, takich jak <div> lub <span> używanych jako kontenery obrazów — ma nazwę dostępną. Ten wzorzec jest powszechny w niestandardowych systemach ikon i implementacjach z obrazami w tle CSS, gdzie nie używa się natywnego elementu obrazu.
• image-redundant-alt: Oznacza sytuacje, w których tekst alt obrazu duplikuje sąsiadujący widoczny tekst, zazwyczaj gdy obraz pojawia się wewnątrz znacznika anchor obok etykiety tekstowej. Choć nie jest to twarda porażka, redundantny tekst alt powoduje, że czytniki ekranu ogłaszają tę samą informację dwukrotnie, pogarszając komfort słuchania. Ta zasada wymaga osądu człowieka, aby poprawnie rozwiązać problem, ponieważ tylko osoba może ocenić, czy powtórzenie jest rzeczywiście zbędne, czy celowo dodane.

Ważne jest, aby zauważyć, że narzędzia automatyczne, w tym axe-core, nie są w stanie ocenić jakości tekstu alt — jedynie jego obecność i podstawową strukturę. Zasada może zostać zaliczona dla obrazu z alt="photo" lub alt="decorative border", mimo że żaden z tych opisów nie jest znaczący. Dlatego zawsze konieczny jest ręczny przegląd obok skanowania automatycznego, aby potwierdzić, że tekst alt dokładnie opisuje treść i cel każdego obrazu.

Jak Testować

1. Automatyczne skanowanie za pomocą axe DevTools lub Lighthouse: Zainstaluj rozszerzenie przeglądarki axe DevTools (dostępne dla Chrome i Firefox). Otwórz testowaną stronę, aktywuj rozszerzenie i uruchom analizę całej strony. Przefiltruj wyniki według identyfikatorów zasad wymienionych powyżej: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt i image-redundant-alt. Dla każdego oznaczonego elementu narzędzie podświetla wadliwy węzeł w DOM i wyjaśnia naruszenie. Lighthouse (wbudowany w Chrome DevTools w sekcji Accessibility audit) również pokazuje naruszenia image-alt ze szczegółami na poziomie elementu. Zarejestruj wszystkie naruszenia wraz z selektorami elementów i kontekstem otoczenia na potrzeby przekazania programistom.
2. Ręczna inspekcja DOM: Otwórz panel Elements w DevTools przeglądarki i wyszukaj wszystkie znaczniki <img>, <input type="image">, <area>, <object> i <svg>. Dla każdego z nich sprawdź, czy obecny jest odpowiedni atrybut alt lub etykieta ARIA oraz czy jej wartość jest znacząca w kontekście. Zwróć szczególną uwagę na obrazy ładowane dynamicznie za pomocą frameworków JavaScript, takich jak React lub Vue, które mogą nie pojawiać się w statycznym zrzucie HTML.
3. Testowanie z czytnikiem ekranu NVDA i Firefox: Uruchom NVDA (darmowy, Windows) i otwórz stronę w Firefox. Nawiguj za pomocą klawisza G, aby przeskakiwać między grafikami. NVDA ogłasza nazwę dostępną każdego obrazu; nasłuchuj ogłoszeń ścieżek plików, „image” lub pustych ogłoszeń — wszystkie one wskazują na błąd. W przypadku przycisków graficznych i linków użyj klawisza Tab, aby przejść do każdej kontrolki i sprawdź, czy wypowiadana etykieta przekazuje działanie, które kontrolka wykonuje.
4. Testowanie z czytnikiem ekranu VoiceOver i Safari (macOS/iOS): Włącz VoiceOver (Command+F5 na macOS). Użyj VO+Right Arrow, aby przechodzić przez treść element po elemencie, lub otwórz Item Chooser (VO+U) i wybierz Images z rotora, aby zobaczyć listę wszystkich obrazów i ich etykiet jednocześnie. Na iOS przesuwaj palcem w prawo po stronie i słuchaj, jak każdy obraz jest ogłaszany.
5. Testowanie z czytnikiem ekranu JAWS i Chrome: W JAWS naciśnij G, aby nawigować po grafikach. Każdy obraz powinien generować jasny, znaczący opis. Użyj wirtualnego podglądu JAWS (Insert+F1), aby zobaczyć obliczoną nazwę dostępną i rolę dla dowolnego elementu budzącego wątpliwości.
6. Weryfikacja traktowania obrazów dekoracyjnych: Dla obrazów, które uważasz za dekoracyjne, potwierdź, że mają alt="" i nie mają atrybutu title ani etykiety ARIA, które ponownie by je ujawniały. Z czytnikiem ekranu przejdź do tych elementów i upewnij się, że są całkowicie pomijane w kolejności odczytu.

Jak Naprawić

Obraz informacyjny bez alt — Niepoprawne

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Obraz informacyjny bez alt — Poprawne

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Obraz dekoracyjny błędnie oznaczony — Niepoprawne

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Obraz dekoracyjny poprawnie ukryty przed technologiami asystującymi — Poprawne

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

Ikona SVG bez nazwy dostępnej — Niepoprawne

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Ikona SVG z nazwą dostępną — Poprawne

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Przycisk typu image bez alt — Niepoprawne

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Przycisk typu image z opisowym alt — Poprawne

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Typowe Błędy

• Używanie nazwy pliku jako tekstu alt: Zapisanie alt="hero_banner_v3_final.jpg" ujawnia użytkownikom czytników ekranu ścieżkę pliku bez żadnej znaczącej treści. Zawsze pisz tekst alt, który opisuje, co przedstawia obraz lub jaką pełni funkcję.
• Ustawianie tekstu alt na „image” lub „photo”: Ogólne wartości, takie jak alt="image" lub alt="photo", przechodzą testy automatyczne, ponieważ nie są puste, ale nie przekazują żadnej informacji. Czytniki ekranu i tak ogłaszają rolę elementu jako „image”, więc powtarzanie tego słowa marnuje czas użytkownika.
• Zapominanie o alt przy dynamicznie wstrzykiwanych obrazach: Obrazy wstawiane do DOM za pomocą JavaScript (np. karuzela produktów zbudowana w React) mogą nie mieć atrybutów alt w początkowym HTML. Upewnij się, że komponent JavaScript renderuje atrybut alt w tym samym czasie, co src.
• Stosowanie role="presentation" do obrazów znaczących: Użycie role="presentation" lub role="none" na obrazach, które niosą treść, całkowicie usuwa je z drzewa dostępności. Jest to właściwe tylko dla obrazów czysto dekoracyjnych; zastosowanie tego do obrazów informacyjnych powoduje całkowitą utratę treści dla użytkowników czytników ekranu.
• Pomijanie atrybutu alt przy obrazach w tle CSS z role="img": Gdy <div> jest ostylowany obrazem w tle i otrzymuje role="img", programiści czasem zapominają dodać aria-label. Bez etykiety element znajduje się w drzewie dostępności jako obraz bez nazwy — równie źle, jak brak alt.
• Pisanie tekstu alt opisującego wygląd zamiast znaczenia: Dla wykresu zapisanie alt="A blue bar chart" opisuje styl wizualny, ale nie dane. Tekst alt powinien przekazywać kluczowy wniosek, np. alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Zduplikowany tekst alt w wielu obrazach w zestawie: Gdy lista produktów pokazuje sześć miniatur tego samego przedmiotu, przypisanie wszystkim tego samego tekstu alt (np. alt="Running shoe") nie pozwala ich rozróżnić. Każdy obraz w zestawie powinien opisywać swoją unikalną treść lub kąt.
• Brak alt w elementach <area> w mapach obrazów: Programiści korzystający z map obrazów często dodają tekst alt do nadrzędnego <img>, ale zapominają, że każdy hotspot <area> również wymaga własnego atrybutu alt opisującego konkretne miejsce docelowe linku.
• Używanie tekstu podpowiedzi jako zamiennika tekstu alt: Atrybut title generuje wizualną podpowiedź i jest odczytywany przez niektóre czytniki ekranu, ale wsparcie przeglądarek jest niespójne i nie jest on ujawniany we wszystkich kontekstach dostępności. Powinien uzupełniać, a nie zastępować właściwy atrybut alt.
• Brak testowania ikon SVG dostarczanych przez sprite sheets lub elementy <use>: Sprity SVG referencjonowane przez <use href="#icon-id"> mogą nie ujawniać swojego wewnętrznego <title> wszystkim czytnikom ekranu z powodu granic shadow DOM. Zawsze testuj ikony oparte na spritach z użyciem rzeczywistych czytników ekranu i w razie potrzeby uzupełniaj je o aria-label w zewnętrznym elemencie <svg>.

Związek z Tureckimi Regulacjami Dotyczącymi Dostępności

Prezydencki Okólnik Turcji 2025/10, opublikowany w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe wymagania dotyczące dostępności cyfrowej dla szerokiego zakresu podmiotów publicznych i prywatnych działających w Turcji. Okólnik odwołuje się do WCAG 2.2 jako standardu technicznego, czyniąc wszystkie kryteria sukcesu na poziomie A — w tym WCAG 1.1.1 Non-text Content — prawnie egzekwowalnymi obowiązkami, a nie jedynie zaleceniami dobrych praktyk.

Podmioty objęte regulacją obejmują: wszystkie instytucje publiczne i organy rządowe, banki i instytucje finansowe, szpitale i świadczeniodawców opieki zdrowotnej, firmy telekomunikacyjne z 200,000 lub większą liczbą abonentów, platformy e-commerce, biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE). Instytucje publiczne muszą osiągnąć zgodność w ciągu jednego roku od daty wejścia w życie okólnika. Podmiotom z sektora prywatnego przyznano dwuletnie okno wdrożeniowe.

WCAG 1.1.1 ma szczególne znaczenie w tureckim krajobrazie cyfrowym, ponieważ wiele sektorów o wysokim natężeniu ruchu objętych okólnikiem — w tym rynki e-commerce, portale bankowe i platformy usług rządowych — jest silnie zależnych od obrazów. Zdjęcia produktów na stronach e-commerce, oparte na infografikach komunikaty publiczne na portalach rządowych, bogate w wykresy pulpity finansowe w aplikacjach bankowych oraz interfejsy formularzy w szpitalnych portalach pacjenta w pełni mieszczą się w zakresie tego kryterium.

Brak zgodności z wymaganiami poziomu A wynikającymi z okólnika naraża podmioty objęte regulacją na kontrolę organów nadzoru i potencjalne sankcje. Ponieważ WCAG 1.1.1 jest jednym z najczęściej naruszanych i najłatwiejszych do przetestowania kryteriów — wykrywalnym zarówno za pomocą narzędzi automatycznych, jak i podstawowych przejść z użyciem czytnika ekranu — prawdopodobnie będzie odgrywać istotną rolę w audytach zgodności. Organizacje objęte okólnikiem powinny traktować usunięcie wszystkich naruszeń związanych z image-alt jako natychmiastowy, wysokopriorytetowy element działań, a nie odłożone ulepszenie. Wdrożenie SDK nakładki dostępności, takiej jak Accsible, może pomóc w wykrywaniu i częściowym usuwaniu brakujących tekstowych alternatyw w czasie rzeczywistym, ale pełna naprawa na poziomie kodu źródłowego pozostaje najbardziej solidną i trwałą drogą do osiągnięcia zgodności.