JavaScript OnClick? Gebruik dan a of button.

Meer en meer komen we elementen tegen die aanklikbaar zijn maar die geen toetsenbord focus verwerven. Ziende toetsenbord gebruikers kunnen er niet naartoe tabben, blinde screenreader gebruikers weten niet dat er iets interactief is of nog andere gebruikers kunnen geen commando geven aan hun spraaksoftware.

Deze elementen linken niet naar een pagina maar veroorzaken een paginawijziging aan de hand van JavaScript.

Enkele voorbeelden:

• Een hamburger menu om de navigatie te tonen in een responsive website:

  <span onclick="...">Toggle navigation</span>

• Sluitknop, vorige en volgende knoppen in een lightbox:

  <div onclick="...">Sluiten</div>

• Links in facetnavigatie om zoekresultaten te filteren:

  <li onclick="...">Tussen 1200W en 1500W</li>

• Sorteren van tabellen aan de hand van de th elementen:

  <th onclick="...">Datum</th>

• Items uit je winkelwagentje verwijderen:

  <img onclick="..." alt="Verwijder item" />

<div>, <span>, <th>, … elementen die interactief gemaakt zijn, zijn bijna nooit toetsenbord toegankelijk. Als je dat wel wilt, moet je veel moeite doen met tabindex, ARIA en/of extra JavaScript om deze elementen toch focusbaar te maken en bruikbaar te maken voor elk type gebruiker.

De oplossing is relatief eenvoudig. Gebruik altijd een link of button waar je je JavaScript aan koppelt. Een link of button komt altijd in de tab flow en krijgt altijd toetsenbord focus. Werk je met JavaScript en link je niet naar een pagina? Dan zijn er enkele manieren om dit te doen, we werken met heel simpele JavaScript code die een alert toont om onze code voorbeelden beknopt te houden.

a href="#"

In deze eerste manier staat de JavaScript code onClick als attribuut bij de link.

<a href="#" onclick="alert('Code voorbeeld 1');">
  Voorbeeld 1
</a>

Event Listener

Bij een listener kan je makkelijk je code scheiden van je element. Je JavaScript code kan in je HTML staan of in een apart JavaScript bestand staan.

We gebruiken jQuery om de event listener te koppelen aan de link met id="link2".

<a href="#" id="link2">
  Voorbeeld 2
</a>
<script>
  $("#link2").click(function() {
    alert('Code voorbeeld 2');
  });
</script>

In href

Hier maak je geen gebruik van een listener of OnClick maar staat de code in het href attribuut.

<a href="javascript:alert('Code voorbeeld 3');">
  Voorbeeld 3
</a>

Advies

Elke manier is toegankelijk, kies er diegene uit die het best bij je workflow past.

Gebruik geen of niet alleen onMouseOver, onMouseOut, onKeyDown, onKeyUp en onDblClick aangezien die niet voor elke gebruiker werken. OnClick doet dat wel, gebruik onClick zoals in één van onze drie voorbeelden.

Gerelateerd artikel: Links versus buttons, Marcy Sutton