OnClick? Préférez un lien ou un bouton!

De plus en plus souvent, nous rencontrons des éléments cliquables qui ne reçoivent pas le focus. Les personnes qui naviguent au clavier ainsi que les utilisateurs de lecteurs d'écran ne peuvent les utiliser.

Ces éléments cliquables ne pointent pas vers une nouvelle page, mais vers des éléments internes de la page. Ils provoquent souvent des rafraîchissements partiels du contenu de la page

Quelques exemples:

• Un menu 'hamburger' pour la navigation dans un site responsive:

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

• Les boutons 'fermer', 'suivant' et 'précédent' dans une lightbox:

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

• Les liens qui permettent de filtrer les résultats d'une recherche:

  <li onclick="...">Entre 1200W et 1500W</li>

• Trier un tableau sur base du contenu du 'th':

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

• Le bouton corbeille qui permet d'éliminer un item de la liste de vos achats:

  <img onclick="..." alt="Enlever cet article" />

Les éléments <div>, <span>, <th>, … qui sont rendus interactifs via JavaScript (onclick) ne sont pas accessibles au clavier. Si vous souhaitez les rendre focusables et accessibles, vous devrez recourir à ARIA et ajouter du code JavaScript. Cette option est assez compliquée.

Il existe une solution bien plus simple: toujours utiliser un lien (a href) ou un bouton (button) qui sera couplé à du JavaScript. Un lien ou un bouton sont toujours inclus dans l'ordre de tabulation et reçoivent toujours le focus. Voici trois exemples de code qui ouvrent une fenêtre 'alert'.

a href="#"

Dans ce premier exemple, 'onclick' est utilisé comme attribut du lien:

<a href="#" onclick="alert('Exemple 1');">
  Exemple 1
</a>

Event Listener

En utilisant un 'Event Listener' vous pouvez séparer le code JavaScript du HTML en le plaçant ailleurs dans le code source de la page ou dans un fichier séparé.

Nous utilisons ici jQuery pour coupler l'Event Listener au lien id="lien2".

<a href="#" id="lien2">
  Exemple 2
</a>
<script>
  $("#lien2").click(function() {
    alert('Exemple 2');
  });
</script>

Dans l'attribut href

Dans cet exemple, nous n'utilisons pas d'Event Listener ou de onclick, mais nous plaçons le code JavaScript dans l'attribut href.

<a href="javascript:alert('Exemple 3');">
  Exemple 3
</a>

Conseils

Il existe plusieurs façons de rendre ces éléments cliquables accessibles. Choisissez celle qui vous convient le mieux.

Evitez onMouseOver, onMouseOut, onKeyDown, onKeyUp et onDblClick qui ne fonctionnent pas pour tous les utilisateurs. Par contre OnClick est accessible si vous l'utilisez comme dans les exemples de cet article.