Buton vs link: pe care să îl folosiți
Actualizat 14 octombrie 2026 · Lectură de 6 min
„Buton sau link?” este cea mai frecventă întrebare în dezvoltarea front-end accesibilă, iar răspunsul este scurt: un link vă duce undeva, un buton face ceva. Stilul vizual este o decizie separată. Această pagină arată diferența în cod, la tastatură și în termenii WCAG, plus greșelile pe care le vedem cel mai des în magazinele online. Face parte din seria modele UI accesibile.
Când folosiți fiecare
Folosiți un link <a href> |
Folosiți un buton <button> |
|---|---|
| Mergeți la altă pagină: produs, categorie, pagina coșului | Adăugare în coș, schimbarea cantității |
Salt la o secțiune de pe aceeași pagină (href="#reviews") |
Deschiderea sau închiderea unui meniu, dialog, panou de filtre |
| Descărcarea unui fișier (factură, tabel de mărimi în PDF) | Trimiterea sau resetarea unui formular |
| Deschiderea unui site extern | Redarea unui videoclip, pornirea unei prezentări, copierea unui cod |
APG o spune așa: „este important ca atât aspectul, cât și rolul unui widget să corespundă funcției pe care o oferă”. Dacă ceva arată ca un link, dar execută o acțiune, APG recomandă schimbarea designului vizual, nu doar atribuirea rolului de buton.
Criterii WCAG relevante
- 4.1.2 Nume, rol, valoare (A): rolul din cod trebuie să fie corect, iar fiecare buton și link are nevoie de un nume.
- 2.1.1 Tastatură (A): ambele trebuie să funcționeze cu tastatura.
- 2.4.4 Scopul linkului (în context) (A): textul linkului spune unde duce; „click aici” fără context nu spune.
- 2.4.7 Focus vizibil (AA): ambele arată focusul.
- 2.5.3 Eticheta în nume (A): numele accesibil conține textul vizibil.
- 2.5.8 Dimensiunea țintei (minim) (AA): butoanele mici cu pictograme au nevoie de 24 pe 24 pixeli CSS sau de spațiere suficientă.
- 1.4.1 Utilizarea culorii (A): culoarea nu trebuie să fie singurul lucru care deosebește linkurile din text de textul din jur.
Exemplu de cod
<!-- Navigare: un link, chiar dacă este stilizat ca buton -->
<a href="/ro/collections/sale" class="btn btn-primary">Vezi reducerile</a>
<!-- Acțiune: un buton. type="button" ca să nu trimită formularul din jur -->
<button type="button" class="btn" aria-describedby="price-123">Adaugă în coș</button>
<!-- Buton doar cu pictogramă: numele vine din text ascuns, pictograma este ascunsă -->
<button type="button" class="icon-btn">
<svg aria-hidden="true" focusable="false"><use href="#icon-heart"></use></svg>
<span class="visually-hidden">Adaugă la favorite</span>
</button>
<!-- Buton comutator: numele rămâne același, starea se schimbă -->
<button type="button" aria-pressed="false">Arată prețurile cu TVA</button>
Observații:
<a>fărăhrefnu este un link: nu poate primi focus și nu are rolul de link. Dacă nu există un URL, este un buton.href="#"sauhref="javascript:void(0)"plus un handler de clic este un buton care se dă drept link. Folosiți<button>.- Pentru un buton comutator, APG spune că eticheta nu ar trebui să se schimbe odată cu starea — „Mute” rămâne „Mute”, iar
aria-pressedspune dacă este activ.
Interacțiunea cu tastatura
| Tastă | Link | Buton |
|---|---|---|
| Tab / Shift + Tab | Mută focusul pe el și de pe el | Mută focusul pe el și de pe el |
| Enter | Urmează linkul | Activează butonul |
| Space | Nu face parte din modelul de link; nu urmează linkul | Activează butonul |
Modelul de buton din APG enumeră Space și Enter pentru butoane; modelul de link enumeră Enter. Utilizatorii se bazează pe această diferență. Un link care reacționează doar la Space sau un „buton” care reacționează doar la clicul mouse-ului încalcă așteptările. Când un buton deschide un dialog, focusul ar trebui să treacă în dialog — vedeți dialogul modal.
Greșeli frecvente în magazinele online
- Elemente
divșispanpe care se dă clic pentru „Adaugă în coș”, mostre de culoare sau „Încarcă mai multe”. Sunt invizibile pentru tastatură. - Carduri de produs întregi învelite într-un link care conține și butoane („Adaugă la favorite” în interiorul linkului cardului). Elementele interactive imbricate unele în altele încurcă browserele și tehnologiile asistive.
- Butoane cu pictograme fără nume: coș, căutare, închidere (×), inimioara de favorite, plus și minus pentru cantitate.
- Linkuri „Citește mai mult” și „Cumpără acum” repetate de douăzeci de ori fără context sau același text care duce la pagini diferite.
- Linkuri din textul paginii marcate doar prin culoare, adesea o culoare de brand apropiată de culoarea textului.
- Un
<button>într-un formular fărătype="button", care trimite formularul când utilizatorul voia doar să deschidă tabelul de mărimi. - Ținte minuscule cu pictograme pentru selectoarele de cantitate și eliminarea din coș.
Ce prind verificările automate vs testarea manuală
Fișele din biblioteca noastră de reguli care acoperă acest model:
| Automat (regulă axe-core) | Ce găsește |
|---|---|
button-name, input-button-name |
Butoane fără nume accesibil |
link-name |
Linkuri fără nume accesibil |
aria-command-name |
Elemente cu role="button" sau role="link" fără nume |
nested-interactive |
Butoane sau linkuri imbricate în alte elemente interactive |
label-content-name-mismatch |
Text vizibil care lipsește din numele accesibil |
link-in-text-block |
Linkuri din text care se bazează doar pe culoare |
target-size |
Ținte mai mici de 24 pe 24 pixeli fără spațiere suficientă |
identical-links-same-purpose |
Linkuri cu același nume care duc în locuri diferite (recomandare) |
Testarea manuală este necesară pentru a decide dacă un element ar trebui să fie link sau buton, pentru a găsi elementele div pe care se poate da clic și care nu au deloc rol, pentru a verifica dacă Enter și Space se comportă corect și dacă textele linkurilor au sens. Parcurgeți cu Tab pagina de produs, coșul și checkout-ul și activați totul doar cu tastatura.
Rulați verificarea gratuită a unei pagini pe o pagină de produs pentru a găsi partea automată. Este o verificare automată, nu un audit complet.
Întrebări frecvente
Când folosesc un buton și când un link?
Folosiți un link (elementul a cu href) când activarea lui duce utilizatorul la altă pagină, în alt loc de pe pagină sau la un fișier. Folosiți un buton când execută o acțiune pe pagina curentă: adaugă în coș, deschide un dialog, trimite un formular, comută un filtru.
Poate un link să arate ca un buton?
Da. WCAG nu reglementează stilul vizual. Contează ca elementul din cod să corespundă cu ceea ce face. Un îndemn „Cumpără acum” care deschide o pagină de categorie este un link, chiar dacă este stilizat ca buton.
De ce contează pentru utilizatorii de cititoare de ecran?
Cititoarele de ecran anunță rolul („link” sau „buton”), așa că utilizatorii se așteaptă fie la navigare, fie la o acțiune. De asemenea, afișează linkurile și butoanele în liste separate. Un rol greșit creează o așteptare greșită.
Este accesibil un div cu un handler onclick?
Nu, nu de unul singur. Nu are rol, nu poate fi atins cu Tab și nu reacționează la Enter sau Space. Folosiți în schimb un buton sau un link adevărat.
Poate o verificare automată să deosebească un buton de un link?
Găsește butoane și linkuri fără nume și elemente interactive imbricate unele în altele. Nu poate spune dacă un link ar fi trebuit de fapt să fie buton și de obicei nu vede elementele div pe care se poate da clic.
Surse
- 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 (regulile de utilizare a ARIA): https://www.w3.org/TR/using-aria/