Het anchor-element heeft een href
-attribuut en wordt vaak gebruikt als hyperlink naar:
<a>
en </a>
tag staan.Er zijn verschillende anchorelementen:
Externe links krijgen de class extern en een target="_blank"
en rel="noopener noreferrer"
. In de link staat een span.sr-only
met de tekst ‘opent in nieuw venster’.
Skiplinks en jumplinks zijn componenten in de gebruikersinterface waarmee een gebruiker snel naar een onderdeel van de tekst kan springen. Dit moet blijken uit de tekst.
De aanbevolen formulering is “spring naar …”. Soms is een andere formulering gepaster. Dat is niet erg, zolang de functie van de link maar uit de tekst blijkt. Webpagina’s hebben vaak 3 skiplinks:
Gebruik in-page links bij lange, informatieve pagina’s om scrollen te verminderen. Veel content heeft een structuur met meerdere secties en duidelijke titels. Gebruik de titels als in-page links. Door erop te klikken, leidt u de lezer direct naar het punt waar die content begint. De link is meestal onderdeel van een lopende zin. Soms komen ze ook voor in een inhoudsopgave.
Bij een pagina met korte secties is het niet nodig om in-page links te gebruiken. Gebruikers verwachten dat een link normaal gesproken naar een andere pagina gaat. Als die verwachting niet uitkomt, kan dat verwarrend zijn.
In-page links kunnen een inhoudsopgave laten zien, een back-to-top link, indexpagina of FAQ’s. Zorg ervoor dat de linktekst nauwkeurig aangeeft waar hij precies naar verwijst. Zorg er ook voor dat de linktekst duidelijk is in de context van de zin. Gebruik altijd dezelfde tekst voor in-page links als voor de titel waar de link naartoe gaat. Zo weet de gebruiker dat hij bij de juiste content is gekomen.
Gebruik page links om de navigatie door uw website te verbeteren. Ze bepalen de architectuur en hiërarchie van de website. Dat is bijvoorbeeld te zien in de sitemap. Daarin zijn de verschillende lagen duidelijk te zien. Gebruik page links ook om naar een andere pagina of sectie te navigeren zonder een nieuwe taak te starten.
Leg altijd duidelijk uit waar een page link naartoe leidt. Ook zonder hun context moeten de links namelijk begrijpelijk zijn. Zet het meest relevante zoekwoord vooraan. Gebruik geen vage of algemene labels voor links. Volg de conventies voor gemeenschappelijke functies. Zo wordt het voor gebruikers met schermlezers gemakkelijker om de links alfabetisch te vinden.
Gebruik externe links om te linken naar pagina’s die buiten het domein van de website liggen.
Als u een externe link gebruikt, komt er een ‘externe link’-icoon achter de tekstlink te staan. Dat geeft aan dat de gebruiker naar een andere website navigeert. Let op dat het icoontje het volgende sr-only
(dus: visueel verborgen) alternatief heeft: “opent in nieuw venster”.
Gebruik functionele links in de volgende gevallen: Om een ‘mailto:’-koppeling te maken die opent in een e-mailprogramma. Om een telefoonnummer automatisch te bellen. Om een tekstlink te maken met het woord ‘downloaden’ en het downloadicoon erachter.
Verminder dubbelzinnigheid door een label met een icoon op te nemen. Zorg dat zowel de icoon als de tekst een link is.
sr-only
span om het aan te bieden. Formuleer het bijvoorbeeld als: Google <span class="sr-only">(Opent in nieuw venster)</span>
sr-only
voor de linktekst te zetten. Bijvoorbeeld: <span class="sr-only">spring naar</span> inhoudsopgave
.
<!-- Default -->
<a href="#">Home</a>
<!-- Download -->
<a href="afvalkalender.pdf" class="download">Download Afvalkalender 2017</a>
<!-- Extern -->
<a href="http://www.google.nl" class="extern" target="_blank" rel="noopener noreferrer">Een link naar Google<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>
<!-- Icon -->
<a href="#" title="Product zoeken">Product zoeken <dso-icon icon="search"></dso-icon></a>
<!-- Label -->
<a href="#">Product zoeken</a>
<!-- Iconlabel -->
<a href="#">
<dso-icon icon="search"></dso-icon> Product zoeken
</a>
<a href="{{ url }}"{% if iconOnly %} title="{{ label }}"{% endif %} {{ className(modifier) }} {% if modifier and modifier.indexOf('extern') > -1 %}target="_blank" rel="noopener noreferrer"{% endif %} {{ attributes([current, 'aria-current', 'page']) }}>
{%- if icon and not iconOnly -%}
<dso-icon icon="{{ icon }}"></dso-icon>
{%- if not modifier or not (modifier.includes('btn') or modifier.includes('primary') or modifier.includes('secondary') or modifier.includes('tertiary')) %} {% endif -%}
{%- endif -%}
{%- if modifier and (modifier.includes('btn') or modifier.includes('primary') or modifier.includes('secondary') or modifier.includes('tertiary')) -%}
<span {{ className([iconOnly, 'sr-only']) }}>{{ label }}</span>
{%- else -%}
{{ label }}
{%- endif -%}
{%- if modifier and modifier.includes('extern') -%}
<span class="sr-only">(Opent andere website in nieuw tabblad)</span>
{%- endif -%}
{%- if iconAfter or iconOnly -%}
{%- if not modifier or not (modifier.includes('btn') or modifier.includes('primary') or modifier.includes('secondary') or modifier.includes('tertiary')) %} {% endif -%}
<dso-icon icon="{{ iconAfter or icon }}"></dso-icon>
{%- endif -%}
</a>
/* Default */
__title: default
label: Home
url: '#'
/* Download */
__title: download
label: Download Afvalkalender 2017
url: afvalkalender.pdf
modifier: download
/* Extern */
__title: extern
label: Een link naar Google
url: http://www.google.nl
modifier: extern
/* Icon */
__title: icon
label: Product zoeken
url: '#'
icon: search
iconOnly: true
/* Label */
__title: label
label: Product zoeken
url: '#'
/* Iconlabel */
__title: icon label
label: Product zoeken
url: '#'
icon: search