Skip link component for the Municipality of Utrecht based on the NL Design System architecture
npm install @utrecht/skip-link-css_Skip links_ zijn belangrijk om te gebruiken op de meeste websites omdat voor sommige gebruikers het hierdoor niet onnodig veel tijd kost om je website te gebruiken. Met een _skip link_ ga je naar een andere plek op dezelfde pagina, zodat je bijvoorbeeld gelijk een artikel kan lezen en links daarin kunt aanklikken, zonder tijd te besteden aan de hoofdnavigatie.
_Skip links_ zijn meestal onzichtbaar als je de pagina opent, maar ze zijn wel makkelijk vindbaar voor deze gebruikers. Met het toetsenbord vindt je een _skip link_ door op Tab te drukken wanneer je de pagina hebt geladen. (Voor macOS gebruikers is het nodig om de standaard-instellingen aan te passen voordat dit werkt.)
Maak skip links naar de drie belangrijkste onderdelen op de pagina, in deze volgorde:
1. _main content_: vaak een link naar een of element
2. _main navigation_: als je een _main navigation component_ hebt, link dan hier naar als je het niet al de volgende link is in de tabvolgorde.
3. _search form_: als je een zoekveld hebt om vanuit deze pagina de zoeken, gebruik deze _skip link_ als laatste.
Als je de skip link gaat gebruiken op een website, begin dan consistent elke pagina met de skip link zodat de navigatie op een voorspelbare manier werkt (WCAG 3.2.3).
Skip links zijn niet nodig op een simpele pagina waar alleen tekst staat en geen navigatie. Een startpagina van een zoekmachine heeft bijvoorbeeld wel een navigatie én een zoekformulier, maar door het gebruik van autofocus voor het zoekveld heeft het geen zin om een skip link te gebruiken.
- plaats de _skip link_ als allereerste interactieve element van de pagina, bijvoorbeeld als eerste HTML-element in Het is belangrijk dan gebruikers snel bij de _navigation landmark_ voor het hoofdmenu komen kunnen komen, het zou niet handig zijn als je altijd eerst de _navigation landmark_ met skip links moet overslaan. Niet: `` Wel: ` De pagina is beter leesbaar wanneer de CSS niet is geladen als je een _block-level_ HTML-element gebruikt zoals div Als je de skip link een vaste locatie geeft met CSS position Niet: ` Wel: ` Het moet voor skip link gebruikers duidelijk zijn als er een _cookie consent_ is op de pagina, je wilt niet dat deze belangrijke functionaliteit wordt overgeslagen. - WCAG 1.3.1: een link.
- plaats de _skip link_ voor landmarks zoals het
- gebruik een of om de link in de plaatsen, gebruik niet een losse , zodat de link ook duidelijk is als CSS niet geladen is.
- gebruik geen element voor skip links.Hoe het niet moet
$3
html`html`… of p met daarin de skip links, dan komt de HTML die volgt na de skip links netjes op een eigen regel te staan.$3
, dan kan de link over de inhoud van de pagina heen staan. Gebruik daarom een achtergrondkleur voor de _skip link_, zodat de link-tekst altijd leesbaar is.$3
css`
.utrecht-skip-link {
position: absolute;
/ … /
}css`
.utrecht-skip-link {
position: fixed;
/ … /
}Privacy
Links
role wordt gebruikt, het liefst door het a HTML-element met een _fragment identifier_ URL: . Gebruik niet button.tabindex
- WCAG 1.3.2: een _cookie consent_ formulier moet als eerste komen, de skip link als tweede.
- WCAG 2.4.1: gebruik een _skip link_ op alle pagina's waar voor de unieke inhoud van die pagina er herhalende informatie staat, zoals een header of navigatie.
- WCAG 2.4.3: een _cookie consent_ moet als eerste focus krijgen, direct daarna de skip links. Zet de HTML van de _skip link_ vooraan in het document. Gebruik niet om de gewenste focus volgorde te bereiken, want dat kan problemen opleveren met bijvoorbeeld _cookie consent_ formulieren.click
- WCAG 2.4.7: de _skip link_ is zichtbaar wanneer die focus heeft. Het visueel ontwerp maakt duidelijk dat het element focus heeft, doordat de stijl consistent is met andere links wanneer ze focus hebben. De skip link mag ook altijd zichtbaar zijn, het is niet verplicht ze standaard te verbergen.
- WCAG 2.5.2: een skip link moet geactiveerd worden bij , niet bij mousedown`.
- WCAG 2.5.2
- WCAG 2.5.5: skip link afmeting is ten minste 44×44px.
- WCAG 3.2.3: skip link wordt consistent gebruikt op elke pagina.
- WCAG 3.1.3: gebruik duidelijke taal voor het label. Bijvoorbeeld niet: "Direct naar de secundaire content met widgets".
- WCAG 3.2.4: gebruik dezelfde labels voor de _skip link_ op alle pagina's. Bijvoorbeeld niet: "Navigatie overslaan" op een gedeelte van de site, en "Naar de inhoud" op andere pagina's.