Sobes.tech
Middle

Ha egy link úgy néz ki, mint egy gomb, akkor is gombként kell formázni?

sobes.tech MI

Válasz az MI-től

A hivatkozások (<a> címke) másik oldalra vagy erőforrásra való átirányításhoz használhatók. A gombok (<button> címke) a jelenlegi oldalon végrehajtott műveleteket végzik, például űrlap küldése vagy JavaScript függvény hívása.

Ha egy elem műveletet hajt végre, de linkként néz ki, akkor <button>-ként kell formázni. Fordítva, ha egy elem egy másik oldalra vezet, de gombként néz ki, akkor jobb az <a> használata.

Az akadálymentesség szempontjából:

  • Szemantika: A képernyőolvasók és más segédeszközök a tagek szemantikáját használják az elem funkciójának megértéséhez. A gomb interaktív elemként, a link navigációs elemként értelmeződik.
  • Billentyűzetes interakció: Alapértelmezés szerint a gombokat az Enter vagy a Space billentyűvel lehet aktiválni, a linkeket csak az Enter-rel. A billentyűzeten navigáló felhasználók ezt várják.
  • Stílus és JavaScript: A megfelelő tagek használata megkönnyíti a stílusok és eseménykezelők alkalmazását.

Példa link, mint gomb:

<a href="/page" class="button">Ugrás az oldalra</a>

Példa gomb, amely egy linket utánoz (ritka, de lehetséges UX megoldásokhoz):

<button type="button" onclick="doSomething()" class="link">Művelet végrehajtása</button>

Általánosságban tartsa be a szemantikus szabályokat: linkek navigációhoz, gombok műveletekhez.