@utrecht/skip-link-css
v1.2.0
Published
Skip link component for the Municipality of Utrecht based on the NL Design System architecture
Downloads
86
Keywords
Readme
Skip link
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:
- main content: vaak een link naar een
<main>of<article>element - 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.
- 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.
HTML
- plaats de skip link als allereerste interactieve element van de pagina, bijvoorbeeld als eerste HTML-element in
<body>. - plaats de skip link voor landmarks zoals het
<header>element van de page header component. - gebruik een
<div>of<p>om de link in de plaatsen, gebruik niet een losse<a>, zodat de link ook duidelijk is als CSS niet geladen is. - gebruik geen
<nav>element voor skip links.
Hoe het niet moet
Skip links onnodig in een <nav> HTML-element
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:
<nav class="skip-links">…</nav>Wel:
<div class="skip-links">…</div>De pagina is beter leesbaar wanneer de CSS niet is geladen als je een block-level HTML-element gebruikt zoals div of p met daarin de skip links, dan komt de HTML die volgt na de skip links netjes op een eigen regel te staan.
Skip link onleesbaar door overlap met achtergrond
Als je de skip link een vaste locatie geeft met CSS position, 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.
Onnodig scrollen bij focus
Niet:
.utrecht-skip-link {
position: absolute;
/* … */
}Wel:
.utrecht-skip-link {
position: fixed;
/* … */
}Privacy
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.
Links
- WCAG 1.3.1: een
linkrole wordt gebruikt, het liefst door hetaHTML-element met een fragment identifier URL:<a href="#target">. Gebruik nietbutton. - 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
tabindexom de gewenste focus volgorde te bereiken, want dat kan problemen opleveren met bijvoorbeeld cookie consent formulieren. - 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
click, niet bijmousedown. - 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.