Knoppen

Introductie

Knoppen op een website zijn interactieve elementen waarmee gebruikers een actie kunnen uitvoeren, zoals het verzenden van een formulier, het starten van een download of het navigeren naar een andere pagina. Ze maken de bediening van een site duidelijk en gebruiksvriendelijk.

Soorten knoppen

HTML

Kies altijd voor het semantisch correcte HTML-element. Bijvoorbeeld een <a> voor een link en een <button> voor een knop. Het gebruik maken van semantisch correcte HTML-elementen zorgt ervoor dat gebruikers die door middel van hulptechnologiën navigeren ook de correcte informatie krijgen. In de onderstaande tabel staan enkele veelvoorkomende voorbeelden.

Overzicht van type buttons met situatieschetsen
Situatie<button><input><a>
Submitknop binnen een formulier
Correct
Correct
Incorrect
Resetknop binnen een formulier
Correct
Correct
Incorrect
Login-knop naar login-pagina
Incorrect
Incorrect
Correct
Actieknop met een link naar een ander deel van de site
Incorrect
Incorrect
Correct
Actieknop, bijvoorbeeld een actie binnen een tabel
Correct
Correct
Incorrect
Legenda
Semantisch correct en het gewenste html-element voor hulptechnologiën.
Semantisch correct maar geeft problemen voor bepaalde gebruikersgroepen.
Semantisch incorrect.

Aandachtspunten

Knoppen uitschakelen

Het uitschakelen van een knop “disable” wordt afgeraden vanuit zowel toegankelijkeid als gebruikerservaring. Het is beter om de knop functioneel te laten. Dan kan de gebruiker de knop gebruiken om erachter te komen wat er fout gaat.

Span of Div

Hoewel bijvoorbeeld een span en een div visueel vormgegeven kunnen worden als een knop, en met behulp van bijvoorbeeld Javascript zich ook kunnen gedragen als een knop. Is het semantisch incorrect om deze html-elementen hiervoor te gebruiken. Gebruik in plaats hiervan een: button, a of input.