Kryterium 1.1.1 – Treść nietekstowa WCAG 2.1 ma na celu zapewnienie, że wszystkie elementy nietekstowe na stronie internetowej posiadają swoje tekstowe odpowiedniki. Dzięki temu osoby, które nie widzą obrazów, nie słyszą dźwięków lub nie mogą w inny sposób doświadczyć tych treści, nadal mogą zrozumieć przekazywane informacje.
W tym artykule pokażemy, jak łatwo sprawdzić, czy strona spełnia to kryterium – bez potrzeby zaglądania w kod.
Co oznacza „treść nietekstowa”?
To wszystkie elementy na stronie, które nie są tekstem. Mogą to być:
- Obrazy i ilustracje
- Filmy wideo
- Pliki audio
- Przyciski graficzne
- Mapy obrazkowe
- Infografiki
- Wykresy i diagramy
- Elementy sterujące interfejsu (np. ikony)
Jeśli te elementy nie mają tekstowych alternatyw, osoby korzystające z czytników ekranu (programów odczytujących zawartość strony na głos) lub inne technologie wspomagające nie będą w stanie zrozumieć, co przedstawiają.
Jak sprawdzić zgodność z kryterium 1.1.1 bez technicznej wiedzy?
1. Oglądanie obrazów i ikon
Co zrobić?
Przejrzyj wszystkie obrazy, ikony i grafiki na stronie.
Na co zwrócić uwagę?
- Czy każdy obraz ma jakiś podpis lub tekst w jego pobliżu, który go opisuje?
- Czy ikony, które coś oznaczają (np. ikona koszyka, lupy), mają obok siebie tekstową etykietę lub opis?
Przykład błędu:
Na stronie znajduje się zdjęcie produktu bez żadnego opisu. Osoba niewidoma nie wie, co przedstawia to zdjęcie.
2. Sprawdzanie filmów i audio
Co zrobić?
Obejrzyj filmy i posłuchaj nagrań audio na stronie.
Na co zwrócić uwagę?
- Czy do filmów są dostępne napisy dla osób niesłyszących?
- Czy do nagrań audio jest dostępny transkrypt tekstowy?
- Czy w przypadku braku możliwości odtworzenia filmu lub audio jest dostępny tekstowy opis jego zawartości?
Przykład błędu:
Na stronie jest wideo instruktażowe bez napisów. Osoby niesłyszące nie mogą zrozumieć przekazywanych informacji.
3. Testowanie interaktywnych elementów graficznych
Co zrobić?
Sprawdź interaktywne elementy, takie jak mapy obrazkowe czy wykresy.
Na co zwrócić uwagę?
- Czy obszary klikalne na mapie obrazkowej mają tekstowe opisy, które informują, dokąd prowadzą?
- Czy wykresy i diagramy mają tekstowe podsumowania lub alternatywne opisy danych, które prezentują?
Przykład błędu:
Mapa strony jest obrazkiem z zaznaczonymi obszarami, ale bez tekstowych opisów, co się stanie po kliknięciu danego obszaru.
4. Używanie wtyczek do przeglądarek
Co zrobić?
Zainstaluj wtyczkę do przeglądarki, która pokazuje alternatywne teksty obrazów (często nazywane „alt textami”).
Na co zwrócić uwagę?
- Czy każdy obraz ma wyświetlony jakiś tekst?
- Czy ten tekst jest opisowy i oddaje zawartość obrazu?
- Czy są jakieś obrazy bez żadnego alternatywnego tekstu?
Przykład błędu:
Wtyczka pokazuje, że wiele zdjęć na stronie ma jako alternatywny tekst tylko nazwę pliku, np. „zdjecie1.jpg”, co nie daje żadnej informacji o zawartości obrazu.
5. Typowe błędy i jak je rozpoznać
- Brakujące/niepoprawne teksty alternatywne: Obrazy bez opisów lub z ogólnymi/nieinformatywnymi opisami (np. nazwa pliku).
- Brak napisów/transkryptów: Filmy i audio bez tekstowych odpowiedników.
- Brak opisów interaktywnych elementów: Mapy obrazkowe itp. bez wyjaśnienia ich funkcji.
Jak poprawić dostępność?
- Zamiast: brak opisu obrazu lub ogólny tekst „obrazek”,
Użyj: „Zdjęcie uśmiechniętej kobiety trzymającej filiżankę kawy”. - Zamiast: film bez napisów,
Użyj: „Film zawiera napisy z dialogami i dźwiękami otoczenia”. - Zamiast: nagranie audio bez żadnej wersji tekstowej,
Użyj: „Do nagrania dołączono pełny transkrypt w formacie tekstowym”. - Zamiast: infografika bez dodatkowego opisu,
Użyj: „Pod infografiką umieszczono szczegółowy opis danych i zależności”. - Zamiast: interaktywna grafika bez etykiet,
Użyj: „Każdy element interaktywny ma przypisaną tekstową etykietę z jego funkcją, np. ‘Powiększ wykres’”.
Podsumowanie
Tworzenie tekstowych odpowiedników dla treści wizualnych i dźwiękowych to podstawowy krok w kierunku dostępnej strony internetowej. Nie musisz być programistą, aby zauważyć i ocenić wiele potencjalnych przeszkód. Dostępność to nie tylko kwestia przepisów – to wyraz troski o równe szanse i komfort wszystkich użytkowników.
Dzięki takim działaniom strona staje się bardziej otwarta, zrozumiała i użyteczna dla każdego 💡