mylące etykiety przycisków (np. „kliknij” zamiast „Zobacz ofertę”)

Mylące etykiety przycisków, np. samo „kliknij”, obniżają skuteczność wezwania do działania i pogarszają dostępność.

Co oznacza myląca etykieta przycisku

Myląca etykieta przycisku to tekst, który nie informuje jasno, jaka czynność zostanie wykonana po aktywowaniu elementu interfejsu. Przykładem jest pojedyncze słowo „kliknij”, ponieważ nie opisuje celu operacji. Użytkownik nie dowiaduje się, czy przejdzie do formularza, pobierze plik, otworzy szczegóły, wyśle dane albo rozpocznie instalację. Sama forma „kliknij” nie jest więc nazwą działania, lecz ogólną instrukcją dotyczącą sposobu obsługi interfejsu. Podobny problem występuje przy etykietach „więcej”, „dalej” lub „sprawdź”, gdy na jednej stronie znajduje się kilka takich elementów prowadzących do różnych miejsc.

Prawidłowy tekst przycisku powinien wskazywać rezultat czynności, na przykład „Zobacz ofertę”, „Pobierz instrukcję”, „Wyślij formularz” albo „Otwórz ustawienia”. Etykieta powinna być zrozumiała także po wyjęciu jej z otaczającego akapitu. Ma to znaczenie między innymi wtedy, gdy interfejs jest przeglądany wzrokowo, powiększany, odczytywany przez syntezator mowy lub obsługiwany z klawiatury. Jasny opis ogranicza konieczność zgadywania i ułatwia odróżnienie kilku dostępnych działań.

Wpływ etykiety na strukturę interfejsu

Przycisk jest elementem interaktywnym, którego funkcja powinna wynikać z jego nazwy oraz kontekstu. W kodzie HTML znaczenie ma również użycie właściwego elementu, na przykład <button> dla działania wykonywanego na bieżącej stronie albo <a> dla odnośnika prowadzącego do innego adresu. Zmiana wyglądu odnośnika na przycisk nie zmienia jego funkcji, a dopisanie tekstu „kliknij” nie zastępuje prawidłowej nazwy dostępnej dla technologii wspomagających. Widoczny tekst, nazwa dostępna i zachowanie elementu powinny opisywać tę samą operację.

W interfejsach responsywnych etykieta musi pozostać czytelna również na małym ekranie i przy powiększeniu tekstu. Skracanie jej do niejasnego „OK”, „Start” albo „Więcej” może ukrywać różne znaczenia zależnie od miejsca użycia. Lepszym rozwiązaniem jest stosowanie krótkich, ale konkretnych czasowników i rzeczowników. Jeśli przycisk powoduje skutek wymagający potwierdzenia, tekst powinien go nazwać, na przykład „Usuń plik” zamiast „Kliknij”. W przypadku operacji nieodwracalnych opis działania jest ważniejszy niż oszczędność kilku znaków.

Dostępność i testowanie nazw działań

Osoby korzystające z czytników ekranu mogą poruszać się po samych nagłówkach, odnośnikach i przyciskach, bez odczytywania całej strony. Lista elementów nazwanych jedynie „kliknij” albo „więcej” nie pozwala wtedy łatwo ustalić, który z nich prowadzi do konkretnej treści. Problem może dotyczyć także użytkowników sterujących komputerem głosem, ponieważ polecenie oparte na niejednoznacznej nazwie może wskazać kilka elementów. Etykiety opisujące cel działania poprawiają orientację bez uzależniania jej od koloru, położenia lub sąsiedniego tekstu.

Kontrola jakości powinna obejmować przegląd wszystkich przycisków i odnośników w głównych widokach aplikacji lub serwisu. Należy sprawdzić, czy każdy element ma unikalny sens w swoim kontekście, czy po aktywowaniu wykonuje działanie zgodne z etykietą oraz czy stan po operacji jest jasno komunikowany. Warto przeprowadzić test klawiaturą, z powiększeniem widoku i z czytnikiem ekranu. Automatyczne skanery dostępności mogą wykryć część problemów z nazwami, lecz nie ocenią poprawnie każdej sytuacji językowej. Ostateczna weryfikacja wymaga sprawdzenia, czy użytkownik może przewidzieć skutek działania bez zgadywania.

Znaczenie poprawnych etykiet w serwisie komputerowym

W serwisie internetowym dotyczącym naprawy sprzętu etykieta przycisku powinna precyzyjnie określać następny krok. „Umów wizytę”, „Zobacz zakres usług”, „Skontaktuj się z serwisem” i „Sprawdź dane dojazdu” przekazują różne zamiary, natomiast samo „Kliknij” nie mówi, czego można oczekiwać po aktywowaniu elementu. Takie rozróżnienie ułatwia korzystanie ze strony na laptopie, komputerze stacjonarnym i urządzeniu mobilnym, a także ogranicza pomyłki przy wypełnianiu formularzy kontaktowych.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów stacjonarnych PC i ich podzespołów, dlatego w materiałach dotyczących serwisu komputerowego warto stosować etykiety, które jasno prowadzą do informacji o diagnozie, kontakcie lub zakresie naprawy. Przy sprawdzaniu problemu można porównać widoczny opis z faktycznym działaniem przycisku, jego nazwą odczytywaną przez czytnik ekranu oraz adresem otwieranej strony. Jeżeli te elementy nie są zgodne, należy poprawić tekst, strukturę HTML albo oba składniki, aby komunikat interfejsu odpowiadał rzeczywistej funkcji.