Sobes.tech
Middle

Kui link näeb välja nagu nupp, kas peaks seda ikkagi nuppuna vormindama?

sobes.tech AI

Vastus AI-lt

Lingid (tähis <a>) kasutatakse teise lehekülje või ressursi suunamiseks. Nupud (tähis <button>) teevad tegevusi praegusel lehel, näiteks vormi saatmine või JavaScripti funktsiooni kutsumine.

Kui element täidab tegevust, kuid näeb välja nagu link, tuleks seda vormindada kui <button>. Vastupidi, kui element viib teisele lehele, kuid näeb välja nagu nupp, on parem kasutada <a>.

Ligipääsetavuse seisukohast:

  • Semantika: Ekraanilugejad ja teised abitehnoloogiad kasutavad tagide semantikat, et mõista elemendi eesmärki. Nuppu tajutakse kui interaktiivset elementi, mida saab aktiveerida, linki kui navigeerimisvahendit.
  • Klaviatuuriga suhtlemine: Vaikimisi aktiveeritakse nupud klahvi Enter või Space abil, lingid ainult Enter-iga. Klaviatuuriga navigeerivad kasutajad ootavad sellist käitumist.
  • Stiil ja JavaScript: Õige tagi kasutamine lihtsustab stiilide ja sündmuste käsitlemist.

Näide lingist, mis näeb välja nagu nupp:

<a href="/page" class="button">Mine lehele</a>

Näide nupust, mis imiteerib linki (harva, kuid võimalik spetsiifiliste UX lahenduste jaoks):

<button type="button" onclick="doSomething()" class="link">Teosta tegevus</button>

Üldiselt järgige semantikat: lingid navigeerimiseks, nupud tegevuste jaoks.