Zrozumiałość · Poziom AA

3.2.4 Spójna identyfikacja

Ta sama funkcja powinna być rozpoznawalna pod tą samą nazwą.

Krótko

Jeśli różne elementy robią to samo, powinny być identyfikowane spójnie: podobną nazwą, etykietą, tekstem linku, opisem ikony albo alternatywą tekstową.

Problem w praktyce

W sklepie ten sam przycisk raz nazywa się „Do koszyka”, raz „Kup”, a raz „Dodaj”. Każdy robi dokładnie to samo: dodaje produkt do koszyka. Użytkownik musi zgadywać, czy to jedna funkcja, czy trzy różne działania.

To kryterium nie wymaga, żeby każdy element wyglądał identycznie. Chodzi o spójne rozpoznanie funkcji, szczególnie w nazwach, etykietach i alternatywach tekstowych.

Kogo to dotyczy

  • Osób korzystających z czytników ekranu, które słyszą nazwy linków, przycisków i ikon.
  • Osób z trudnościami poznawczymi, które potrzebują przewidywalnych nazw działań.
  • Użytkowników sterowania głosem, którzy aktywują elementy po nazwie.
  • Osób korzystających z list linków, przycisków albo nagłówków w technologii wspomagającej.

Dobry przykład

  • Przycisk dodawania produktu nazywa się „Dodaj do koszyka” w całym sklepie.
  • Ikona lupy ma zawsze funkcję i nazwę „Szukaj”.
  • Link do pobrania faktury ma spójny tekst: „Pobierz fakturę PDF”.
  • Ten sam komunikat akcji w panelu klienta ma tę samą etykietę w różnych modułach.

Zły przykład

  • Ta sama funkcja raz jest linkiem „Więcej”, raz „Szczegóły”, raz „Zobacz”.
  • Ikona pobierania dokumentu ma różne teksty alternatywne: „plik”, „strzałka”, „pobierz”.
  • Przycisk zamykający modal raz nazywa się „Zamknij”, a raz „Anuluj”, choć robi dokładnie to samo.
  • Ten sam przycisk zapisania ustawień raz ma etykietę „OK”, a raz „Zapisz zmiany”.

Przykłady kodu

Dobry przykład: spójna nazwa funkcji

Ten sam przycisk ma tę samą etykietę przy różnych produktach.

Kod — HTML

<button type="button">Dodaj do koszyka</button>
<button type="button">Dodaj do koszyka</button>
<button type="button">Dodaj do koszyka</button>

Zły przykład: różne nazwy tej samej funkcji

Użytkownik może nie wiedzieć, czy przyciski robią to samo.

Kod — HTML

<button type="button">Kup</button>
<button type="button">Dodaj</button>
<button type="button">Do koszyka</button>

Dobry przykład: spójna nazwa ikony

Ikona ma tę samą funkcję i ten sam opis w różnych miejscach.

Kod — HTML

<a href="/faktury/123.pdf">
  <img src="/assets/download.svg" alt="">
  Pobierz fakturę PDF
</a>

Przykład graficzny

Źle

  • Kup
  • Dodaj
  • Do koszyka

Trzy różne etykiety dla tej samej funkcji.

Dobrze

  • Dodaj do koszyka
  • Dodaj do koszyka
  • Dodaj do koszyka

Funkcja jest identyfikowana spójnie.

Statyczne demo pokazuje spójność identyfikacji funkcji, a nie wymóg identycznego wyglądu.

Jak sprawdzić

  1. Znajdź elementy, które wykonują tę samą funkcję w różnych miejscach serwisu.
  2. Porównaj ich widoczne etykiety, teksty linków, nazwy przycisków i alternatywy tekstowe.
  3. Sprawdź ikony, które powtarzają się w tabelach, kartach produktów, panelach i listach plików.
  4. Oceń, czy różnice w nazwach oznaczają realnie inną funkcję.
  5. Nie wymagaj identycznego wyglądu, jeśli funkcja jest identyfikowana jasno i spójnie.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • różne nazwy dostępne podobnych ikon,
  • powtarzające się komponenty z różnymi etykietami,
  • część niespójnych tekstów alternatywnych.

Automat nie oceni pewnie

  • czy dwa elementy naprawdę mają tę samą funkcję,
  • czy różnica w etykiecie jest uzasadniona kontekstem,
  • czy użytkownik zrozumie relację między nazwą a działaniem.

Typowe błędy

  • Różne nazwy przycisku dodawania do koszyka.
  • Ikona pobierania opisana raz jako „PDF”, raz jako „strzałka w dół”.
  • Link do szczegółów sprawy raz jako „Zobacz”, raz jako „Podgląd”, raz jako „Szczegóły”.
  • Ten sam przycisk zapisu w panelu opisany jako „OK” w jednym widoku i „Zapisz zmiany” w drugim.