Link i przycisk wyglądają czasem podobnie, ale służą do czegoś innego. Link prowadzi użytkownika w inne miejsce: na podstronę, do pliku, do sekcji strony, do zewnętrznego serwisu, do adresu e-mail albo numeru telefonu. Przycisk uruchamia działanie: wysyła formularz, otwiera menu, zamyka okno, filtruje wyniki, dodaje produkt do koszyka, rozwija panel. Ta różnica jest ważna nie tylko dla programisty. Od niej zależy, czy strona zachowuje się przewidywalnie dla użytkownika, także tego, który korzysta z klawiatury albo czytnika ekranu.
Na wielu stronach wszystko, co da się kliknąć, wygląda jak przycisk. Duże kolorowe prostokąty prowadzą do podstron, małe tekstowe linki otwierają modale, ikony bez podpisów wykonują działania, a użytkownik musi zgadywać, co się stanie. Osoba widząca i korzystająca z myszy często poradzi sobie metodą prób. Osoba korzystająca z czytnika ekranu dostaje jednak informację, czy element jest linkiem, czy przyciskiem. Jeśli element jest źle oznaczony, zapowiedź nie zgadza się z zachowaniem. To drobiazg techniczny, który przekłada się na poczucie kontroli.
Dostępny link powinien jasno mówić, dokąd prowadzi. Najgorszy klasyk to „kliknij tutaj”. Taki tekst nie ma sensu poza zdaniem, w którym się znajduje. Jeśli użytkownik porusza się po samej liście linków, usłyszy kilka razy „kliknij tutaj”, „więcej”, „zobacz” i nie będzie wiedział, czego dotyczą. Lepszy link zawiera informację: „pobierz program konferencji”, „zobacz ofertę fotografii eventowej”, „przeczytaj deklarację dostępności”, „wyślij wiadomość do Bearded Wolf”. Nie musi być długi, ale powinien być samodzielnie zrozumiały.
Opisowe linki pomagają również SEO. Wyszukiwarka analizuje tekst linku, żeby lepiej rozumieć relacje między stronami. Jeśli wewnętrzny link prowadzi do usługi audytu WCAG i jest opisany jako „audyt WCAG strony internetowej”, daje wyraźniejszy sygnał niż „więcej”. Nie oznacza to, że każdy link ma być sztucznie wypchany frazą. Chodzi o naturalne nazwanie celu. Użytkownik i wyszukiwarka korzystają z tej samej jasności.
W kartach z aktualnościami, realizacjami albo usługami pojawia się częsty problem: tytuł jest linkiem, obraz jest linkiem, przycisk „czytaj więcej” jest linkiem, a wszystko prowadzi w to samo miejsce. Dla osoby korzystającej z klawiatury oznacza to kilka zatrzymań na tej samej karcie. Dla czytnika ekranu to powtarzający się bałagan. Lepiej zaprojektować kartę tak, żeby jeden sensowny element był linkiem, najczęściej tytuł, a jeśli cała karta jest klikalna, trzeba zadbać o poprawną nazwę dostępną i rozsądne zachowanie fokusu. W praktyce często wystarczy, że tytuł brzmi konkretnie, a dodatkowy link nie powtarza pustego „więcej”.
Dostępny przycisk powinien mówić, jakie działanie wykona. „Wyślij formularz”, „Otwórz menu”, „Zamknij okno”, „Pokaż filtry”, „Dodaj do koszyka”, „Zapisz zmiany” – to etykiety, które dają użytkownikowi orientację. Problem pojawia się przy przyciskach ikonowych. Ikona lupy zwykle oznacza wyszukiwanie, krzyżyk zamknięcie, a koszyk dodanie produktu, ale czytnik ekranu nie widzi intuicji graficznej. Taki przycisk musi mieć dostępną nazwę. Sama ikona bez tekstu może być elegancka wizualnie, ale pod spodem powinna być opisana.
Kolor nie powinien być jedynym sposobem rozpoznania linku. Jeśli link w tekście różni się od zwykłego tekstu tylko odcieniem niebieskiego, osoby słabowidzące albo z zaburzeniami rozpoznawania kolorów mogą go nie zauważyć. Podkreślenie w treści ciągłej jest nadal bardzo dobrym rozwiązaniem. Można je zaprojektować estetycznie, ale nie warto usuwać go wyłącznie dlatego, że projekt wygląda „czyściej”. Czystość wizualna nie może odbierać funkcji.
Fokus jest kluczowy dla linków i przycisków. Osoba poruszająca się klawiaturą musi widzieć, który element jest aktualnie aktywny. Widoczny fokus powinien pojawiać się na linkach, przyciskach, polach formularza, elementach menu i wszystkich kontrolkach interaktywnych. Nie wystarczy, że element delikatnie zmienia odcień, jeśli zmiana jest prawie niewidoczna. Fokus powinien mieć dobry kontrast i nie powinien być zasłonięty przez inne elementy. To szczególnie ważne w menu, oknach modalnych i formularzach.
Przycisk musi dać się aktywować z klawiatury. Standardowy przycisk HTML reaguje na Enter i spację. Link reaguje na Enter. Jeśli ktoś tworzy element klikalny z przypadkowego bloku, na przykład z diva, musi później ręcznie odtwarzać zachowania, które zwykły przycisk ma od razu. To częste źródło błędów. Użytkownik tabuluje po stronie, widzi element, ale nie może go uruchomić albo czytnik ekranu nie zapowiada go jako przycisku. Dlatego semantyka ma znaczenie: właściwy element w kodzie daje właściwe zachowanie.
Różnica między linkiem a przyciskiem jest ważna także w formularzach. „Wyślij” powinno być przyciskiem, nie linkiem. „Wyczyść filtry” może być przyciskiem, jeśli zmienia widok wyników na tej samej stronie. „Zobacz szczegóły usługi” jest linkiem, jeśli prowadzi na podstronę. „Pobierz PDF” jest linkiem do pliku, nawet jeśli wygląda jak przycisk. Wygląd może być podobny, ale rola powinna odpowiadać funkcji.
Warto uważać na linki otwierające nowe okna lub pliki. Jeśli link prowadzi do PDF-a, dobrze jest to zaznaczyć w treści: „Pobierz regulamin warsztatów PDF”. Jeśli otwiera nową kartę, można poinformować o tym użytkownika, choć nie należy przesadzać z dopiskami przy każdym linku. Najważniejsze, żeby nie zaskakiwać tam, gdzie użytkownik wykonuje istotne działanie, na przykład opuszcza formularz albo przechodzi do zewnętrznego systemu płatności.
Na stronach instytucji dostępne linki są szczególnie istotne, bo użytkownicy często szukają konkretnych dokumentów i informacji. „Pobierz” powtórzone przy dziesięciu uchwałach nie mówi nic. Lepiej nazwać każdy plik: „Pobierz regulamin naboru do programu”, „Pobierz harmonogram dyżurów”, „Pobierz formularz zgłoszeniowy dla wystawców”. Redaktor ma wtedy trochę więcej pracy przy publikacji, ale odbiorca oszczędza czas i nie musi zgadywać.
W usługach firmowych linki i przyciski wpływają na kontakt. Jeśli użytkownik czyta opis fotografii eventowej, link do formularza może brzmieć „Zapytaj o reportaż z wydarzenia”. Jeśli jest na stronie audytu WCAG, przycisk może prowadzić do kontaktu z etykietą „Umów rozmowę o audycie dostępności”. To nie jest nachalna sprzedaż, tylko dopasowanie działania do kontekstu. „Skontaktuj się” też bywa w porządku, ale czasem bardziej konkretny tekst zmniejsza niepewność.
Linki ikonowe w mediach społecznościowych, stopkach i nagłówkach wymagają dostępnych nazw. Ikona Facebooka, Instagrama, LinkedIna albo koperty nie powinna być dla czytnika ekranu „link grafika” albo przypadkową nazwą pliku. Powinna być opisana jako „Profil Bearded Wolf na Facebooku” albo „Napisz e-mail”. Podobnie z ikonami pobierania, drukowania, udostępniania i zmiany kontrastu. Jeśli element jest ważny, musi mieć nazwę.
Z perspektywy właściciela strony dostępne linki i przyciski to mały obszar, który daje duży efekt. Nie wymaga zmiany całej identyfikacji wizualnej ani przebudowy serwisu od podstaw. Czasem wystarczy poprawić etykiety, widoczność fokusu, semantykę kilku elementów i sposób publikowania kart. Dla użytkownika różnica jest natychmiastowa: łatwiej zrozumieć stronę, łatwiej się po niej poruszać, łatwiej podjąć działanie.
W Bearded Wolf takie rzeczy wychodzą często przy audytach WCAG, projektowaniu stron WordPress i pisaniu treści usługowych. Link nie jest tylko detalem redakcyjnym, a przycisk nie jest tylko kolorem w projekcie. To elementy prowadzenia użytkownika. Jeśli są dobrze nazwane i poprawnie działają, strona staje się spokojniejsza w obsłudze.
Najprostszy przegląd można zrobić od razu: przejść po stronie i wypisać wszystkie „więcej”, „tutaj”, „kliknij”, „pobierz” oraz przyciski z samymi ikonami. Potem wystarczy zadać pytanie, czy osoba widząca tylko ten jeden element wiedziałaby, co się stanie. Jeśli nie, etykietę warto poprawić. To nieduża zmiana, ale bardzo dobrze pokazuje, czy strona mówi językiem użytkownika, czy każe mu domyślać się intencji autora.
