Przycisk z ikoną musi mówić, co zrobi

Najpierw użyj właściwego elementu HTML

Jeżeli kontrolka wykonuje działanie na bieżącej stronie, naturalnym wyborem jest element button. Jeżeli przenosi pod adres, zwykle jest linkiem. Klikalny div z ikoną nie otrzymuje automatycznie poprawnej semantyki, obsługi klawiatury ani zachowania fokusu.

Font Awesome odpowiada za symbol, nie za rolę kontrolki. Zachowaj natywny element i umieść ikonę w jego wnętrzu. Dzięki temu przeglądarka oraz technologie asystujące mają solidną podstawę.

Ikona obok widocznego tekstu

Przycisk z napisem „Zapisz” oraz ikoną może czerpać dostępną nazwę z tekstu. Symbol powtarza wtedy informację i powinien być dekoracyjny dla czytnika, aby użytkownik nie słyszał dwóch nazw. Konkretna technika zależy od sposobu renderowania, ale rezultat testu jest wspólny: czytnik ogłasza zwięźle „Zapisz, przycisk”.

Nie usuwaj tekstu tylko po to, aby interfejs wyglądał nowocześnie. Widoczna etykieta pomaga osobom o różnych potrzebach, użytkownikom rozpoznawania mowy i każdemu, kto nie zna przyjętej konwencji.

Samotna ikona potrzebuje dostępnej nazwy

Gdy w wąskim pasku narzędzi pozostaje tylko symbol, przycisk musi otrzymać nazwę programową. Może pochodzić z odpowiedniego tekstu ukrytego wizualnie albo właściwie użytego „aria-label”. Nazwa powinna mówić „Otwórz filtry”, nie „suwaki”; „Usuń załącznik”, nie „kosz”.

Jeśli na stronie jest kilka podobnych kontrolek, dodaj kontekst: „Usuń załącznik: raport.pdf” zamiast pięciu przycisków ogłoszonych identycznie jako „Usuń”. Nie włączaj do nazwy słowa „przycisk”, bo rolę przekaże technologia.

Nazwa kontrolki przełączającej zależy od działania

Przycisk z sercem może dodawać element do ulubionych, a po aktywacji usuwać go. Nazwa powinna wskazywać działanie dostępne po naciśnięciu lub stan zgodnie z właściwym wzorcem kontrolki. Jeśli używany jest stan przełączenia, musi być programowo dostępny i aktualizowany razem z wyglądem.

Nie zmieniaj tylko koloru ikony. Osoba, która nie widzi koloru, potrzebuje informacji o stanie, a osoba widząca powinna otrzymać zrozumiały komunikat po działaniu.

Tooltip nie zastępuje etykiety

Podpowiedź po najechaniu może wspierać naukę symbolu, ale nie każdy używa myszy ani widzi ekran. Tooltip musi dać się otworzyć i zamknąć zgodnie z wymaganiami dostępności, a kontrolka nadal potrzebuje własnej nazwy. Atrybut „title” nie jest pewnym substytutem widocznego tekstu i poprawnego nazwania.

Jeżeli użytkownicy często potrzebują podpowiedzi, zastanów się, czy etykieta nie powinna być stale widoczna. Interfejs nie zyskuje prostoty, gdy odbiorca musi po kolei odkrywać znaczenie symboli.

Fokus, rozmiar celu i kontrast

Przejdź do kontrolki klawiszem Tab. Fokus musi być widoczny na jasnym i ciemnym tle. Uruchom ją klawiaturą i sprawdź, gdzie fokus trafia po otwarciu albo zamknięciu elementu. Sama ikona może być mała, ale obszar interakcji powinien być wygodny i nie nakładać się na sąsiednie cele.

Sprawdź kontrast symbolu i obramowania stanów. Nie polegaj wyłącznie na zmianie barwy. Stan disabled powinien być prawidłowo oznaczony, a nie tylko wyszarzony przez CSS.

Animacja wymaga celu i umiaru

Obracająca się ikona może sygnalizować przetwarzanie, ale musi jej towarzyszyć dostępna informacja o stanie. Nie uruchamiaj ciągłego ruchu jako dekoracji w ważnych kontrolkach. Uwzględnij preferencję ograniczenia ruchu i nie pozwól, aby animacja zasłaniała zmianę treści.

Jeżeli działanie trwa, zabezpiecz przycisk przed przypadkowym wielokrotnym wysłaniem, ale poinformuj użytkownika, co się dzieje. Po zakończeniu przekaż wynik w sposób dostępny, nie samą zamianą ikony.

Test w sześciu przebiegach

Najpierw przeczytaj sam widoczny tekst i oceń funkcję. Potem ukryj ikony — interfejs nadal powinien być zrozumiały tam, gdzie tekst jest przewidziany. Następnie użyj samej klawiatury. Powiększ stronę. Uruchom czytnik ekranu i zanotuj nazwę, rolę oraz stan. Na końcu wykonaj działanie i sprawdź komunikat oraz pozycję fokusu.

Dodaj próbę z obsługą głosową, jeśli jest dostępna w procesie testowym. Użytkownik powinien móc odwołać się do widocznej etykiety, a nazwa dostępna nie powinna jej przeczyć. Gdy przycisk pokazuje tekst „Filtry”, ale programowo nazywa się „Ustawienia wyszukiwania”, wybór komendą może być trudniejszy. Spójna, krótka nazwa pomaga użytkownikom czytników, sterowania głosem i osobom uczącym się interfejsu.

Jeśli test ujawni kilka sprzecznych symboli dla tej samej funkcji, uporządkuj je na Wybór ikon. Jeśli problem dotyczy samego ładowania, przejdź do Dlaczego ikona Font Awesome się nie wyświetla? Diagnostyka od sieci do nazwy. Dostępność nie jest ostatnią warstwą na gotowym przycisku — jest sprawdzeniem, czy jego znaczenie naprawdę dotarło do użytkownika.