Als een link eruitziet als een knop, moet je het dan toch als een knop formatteren?

Links (tag <a>) worden gebruikt om naar een andere pagina of bron te navigeren. Knoppen (tag <button>) voeren acties uit op de huidige pagina, zoals het verzenden van een formulier of het aanroepen van een JavaScript-functie.

Als een element een actie uitvoert maar eruitziet als een link, moet het worden geformatteerd als <button>. Omgekeerd, als een element naar een andere pagina leidt maar eruitziet als een knop, is het beter om <a> te gebruiken.

Toelichting vanuit toegankelijkheidsperspectief:

• Semantiek: Screenreaders en andere assistieve technologieën gebruiken de semantiek van tags om de functie van het element te begrijpen. Een knop wordt gezien als een interactief element dat geactiveerd kan worden, een link als een navigatie-element.
• Toetsenbordinteractie: Standaard worden knoppen geactiveerd met Enter of Space, links alleen met Enter. Toegankelijke gebruikers verwachten dit gedrag.
• Stijl en JavaScript: Het gebruik van de juiste tags vereenvoudigt het toepassen van stijlen en event handlers.

Voorbeeld van een link die als knop is vormgegeven:

<a href="/page" class="button">Ga naar pagina</a>

Voorbeeld van een knop die een link imiteert (zelden, maar mogelijk voor specifieke UX-oplossingen):

<button type="button" onclick="doSomething()" class="link">Voer actie uit</button>

Over het algemeen, houd je aan de semantiek: links voor navigatie, knoppen voor acties.