Utiliser le rôle presentation

Le rôle presentation est utilisé pour retirer toute représentation sémantique pour un élément donné ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle presentation appliqué sur l'élément table pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle presentation.

<i class="icon-user" role="presentation"></i>

Exemples concrets

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

<button type="button" aria-haspopup="true">
  Technologies
  <span class="main-menu-arrow" role="presentation">▼</span>
</button>

De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut alt vide sur un élément img, il est possible d'indiquer qu'un élément SVG est purement décoratif grâce au rôle presentation.

<svg role="presentation">…</svg>

Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation