A skiplink segítségével a billentyűzettel navigáló felhasználók gyorsan az oldal fő tartalmához ugorhatnak, így nem kell végiglépkedniük a fő tartalom előtt található interaktív elemeken (például a navigációs menü linkjein).
Link: Oldalon belüli navigációra szolgáló Link komponens.
Container: A link interaktív területe.
A skiplink mindig az oldal legelején van. Ez az oldal első fókuszálható eleme.
Alapállapotában vizuálisan rejtett. Csak akkor jelenik meg, amikor a felhasználó a Tab billentyűvel fókuszba helyezi. Ilyenkor a design system sztenderd fókuszjelölőjével is rendelkezik.
A komponens animálva is megjelenhet (például beúszhat az oldal tetejéről). Ha azonban a felhasználó a mozgások csökkentését kérte a rendszerében (prefers-reduced-motion), akkor a komponensnek mozgás nélkül, azonnal kell megjelennie/eltűnnie.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentességi 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étebb – 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!
A skiplink a Tab billentyűvel fókuszálható, és az Enter billentyűvel aktiválható. Ha a felhasználó aktiválja a skiplinket, a billentyűfókusz átkerül az oldal fő tartalmára.
Alapvetően minden oldalon, ahol a fő tartalom előtt a webhelyen megismétlődő interaktív elemek (például navigációs menü, keresőmező, nyelvválasztó) találhatók.
Egyszerű felépítésű oldalakon, amelyeknek nincs klasszikus fejlécük.
