Przycisk czy link: którego użyć
Zaktualizowano 14 października 2026 · 5 min czytania
„Przycisk czy link?” to najczęstsze pytanie w dostępnym front-endzie, a odpowiedź jest krótka: link gdzieś prowadzi, przycisk coś robi. Wygląd to osobna decyzja. Ta strona pokazuje różnicę w kodzie, w obsłudze klawiatury i w kategoriach WCAG oraz błędy, które najczęściej widzimy w sklepach internetowych. Należy do serii dostępne wzorce interfejsu.
Kiedy którego użyć
Link <a href> |
Przycisk <button> |
|---|---|
| Przejście na inną stronę: produkt, kategoria, strona koszyka | Dodanie do koszyka, zmiana ilości |
Skok do sekcji na tej samej stronie (href="#opinie") |
Otwarcie lub zamknięcie menu, okna dialogowego, panelu filtrów |
| Pobranie pliku (faktura, tabela rozmiarów w PDF) | Wysłanie lub wyczyszczenie formularza |
| Otwarcie zewnętrznej strony | Odtworzenie wideo, start pokazu slajdów, skopiowanie kodu |
APG ujmuje to tak: „ważne jest, aby zarówno wygląd, jak i rola widżetu odpowiadały funkcji, którą pełni”. Jeśli coś wygląda jak link, ale wykonuje akcję, APG zaleca zmienić wygląd, a nie tylko nadać mu rolę przycisku.
Kryteria WCAG
- 4.1.2 Nazwa, rola, wartość (A): rola w kodzie musi być poprawna, a każdy przycisk i link potrzebuje nazwy.
- 2.1.1 Klawiatura (A): oba muszą działać z klawiatury.
- 2.4.4 Cel łącza (w kontekście) (A): tekst linku mówi, dokąd prowadzi; samo „kliknij tutaj” tego nie robi.
- 2.4.7 Widoczny fokus (AA): oba pokazują fokus.
- 2.5.3 Etykieta w nazwie (A): dostępna nazwa zawiera widoczny tekst.
- 2.5.8 Rozmiar celu (minimum) (AA): małe przyciski z ikoną potrzebują 24 na 24 piksele CSS lub wystarczającego odstępu.
- 1.4.1 Użycie koloru (A): kolor nie może być jedyną cechą odróżniającą linki w tekście od otaczającego tekstu.
Przykład kodu
<!-- Nawigacja: link, nawet jeśli wygląda jak przycisk -->
<a href="/pl/kolekcje/wyprzedaz" class="btn btn-primary">Zobacz wyprzedaż</a>
<!-- Akcja: przycisk. type="button", aby nie wysyłał otaczającego formularza -->
<button type="button" class="btn" aria-describedby="price-123">Dodaj do koszyka</button>
<!-- Przycisk tylko z ikoną: nazwa pochodzi z ukrytego tekstu, ikona jest ukryta -->
<button type="button" class="icon-btn">
<svg aria-hidden="true" focusable="false"><use href="#icon-heart"></use></svg>
<span class="visually-hidden">Dodaj do ulubionych</span>
</button>
<!-- Przycisk przełączający: nazwa się nie zmienia, zmienia się stan -->
<button type="button" aria-pressed="false">Pokaż ceny z VAT</button>
Uwagi:
<a>bezhrefnie jest linkiem: nie przyjmuje fokusu i nie ma roli linku. Jeśli nie ma adresu URL, to jest przycisk.href="#"lubhref="javascript:void(0)"z obsługą kliknięcia to przycisk udający link. Należy użyć<button>.- Przy przycisku przełączającym APG mówi, że etykieta nie powinna zmieniać się wraz ze stanem – „Wycisz” pozostaje „Wycisz”, a
aria-pressedinformuje, czy jest włączony.
Obsługa klawiaturą
| Klawisz | Link | Przycisk |
|---|---|---|
| Tab / Shift + Tab | Przenosi fokus na element i z niego | Przenosi fokus na element i z niego |
| Enter | Otwiera link | Aktywuje przycisk |
| Spacja | Nie należy do wzorca linku; nie otwiera linku | Aktywuje przycisk |
Wzorzec przycisku w APG wymienia dla przycisków Spację i Enter; wzorzec linku – Enter. Użytkownicy polegają na tej różnicy. Link reagujący tylko na Spację albo „przycisk” reagujący tylko na kliknięcie myszą łamie oczekiwania. Gdy przycisk otwiera okno dialogowe, fokus powinien przejść do okna – zob. modalne okno dialogowe.
Typowe błędy w sklepach internetowych
- Klikalne elementy
divispandla „Dodaj do koszyka”, próbników kolorów lub „Pokaż więcej”. Są niewidoczne dla klawiatury. - Całe karty produktów owinięte linkiem, który zawiera też przyciski („Dodaj do ulubionych” wewnątrz linku karty). Zagnieżdżone w sobie elementy interaktywne dezorientują przeglądarki i technologie wspomagające.
- Przyciski z ikoną bez nazwy: koszyk, wyszukiwarka, zamknij (×), serduszko ulubionych, plus i minus ilości.
- Linki „Czytaj więcej” i „Kup teraz” powtórzone dwadzieścia razy bez kontekstu albo ten sam tekst prowadzący do różnych stron.
- Linki w treści wyróżnione tylko kolorem, często kolorem marki zbliżonym do koloru tekstu.
<button>w formularzu beztype="button", który wysyła formularz, choć użytkownik chciał tylko otworzyć tabelę rozmiarów.- Maleńkie cele z ikonami przy zmianie ilości i usuwaniu z koszyka.
Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego
Karty z naszej biblioteki reguł, które dotyczą tego wzorca:
| Automatycznie (reguła axe-core) | Co znajduje |
|---|---|
button-name, input-button-name |
Przyciski bez dostępnej nazwy |
link-name |
Linki bez dostępnej nazwy |
aria-command-name |
Elementy z role="button" lub role="link" bez nazwy |
nested-interactive |
Przyciski lub linki zagnieżdżone w innych elementach interaktywnych |
label-content-name-mismatch |
Widoczny tekst, którego brakuje w dostępnej nazwie |
link-in-text-block |
Linki w tekście wyróżnione tylko kolorem |
target-size |
Cele mniejsze niż 24 na 24 piksele bez wystarczającego odstępu |
identical-links-same-purpose |
Linki o tej samej nazwie prowadzące w różne miejsca (wskazówka) |
Test ręczny jest potrzebny, aby zdecydować, czy element powinien być linkiem, czy przyciskiem, znaleźć klikalne elementy div w ogóle bez roli, sprawdzić, czy Enter i Spacja działają poprawnie i czy teksty linków mają sens. Proszę przejść klawiszem Tab przez stronę produktu, koszyk i zamówienie i aktywować wszystko wyłącznie klawiaturą.
Darmowa kontrola jednej strony uruchomiona na stronie produktu znajdzie część automatyczną. To automatyczna kontrola, a nie pełny audyt.
Najczęstsze pytania
Kiedy użyć przycisku, a kiedy linku?
Link (element a z atrybutem href) – gdy jego aktywacja przenosi użytkownika na inną stronę, w inne miejsce strony lub do pliku. Przycisk – gdy wykonuje akcję na bieżącej stronie: dodaje do koszyka, otwiera okno dialogowe, wysyła formularz, przełącza filtr.
Czy link może wyglądać jak przycisk?
Tak. WCAG nie reguluje wyglądu. Liczy się to, by element w kodzie odpowiadał temu, co robi. Wezwanie „Kup teraz”, które otwiera stronę kategorii, jest linkiem, nawet jeśli wygląda jak przycisk.
Dlaczego to ważne dla użytkowników czytników ekranu?
Czytniki ekranu odczytują rolę („link” lub „przycisk”), więc użytkownik oczekuje albo przejścia, albo akcji. Wyświetlają też linki i przyciski na osobnych listach. Błędna rola budzi błędne oczekiwania.
Czy div z obsługą onclick jest dostępny?
Sam w sobie nie. Nie ma roli, nie da się do niego dojść klawiszem Tab i nie reaguje na Enter ani Spację. Zamiast niego należy użyć prawdziwego przycisku lub linku.
Czy kontrola automatyczna odróżni przycisk od linku?
Znajduje przyciski i linki bez nazwy oraz zagnieżdżone w sobie elementy interaktywne. Nie oceni, czy link powinien być raczej przyciskiem, i zwykle nie widzi klikalnych elementów div.
Źródła
- W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
- W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/
- W3C, Using ARIA (rules of ARIA use): https://www.w3.org/TR/using-aria/