Skiplink

Bezoekers die niet met de muis kunnen navigeren, bedienen het web meestal door te navigeren met het toetsenbord. Zij doen dit met de tab toets. Door tab en shift + tab te gebruiken kan men naar de volgende of vorige link of knop op de pagina gaan. Welk element actief is (de tabfocus), is vervolgens te zien doordat er een kader omheen komt te staan, de zogenaamde “focus rectangle”.

Er staan vaak veel links op een webpagina. Voor een deel zijn dit links die op alle pagina’s terugkomen. Om het navigeren sneller te maken, stellen de webrichtlijnen het gebruik van een skiplink voor. Met een dergelijke link kan direct naar de hoofdcontent op de pagina worden “gesprongen”. Zo’n skiplink is meestal onzichtbaar en staat bovenaan in de broncode van de pagina. Wanneer een bezoeker op de link klikt, wordt de focus naar een punt verderop in de pagina verplaatst zodat men herhalende onderdelen op de pagina kan overslaan.

Gebruik

Elke pagina binnen DUO dient voorzien te zijn van een skiplink. Eenskiplink bestaat uit 2 delen. Vóór alle navigatie dient de link opgenomen te worden:

Daarnaast moet de content container worden voorzien van een ID, welke gelijk moet zijn aan de target van de skiplink, in dit geval #example_content. Belangrijk is om ook het tabindex attribuut op te nemen, dit zorgt ervoor dat de skiplink ook in Chrome goed werkt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique ultrices aliquet. Maecenas fringilla interdum ligula consequat feugiat. Pellentesque facilisis malesuada dui, et varius sem ornare id. Nunc tempor, nulla at blandit volutpat, tortor augue aliquet ante, vitae porta erat nibh a felis. Vivamus vitae sagittis augue.

Benodigde stylesheets

  • /uno/components/skiplink/skiplink.css