Knop of link? Het verschil voor toegankelijkheid

Op het scherm staan twee blauwe rechthoeken met witte tekst: “Bekijk de collectie” en “In winkelmand”. Ze zien er precies hetzelfde uit. Toch is de ene een link en de andere een knop, of zou dat in elk geval moeten zijn. Voor een ziende muisgebruiker maakt het niet uit. Voor iemand met een schermlezer of een toetsenbord maakt de keuze tussen knop of link het verschil tussen een site die werkt en een site die verwarrend is.

De vuistregel: gaat het ergens heen, of doet het iets?

Het onderscheid is eenvoudig:

• Een link brengt de bezoeker naar een andere plek: een andere pagina, een ander deel van dezelfde pagina, een bestand. Het adres in de browser verandert, of de pagina scrolt naar een anker.
• Een knop voert een actie uit op de huidige pagina: een formulier versturen, een product in de winkelmand leggen, een menu openen, een pop-up sluiten, een filter toepassen.

Wat het eruitziet, doet er niet toe. Een link mag eruitzien als een knop (“Bekijk de collectie” in een blauwe rechthoek), en een knop mag eruitzien als tekst (“Toon meer reviews”). Het gaat om wat er gebeurt.

Element	Voorbeeld	Goede keuze
“Naar de contactpagina”	Navigeert naar /contact	Link
“In winkelmand”	Voegt product toe	Knop
Hamburgermenu-icoon	Opent het menu	Knop
“Download brochure”	Opent een pdf	Link
Kruisje in een pop-up	Sluit de pop-up	Knop
“Verstuur”	Verstuurt formulier	Knop

Waarom de keuze tussen knop of link uitmaakt

Wat een schermlezer zegt

Een schermlezer kondigt elk element aan met zijn rol: “link, Bekijk de collectie” of “knop, In winkelmand”. Een gebruiker leidt daaruit af wat er gaat gebeuren. Bij een link verwacht hij naar een nieuwe pagina te gaan. Bij een knop verwacht hij dat er iets op de huidige pagina verandert. Klopt de rol niet met wat er gebeurt, dan raakt hij de draad kwijt: hij denkt een nieuwe pagina te openen, maar er klapt een menu uit, en hij weet niet waar de focus nu is.

Hoe het toetsenbord werkt

Links en knoppen reageren verschillend op toetsen:

• Een link activeert u met Enter.
• Een knop activeert u met Enter én met de spatiebalk.

Toetsenbordgebruikers zijn daaraan gewend. Wie op de spatiebalk drukt bij iets dat een knop lijkt, maar het is een link, ziet de pagina naar beneden scrollen in plaats van dat er iets gebeurt.

Wat de browser verder regelt

Een link kunt u openen in een nieuw tabblad, kopiëren, bewaren als bladwijzer. Bij een knop kan dat niet, en dat hoort ook niet. Gebruikt u een link voor een actie, dan krijgt de bezoeker opties die niets doen, of iets onverwachts.

Het echte probleem: de div met onclick

Erger dan een link die een knop had moeten zijn, is een element dat helemaal niets is. In veel thema’s, pagebuilders en plugins vindt u dit:

<div class="btn" onclick="voegToe()">In winkelmand</div>

Met de muis werkt het. Maar:

• met de Tab-toets komt u er niet op, want een div kan standaard geen focus krijgen;
• een schermlezer zegt alleen “In winkelmand”, zonder dat het iets aanklikbaars is;
• Enter en spatiebalk doen niets;
• spraakbesturing herkent het niet als iets om op te klikken.

Dat is een overtreding van onder meer WCAG 2.1.1 (Toetsenbord, niveau A) en 4.1.2 (Naam, rol, waarde, niveau A). En het komt veel voor, omdat het er op het scherm goed uitziet.

De oplossing: gebruik het echte element

Voor een actie:

<button type="button" class="btn" onclick="voegToe()">In winkelmand</button>

Voor navigatie:

<a href="/collectie/" class="btn">Bekijk de collectie</a>

Met een echt <button>-element krijgt u focus, de juiste rol en de toetsenbordbediening gratis. Met CSS maakt u hem er precies zo uit als de div. Twee aandachtspunten:

• Geef een knop binnen een formulier die niet het formulier verstuurt, altijd type="button". Anders gedraagt hij zich als verstuurknop.
• Een link zonder href is geen link. <a onclick="..."> krijgt geen focus. Is het een actie, gebruik dan een knop.

Kan het element om een technische reden echt geen button zijn, dan kunt u met role="button" en tabindex="0" de rol en focus nabootsen. Maar dan moet u zelf JavaScript schrijven voor Enter en de spatiebalk. Dat is meer werk en foutgevoeliger. Het echte element is bijna altijd beter.

Knoppen met alleen een icoon

Een speciaal geval: knoppen met alleen een pictogram, zoals een vergrootglas, een hartje of een kruisje. Ook als het een echte button is, weet een schermlezer niet wat hij moet zeggen als er geen tekst in staat. De knop heeft een toegankelijke naam nodig, bijvoorbeeld via verborgen tekst of een aria-label. Hoe u dat goed doet, staat in aria-label uitgelegd.

Zelf controleren

1. Ga met de Tab-toets door een pagina. Slaat de focus een knop of link over? Dan is het waarschijnlijk een div of span.
2. Druk bij een knop op de spatiebalk. Gebeurt er niets of scrolt de pagina? Dan is het geen echte knop.
3. Klik met de rechtermuisknop op een element en kies “Inspecteren”. Staat er <button>, <a href>, of iets anders?
4. Zet een schermlezer aan en luister of er “knop” of “link” wordt gezegd, en of dat klopt met wat er gebeurt.

Problemen met nep-knoppen zitten meestal in het thema, de pagebuilder of een plugin. Dat betekent ook dat één aanpassing vaak de hele site verbetert. Hoe u de bediening met het toetsenbord in het algemeen nagaat, staat bij toetsenbordnavigatie op uw website. Het overzicht van alle onderdelen vindt u bij website toegankelijk maken.