Najpierw ustal, jaką rolę pełni ikona
Ikony zajmują mało miejsca, dlatego łatwo oprzeć na nich nawigację lub przyciski. Kłopot w tym, że ten sam znak może być różnie rozumiany. Serce bywa oznaczeniem ulubionych produktów, polubienia albo darowizny. Trzy poziome kreski mogą wskazywać menu, lecz dla osoby, która rzadko korzysta z podobnych stron, nie muszą być oczywiste. Podpis tekstowy usuwa potrzebę zgadywania.
Przed dodaniem ikony zadaj sobie pytanie: czy przekazuje informację lub pozwala wykonać działanie, którego nie wyjaśnia już pobliski tekst? Jeśli tak, potrzebuje zrozumiałej nazwy. Jeśli tylko ozdabia nagłówek albo powtarza treść stojącą obok, dodatkowy opis może być zbędny. Ta prosta decyzja pomaga uniknąć zarówno niejasnych przycisków, jak i niepotrzebnych powtórzeń dla osób korzystających z czytnika ekranu.
Kiedy najlepszy jest widoczny podpis
Widoczny podpis jest najbezpieczniejszym wyborem, gdy ikona służy do nawigacji lub uruchamia ważną czynność. Przycisk z koszem warto podpisać „Usuń”, a ikonę lupy w przycisku wyszukiwania — „Szukaj”. Na stronie firmowej czy w prostym katalogu napis obok symbolu ułatwia korzystanie także osobom, które nie rozpoznają ikony, mają trudność z koncentracją albo dopiero poznają układ witryny.
Podpis powinien nazywać działanie lub cel, a nie opisywać kształt znaku. „Pobierz cennik” mówi więcej niż „Strzałka w dół”. Warto zachować te same nazwy w podobnych miejscach strony: jeśli odnośnik do kontaktu w menu nazywa się „Kontakt”, przycisk z ikoną prowadzący w to samo miejsce nie powinien bez wyraźnego powodu nosić nazwy „Napisz”. Spójność zmniejsza wysiłek potrzebny do odnalezienia właściwej opcji.
Przy bardzo ograniczonej przestrzeni, na przykład w wąskim pasku narzędzi, czasem pozostaje sama ikona. Niech będzie to świadoma decyzja, a nie sposób na skrócenie każdego przycisku. Najważniejsze lub mniej oczywiste funkcje zwykle bardziej zyskują na widocznym tekście niż na oszczędności kilku znaków.
Ikona bez widocznego napisu też musi mieć nazwę
Jeśli przycisk lub link zawiera wyłącznie ikonę, zapewnij mu nazwę, którą odczytają technologie wspomagające. Może to być tekst ukryty wizualnie, ale dostępny dla czytnika ekranu, albo odpowiednio nadana nazwa dostępności. Nazwa powinna opisywać cel elementu, na przykład „Otwórz menu” czy „Zamknij okno”. Samo „menu” może być niewystarczające, jeśli stan przycisku zmienia się po jego użyciu.
Nie zakładaj, że wskazówka pojawiająca się dopiero po najechaniu myszą rozwiązuje problem. Osoby używające telefonu nie mają wskaźnika myszy, a użytkownik klawiatury powinien rozumieć element już po przejściu do niego. Podobnie nie warto polegać na nazwie pliku ikony, takiej jak „search.svg”: mówi ona o zasobie, a niekoniecznie o czynności dostępnej na stronie.
Gdy ikonę wstawiono jako obraz, jej tekst alternatywny zależy od roli obrazu. Jeśli jest jedyną zawartością linku do strony głównej, potrzebna jest nazwa wskazująca cel linku. Jeśli obok widnieje już tekst „Strona główna”, powtórzenie go w opisie obrazu może być uciążliwe. Niezależnie od tego, czy używasz pliku obrazu, grafiki SVG czy ikony z zestawu symboli, sprawdź końcowy efekt: jaką nazwę ma cały przycisk lub link?
Kiedy ikonę potraktować jako dekorację
Nie każda ikona wymaga osobnego podpisu. Mała koperta stojąca przy linku „Napisz do nas” zwykle jedynie ilustruje tekst. Podobnie ozdobny symbol przy nagłówku „Oferta” nie dodaje nowej informacji. W takich przypadkach można ukryć ikonę przed czytnikiem ekranu albo nadać dekoracyjnemu obrazowi pusty tekst alternatywny. Użytkownik usłyszy wtedy istotną treść tylko raz.
Inaczej jest, gdy symbol wnosi informację, której nie ma w tekście. Ikona ostrzeżenia przy komunikacie nie powinna być jedynym sposobem wskazania błędu. Dodaj słowa wyjaśniające, co się stało i co można zrobić, na przykład „Nie wpisano adresu e-mail”. Nie opieraj znaczenia wyłącznie na kolorze ani na samym piktogramie: tekst pozostaje czytelny również wtedy, gdy symbol jest mały, niewyraźny albo nie wyświetli się poprawnie.
Prosty przegląd ikon przed publikacją
Przejdź po stronie bez patrzenia na ikony i przeczytaj same podpisy przycisków oraz linków. Czy wiadomo, dokąd prowadzą i co zrobią? Następnie sprawdź elementy obsługiwane klawiaturą: czy da się do nich dotrzeć, czy widać miejsce, w którym znajduje się fokus, i czy nazwa pasuje do działania? Jeśli masz możliwość, odsłuchaj stronę czytnikiem ekranu, zwracając uwagę na przyciski bez nazwy oraz powtarzające się opisy.
Na koniec spójrz na stronę na małym ekranie i pokaż kilka mniej oczywistych ikon osobie, która nie zna projektu. Jeżeli musi zgadywać ich znaczenie, dodaj widoczny podpis lub zmień sposób przedstawienia funkcji. Celem nie jest opisanie każdego obrazka, lecz umożliwienie wszystkim użytkownikom zrozumienia strony bez domyślania się, co autor miał na myśli.
