A skiplinkkel oldalon belül navigálhatnak a felhasználók. Leginkább képernyőolvasó szoftverrel vagy billentyűzettel navigálók használják, hogy átugorják az ismétlődő tartalmakat.
Fejlesztői dokumentáció
Container: A skiplinket befoglaló teljes interaktív terület.
Link: A navigációra szolgáló Link komponens.
A skiplink alapesetben rejtett, csak fókuszálás hatására jelenik meg.
A skiplink mindig az átugrandó tartalom előtt jelenik meg, az első interaktív elemként.
A komponens a design system sztenderd interakciós állapotainak logikáját követi. A skiplink alapállapota focused, mivel csak fókuszálás hatására jelenik meg.
A skiplink akadálymentesítési szempontból kulcsfontosságú komponens.
Minden ismétlődő tartalom elé érdemes skiplinket rakni, hogy a billentyűzettel navigáló felhasználóknak az oldal újratöltése után ne kelljen Tab billentyűvel átugorniuk az ismétlődő tartalmakat.
A skiplinket leggyakrabban az oldalak fő navigációjának átugrására használjuk. A skiplinknek az oldal tartalmi részére kell mutatnia.
A skiplinket egyéb, ismétlődő elemek átugrására is használhatjuk. Például egy kereső elemeit átugorva a találatokhoz navigálhatjuk a felhasználókat.
Akár több skiplinket is elhelyezhetünk egymás után. Például ha a lábléc fontos linkeket tartalmaz, akkor az oldal tetején elhelyezhetünk egy “Ugrás a találatokra” és egy “Ugrás a láblécre” skiplinket is. A skiplinkek pozíciója ugyanaz, és egyszerre csak egy jelenik meg.
Ügyeljünk rá, hogy csak akkor használjunk skiplinket, ha valóban szükséges! A túl sok skiplinkkel létrehozzuk ugyanazt a problémát, amit a skiplinknek kellene megoldania, és a felhasználónak skiplinkeket kell átugrania a gyorsabb navigáláshoz.
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!
A komponens a Tab billentyűvel fókuszálható, és rendelkezik a design system sztenderd fókuszjelölőjével.
-
A skiplink egy egyszerű linkként implementált: <a href="#main-content">Ugrás a tartalomra</a>
-
A linkelt elemre tabindex=”-1” attribútumot kell adni, hogy fókuszálható legyen. Például: <main id="main-content" tabindex="-1">
