Exemple de masquage accessible et d'utilisation de aria-hidden

  • Composant

Mise à jour de l'article du

Introduction

Il est parfois nécessaire de masquer des éléments dans une page web. La méthode classique consiste à utiliser du CSS (display:none; et visibility:hidden;). Ces deux propriétés, comme l'attribut HTML5 hidden, permettent de masquer des éléments non seulement à l'écran, mais aussi aux utilisateurs de lecteurs d'écran. Ces éléments ne seront donc ni visibles ni vocalisés par les aides techniques (AT).

Dans certains cas, il peut être utile de masquer des éléments à l'écran tout en conservant l'information pour les utilisateurs de lecteurs d'écran. Pour cela, on utilisera une classe CSS de « masquage accessible ».

Enfin, il existe un autre cas utile : afficher des éléments à l'écran, mais faire en sorte qu'ils ne soient pas vocalisés. Dans ce cas, on utilisera un attribut HTML5 inert ou bien un attribut ARIA (aria-hidden).

Le masquage accessible

Masquer un élément de manière accessible permet de le faire disparaître à l'écran tout en le conservant pour les utilisateurs d'AT, en particulier les lecteurs d'écran. Techniquement, la solution consiste à appliquer une classe CSS sur l'élément qui ne doit pas être visible.

Il existe plusieurs solutions pour réaliser ce type de classe CSS :

  • Donner une taille nulle à l'élément.
  • Positionner l'élément en dehors de l'écran (left: -1000px; top: -1000px;).
  • Utiliser les propriétés text-indent ou clip.
  • …

L'idéal est de combiner ces solutions pour garantir le bon fonctionnement sur l'ensemble des navigateurs.

Si vous utilisez un framework, il est fort probable que celui-ci embarque déjà une telle classe. Par exemple, si vous utilisez Boosted ou Bootstrap, vous pouvez employer la classe CSS visually-hidden (ou sr-only, abréviation de screen reader only, pour les versions plus anciennes) dont voici le code :


.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
	border: 0 !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within){
	position: absolute !important;
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
	overflow: hidden !important;
}

Si vous ne disposez d'aucune classe de masquage accessible, le plus simple est de copier-coller le code ci-dessus.

Mise en œuvre

La classe de masquage accessible peut s'employer dans de nombreux cas. Par exemple, pour expliciter le libellé d'un lien :


<a href="…">En savoir plus<span class="visually-hidden"> sur nos offres mobiles</span></a>
Exemple :

En savoir plus

On aurait obtenu la même vocalisation si nous avions utilisé un attribut aria-label sur le lien, comme ceci :


<a href="…" aria-label="En savoir plus sur nos offres mobiles">En savoir plus</a>

La solution utilisant la classe de masquage accessible offre néanmoins plusieurs avantages par rapport à la solution aria-label. Si le CSS est désactivé (ou remplacé par des styles personnalisés adaptés à un certain handicap numérique, par exemple), les textes en masquage accessible apparaîtront automatiquement à l'écran. Lors d'une traduction automatique d'une page, le aria-label ne sera pas traduit. De plus, un aria-label n'étant pas très visible dans le code, les développeurs risque d'oublier de les mettre à jour ou modifier.

L'attribut aria-hidden

Cet attribut permet de masquer un élément (ou un groupe d'éléments) pour les lecteurs d'écran. Il n'a en revanche aucun effet sur l'affichage à l'écran.

Mise en œuvre

Pour masquer un élément (et ses enfants) aux lecteurs d'écran, il suffit d'ajouter un attribut aria-hidden="true". Le contenu peut toujours être rendu accessible aux AT grâce à aria-describedby ou aria-labelledby.

Attention

Un élément interactif placé dans un élément possédant ou héritant un attribut aria-hidden="true" sera atteignable au clavier mais sera interprété comme vide pour les AT. Donc, à ne pas faire.

Exemple :
La capture d'écran suivante montre un lecteur vidéo contenant un certain nombre de boutons (chaîne précédente, chaîne suivante, pause…). Ce lecteur est entouré par deux boutons permettant également d'accéder aux chaînes précédentes et suivantes.

Visuellement, cela ne pose pas de problème. En revanche, lorsqu'on écoute la page avec un lecteur d'écran, on peut trouver curieux d'entendre un bouton vocalisé « Animaux » au début de la page, puis à la fin de la page un bouton vocalisé « Chasse et pêche ».

capture d'écran présentant un lecteur vidéo

Pour éviter de perturber l'utilisateur inutilement, le plus simple est de masquer ces deux boutons aux lecteurs d'écran à l'aide d'un attribut aria-hidden.


<div class="icon icon-arrow-left2" aria-hidden="true">
      <div class="nextPreviousChannelName OrangeMedium">Animaux</div>
</div>

Webographie