A linkekkel egy weboldal vagy alkalmazás különböző részei között navigálhatnak a felhasználók.
Fejlesztői dokumentáció
Text: A link szövege.
Icon: A link előtt vagy után található ikon. (opcionális)
A link négy méretben – xSmall, small, medium és large – használható. A méretet a link körüli kontextus határozza meg.
A link brand, neutral és inverted (fehér) színben használható. Az alapértelmezett szín a brand szín.
A bold (félkövér) stílust általában akkor használjuk, ha a link nem folyószöveg része.
A szövegbe ágyazott linkeket mindig aláhúzzuk. A különálló linkeknél, ha a kontextus alapján egyértelmű az interaktivitás – például a headerben vagy a footerben – elhagyhatjuk az aláhúzást.
Az ikon a link előtt és mögött is elhelyezhető.
A komponens interaktív elemei a design system sztenderd interakciós állapotainak logikáját követik.
A komponens teljes területe interaktív, az opcionális ikont is beleértve.
A linkek fontos szerepet játszanak a navigációban. A linkek szövegét úgy kell megfogalmazni, hogy a környező szövegek elolvasása és kattintás nélkül is egyértelmű legyen a felhasználónak, hogy hova vagy mire mutat a link.
-
A szövegbe ágyazott linkeket a mondat részeként kezeljük. Csak a linkelt szöveget húzzuk alá.
-
A különálló linkeket nagy kezdőbetűvel kezdjük. (Csak az első szó kezdőbetűje legyen nagy!)
-
Csak akkor használunk mondatvégi írásjelet, ha kérdésként vagy felszólításként fogalmaztunk.
A szövegbe ágyazott linkek a mondat vagy a bekezdés részeként, az önálló linkek a szövegtől függetlenül, különállóan jelennek meg. A szövegbe ágyazott linkeket mindig aláhúzzuk.
Egy mondaton belül lehetőleg csak egy linket használjunk. Ha túl sok mindent linkelünk, sérülhet az üzenet és az olvashatóság.
A gombot akciók végrehajtására, a linket új oldalra vagy oldalon belüli navigálásra használjuk. Fontos, hogy ezeket az elemeket a funkcióiknak megfelelően és a megszokott kinézetükkel implementáljuk.
Ha egy linket – például egy hero szekció call to actionjét – mégis gombként szeretnénk megjeleníteni, akkor a kódban implementált elemnek szemantikailag linknek kell lennie. (A terveken ezt érdemes annotálni a fejlesztőknek.)
A gombok és a linkek helyes használatával az asszisztív technológiákat használó felhasználók élményét is javíthatjuk.
-
A képernyőfelolvasó szoftverek az elemek típusát is közlik a felhasználókkal. Ez működésbeli elvárásokat is magával hoz, például előrevetíti, hogy milyen billentyűvel lehet aktiválni az elemet. Ha ez inkonzisztens, a felhasználók össze fognak zavarodni.
-
Hangalapú navigációnál a felhasználók az elemek típusát – például “Tovább gomb” – is kimondják. Ha a kinézet eltér az implementált elem típusától, nem fog működni a hangalapú navigáció.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
Az aláhúzás elhagyása a fentieknek ellentmondana, ezért csak akkor engedélyezett, ha egyéb kontextuális utalásokból – pozíció, szövegkörnyezet – egyértelműen kiderül, hogy interaktív a link.
A link tabbal fókuszálható és enterrel aktiválható.
Általános linkek – például Részletek – helyett érdemes egyedi linkeket használni. Ha mégis általános linket használunk, az aria-describedby vagy aria-labelledby attribútumokkal asszociálni kell a linket a kontextushoz kapcsolódó szövegekkel.
A linkek ikonjai általában a dekoratívak és a jelentés megerősítésére szolgálnak, ezért rejtettek az asszisztív technológiák elől.
Ha az ikont a jelentés kiegészítésére használjuk, gondoskodni kell a megfelelő alternatív szövegről (például alt=”Új lapon nyílik meg”).
