1.3.3 Właściwości zmysłowe

Krótko

Jeśli mówisz użytkownikowi, co ma zrobić, nie opieraj instrukcji tylko na tym, co trzeba zobaczyć albo usłyszeć. Zamiast „kliknij zielony przycisk po prawej” napisz „kliknij przycisk Zapisz zmiany”.

Problem w praktyce

Instrukcja może być oczywista dla osoby, która widzi cały ekran, rozróżnia kolory i zna układ strony. Dla innych użytkowników ten sam komunikat może być pusty: „po prawej”, „poniżej”, „zielony”, „okrągły” albo „po sygnale” nie wskazuje jednoznacznie elementu.

To kryterium nie zakazuje używania cech zmysłowych. Możesz pisać o kolorze, położeniu albo kształcie, jeśli obok pojawia się nazwa, etykieta, tekst linku, nagłówek sekcji albo inny punkt odniesienia, który nie zależy wyłącznie od zmysłów.

To nie jest to samo co 1.4.1 Użycie koloru. Tutaj chodzi o instrukcję, która mówi użytkownikowi, co ma wybrać, nacisnąć albo uzupełnić.

Kogo to dotyczy

• Osób niewidomych, które nie widzą koloru, kształtu ani położenia elementu na ekranie.
• Osób słabowidzących korzystających z powiększenia, u których „po prawej” albo „poniżej” może nie być widoczne w aktualnym fragmencie ekranu.
• Osób z zaburzeniami rozpoznawania barw, które nie odróżnią elementów opisanych tylko kolorem.
• Osób niesłyszących i słabosłyszących, jeśli instrukcja zależy wyłącznie od dźwięku.
• Osób korzystających z układu mobilnego, reflow albo czytnika ekranu, gdzie położenie elementów może być inne niż w projekcie desktopowym.
• Użytkowników, którzy potrzebują jasnych nazw i etykiet zamiast zgadywania na podstawie wyglądu.

Dobry przykład

• „Kliknij przycisk Zapisz zmiany”.
• „W sekcji Dane kontaktowe uzupełnij pole E-mail”.
• „Wybierz link Pobierz fakturę PDF w wierszu zamówienia numer 125/2026”.
• „Zaznacz opcję Zgadzam się na kontakt telefoniczny”.
• „Po komunikacie Plik został dodany kliknij przycisk Wyślij wniosek”.

W tych instrukcjach użytkownik może znaleźć właściwy element po nazwie, etykiecie, tekście albo kontekście. Kolor i położenie mogą pomagać, ale nie są jedyną informacją.

Zły przykład

• „Kliknij zielony przycisk po prawej”.
• „Uzupełnij pole poniżej”.
• „Wybierz okrągłą ikonę”.
• „Naciśnij większy przycisk”.
• „Przejdź dalej po sygnale dźwiękowym”.
• „Błędy są oznaczone czerwonym tekstem”.

Te instrukcje zależą od cech zmysłowych. Osoba, która nie widzi układu, koloru, rozmiaru albo nie słyszy dźwięku, może nie wiedzieć, co zrobić.

Przykłady kodu

<p>
  Po sprawdzeniu danych kliknij przycisk
  <strong>Zapisz zmiany</strong>.
</p>

<button type="submit">
  Zapisz zmiany
</button>

<p>
  Kliknij zielony przycisk po prawej.
</p>

<button type="submit">
  Zapisz zmiany
</button>

<section>
  <h2>Dane kontaktowe</h2>

  <p>
    W sekcji <strong>Dane kontaktowe</strong>
    uzupełnij pole <strong>E-mail</strong>.
  </p>

  <label for="email">E-mail</label>
  <input id="email" name="email" type="email">
</section>

Przykład graficzny

Jak sprawdzić

1. Wyszukaj w treści instrukcje typu „po lewej”, „po prawej”, „poniżej”, „powyżej”, „zielony”, „czerwony”, „okrągły”, „większy”, „mniejszy” albo „po sygnale”.
2. Sprawdź, czy instrukcja podaje też nazwę, etykietę, tekst linku, nagłówek sekcji albo inny niezależny punkt odniesienia.
3. Przejdź formularze, procesy zakupowe, panele klienta, komunikaty błędów i instrukcje dołączania plików.
4. Sprawdź układ mobilny i reflow. Element „po prawej” na desktopie może być „poniżej” na telefonie.
5. Sprawdź treści audio lub komunikaty dźwiękowe. Jeśli dźwięk mówi, że można przejść dalej, musi być też komunikat tekstowy lub widoczna zmiana stanu.
6. Oceń, czy użytkownik bez dostępu do koloru, kształtu, położenia albo dźwięku nadal wie, co zrobić.
7. Nie oceniaj samej estetyki. Pytanie brzmi: czy instrukcja identyfikuje właściwy element bez polegania wyłącznie na zmyśle?

Co sprawdzi automat, a czego nie

Automat może wykryć

• część słów sugerujących poleganie na położeniu albo kolorze, na przykład „po prawej” lub „czerwony”,
• część komunikatów błędów oznaczonych tylko kolorem, jeśli są powiązane z innymi regułami,
• niektóre problemy ze strukturą formularzy i etykietami, które utrudniają wskazanie pola tekstowo.

Automat nie oceni pewnie

• czy instrukcja naprawdę zależy wyłącznie od cechy zmysłowej,
• czy nazwa przycisku, linku albo pola wystarczająco identyfikuje element,
• czy kontekst sekcji jest jasny dla osoby korzystającej z czytnika ekranu,
• czy dźwięk ma równoważny komunikat tekstowy,
• czy instrukcja działa po zmianie układu strony na mobilny albo po powiększeniu.

Typowe błędy

• Instrukcja „kliknij zielony przycisk” bez nazwy przycisku.
• Instrukcja „uzupełnij pole poniżej” bez nazwy pola.
• Odwołanie do „ikony po lewej” bez tekstu alternatywnego albo widocznej nazwy funkcji.
• Komunikat „popraw pola oznaczone na czerwono” bez wskazania, które pola wymagają poprawy.
• Instrukcja zależna od dźwięku, na przykład „po sygnale kliknij Dalej”, bez komunikatu tekstowego.
• Treść pomocy, która opisuje kontrolki tylko jako większe, mniejsze, okrągłe albo kwadratowe.
• Zakładanie, że układ desktopowy jest stały i zawsze można mówić „po prawej” albo „poniżej”.

Powiązane kryteria

• 1.3.1 Informacje i relacje: gdy struktura, relacje i etykiety muszą być dostępne programowo albo w tekście.
• 1.3.2 Zrozumiała kolejność: gdy znaczenie zależy od kolejności treści.
• 1.4.1 Użycie koloru: gdy informacja jest przekazana tylko kolorem.
• 3.3.2 Etykiety lub instrukcje: gdy formularz potrzebuje jasnych etykiet i instrukcji.

Źródła

• WCAG 2.2: 1.3.3 Sensory Characteristics (otwiera się w nowym oknie)
• Understanding WCAG 1.3.3: Sensory Characteristics (otwiera się w nowym oknie)
• How to Meet WCAG 1.3.3: Sensory Characteristics (otwiera się w nowym oknie)
• G96: Providing textual identification of items that otherwise rely only on sensory information (otwiera się w nowym oknie)
• F14: Failure due to identifying content only by its shape or location (otwiera się w nowym oknie)
• F26: Failure due to using a graphical symbol alone to convey information (otwiera się w nowym oknie)