Skip link

Prezentare

Permite utilizatorilor de tastatură să sară direct la conținutul principal, fără să parcurgă din nou toată navigația repetitivă a fiecărei pagini.

Când se folosește

• ca primul element focusabil al fiecărei pagini, fără excepție.

Când nu se folosește

• ascuns permanent sau eliminat din tab order — scopul lui e exact să fie primul element accesibil de la tastatură.

Anatomie

Un `<a class="sd-skip-link" href="#continut">`, poziționat fix, ascuns vizual (`translateY(-180%)`) până la primire de focus.

Variante

• implicit — o singură variantă

Stări

• ascuns (implicit)
• vizibil (`:focus`, `translateY(0)`)

Comportament

Fără CSS: link real, funcțional, doar permanent vizibil (fără animația de apariție). Fără JavaScript: comportamentul de salt la focus e nativ browserului, prin `href="#id"`.

Reguli de conținut

• textul spune exact destinația („Sari la conținut"), nu un generic „Skip".

Responsabilitățile implementatorului

• `id`-ul țintă (de exemplu `continut`) trebuie să existe cu adevărat pe pagină, pe elementul `main` — verificat automat de testele de accesibilitate existente.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/50 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/navigation.css';

<a class="sd-skip-link" href="#catalog-content">Sari la conținut</a><div id="catalog-content" tabindex="-1">Conținutul paginii</div>

Contract și surse

• Documentația familiei Navigație
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).