Kryterium 1.3.3 – Właściwości zmysłowe z WCAG 2.1 ma na celu zapewnienie, że informacje na stronie nie są przekazywane wyłącznie za pomocą wskazówek opartych na jednym zmyśle, np. kolorze, kształcie, lokalizacji lub dźwięku. Dzięki temu osoby z różnymi niepełnosprawnościami (np. niewidome, daltoniczne) mogą równie skutecznie korzystać z treści.
W tym artykule pokażemy, jak łatwo sprawdzić, czy strona spełnia to kryterium — bez potrzeby znajomości kodu.
Co oznaczają „właściwości zmysłowe”?
To sytuacje, w których:
-
Użytkownik otrzymuje instrukcję opartą wyłącznie na kolorze: „kliknij zielony przycisk”,
-
Odwołanie odnosi się tylko do pozycji: „informacja po prawej stronie”,
-
Wskazówka odnosi się do kształtu lub wyglądu: „wybierz okrągłą ikonę”,
-
Komunikat jest dźwiękowy bez alternatywy: „sygnał dźwiękowy oznacza zakończenie testu”.
Jeśli treść opiera się wyłącznie na jednym zmyśle, osoby, które go nie odbierają, mogą mieć trudności w zrozumieniu informacji.
Jak sprawdzić zgodność z kryterium 1.3.3 bez technicznej wiedzy?
1. Przegląd treści pod kątem instrukcji i komunikatów
Co zrobić?
Przeczytaj instrukcje, opisy i komunikaty na stronie – np. te przy formularzach, quizach, grach, interaktywnych elementach.
Na co zwrócić uwagę?
-
Czy pojawiają się komunikaty typu: „naciśnij niebieski przycisk” albo „kliknij ikonę po lewej”?
-
Czy informacje są dostępne także w innej formie niż tylko wizualna?
Przykład błędu:
Formularz zawiera pole z instrukcją: „Wybierz datę z czerwonego kalendarza”. Osoba niewidoma nie wie, który kalendarz jest czerwony.
2. Sprawdzenie formularzy i komunikatów błędów
Co zrobić?
Wprowadź błędne dane w formularzu, np. pozostaw wymagane pole puste i kliknij „Wyślij”.
Na co zwrócić uwagę?
-
Czy komunikat błędu mówi np. „Pole oznaczone na czerwono jest wymagane”, ale nie daje innego sposobu identyfikacji błędu?
-
Czy komunikat odnosi się tylko do koloru lub pozycji?
Przykład błędu:
Błąd formularza opisany jako „Zmień dane w polu podświetlonym na żółto”, bez dodatkowej informacji.
3. Testowanie interaktywnych elementów (np. quizy, instrukcje)
Co zrobić?
Uruchom quiz, grę edukacyjną lub inny interaktywny komponent na stronie.
Na co zwrócić uwagę?
-
Czy użytkownik wie, co ma zrobić, jeśli nie widzi kolorów albo nie słyszy dźwięków?
-
Czy instrukcje typu „Kliknij zielone pole” są uzupełnione o opisy tekstowe?
Przykład błędu:
Gra edukacyjna mówi tylko: „Kliknij niebieską ikonę, aby przejść dalej”, ale nie opisuje, co oznacza „niebieska ikona”.
4. Test z czytnikiem ekranu lub narzędziem do symulacji daltonizmu
Co zrobić?
Użyj czytnika ekranu (np. NVDA) lub narzędzia symulującego zaburzenia widzenia kolorów.
Na co zwrócić uwagę?
-
Czy wszystkie instrukcje są zrozumiałe tylko przez kolor lub kształt?
-
Czy czytnik ekranu odczytuje opisy i instrukcje w sposób, który nie wymaga widzenia?
Przykład błędu:
Czytnik odczytuje komunikat „kliknij czerwony przycisk”, ale nie podaje jego etykiety, np. „Zapisz”.
Typowe błędy i jak je rozpoznać
-
Instrukcje zależne od koloru: „Kliknij zielony przycisk”, bez podania jego treści lub funkcji.
-
Lokalizacja jako jedyny opis: „Kliknij ikonę po prawej”.
-
Opis tylko przez kształt: „Wybierz okrągły znacznik”.
-
Dźwięki bez alternatywy: „Usłyszysz sygnał potwierdzający zakończenie”.
Jak poprawić dostępność?
-
Zamiast: „Kliknij czerwony przycisk”,
Użyj: „Kliknij przycisk ‘Zapisz’ (oznaczony na czerwono)”. -
Zamiast: „Wybierz ikonę po lewej”,
Użyj: „Wybierz ikonę z lupą po lewej”. -
Zamiast: „Zareaguj na sygnał dźwiękowy”,
Użyj: „Zareaguj, gdy pojawi się komunikat ‘Gotowe’ i usłyszysz sygnał”.
Podsumowanie
Kryterium 1.3.3 przypomina nam, że użytkownicy nie korzystają ze stron w taki sam sposób – nie wszyscy widzą kolory, słyszą dźwięki czy dostrzegają pozycję elementów. Dlatego warto:
-
Przeglądać treści pod kątem instrukcji zależnych od jednego zmysłu,
-
Testować formularze i gry edukacyjne,
-
Korzystać z czytników ekranu lub narzędzi symulujących różne potrzeby użytkowników.
Dzięki temu strona będzie bardziej dostępna i przyjazna dla wszystkich 💡