Comment masquer des éléments de manière accessible ?

Ce que j’ai fait :

• lire l’article L’attribut hidden(lien externe) de Mozilla
• lire l’article Cache-cache CSS(lien externe) de Gaël Poupard
• lire l’article Masquer des éléments de manière accessible(lien externe) d’Orange
• lire l’article Cacher du texte(lien externe) d’AnySurfer
• lire l’article Le vaste monde des alternatives textuelles : le texte masqué en CSS (5/6)(lien externe) de Julie Moynat

Ce que j’ai appris

Masquer un contenu pour tout le monde

Il est courant de vouloir faire apparaître ou disparaître des éléments dans une page web. Par exemple :

• des diaporamas où les images défilent une à une

• afficher ou masquer un contenu en fonction de la taille de l’écran dans le cas d’un design responsive

Les propriétés display: none; et visibility: hidden

La méthode classique pour cela est le recours aux propriétés display: none; et visibility: hidden. Ces deux propriétés impliquent plusieurs choses :

• le contenu n’apparaît pas dans la page

• le contenu n’est pas lisible par les lecteurs d’écran

• le contenu ne peut pas recevoir le focus

• le contenu reste visible dans le code source

• le contenu apparaît lorsque le CSS (Cascading Style Sheets) est désactivé ou mal supporté

Pour rappel, les éléments masqués avec la propriété display: none; n’affectent pas la disposition de la page, tandis que ceux masqués avec la propriété visibility: hidden occupent toujours l’espace qui leur est alloué.

L’attribut hidden

L’attribut hidden est un attribut booléen qui permet lui aussi de masquer des éléments. Il est très similaire aux propriétés display: none; et visibility: hidden avec un légère différence : il possède une valeur sémantique car il indique si le contenu n’est pas encore ou n’est plus pertinent à l’affichage. Voici un exemple d’utilisation :

<p hidden>
  Ce texte est caché et n'apparaîtra pas.
</p>

En déclarant dans vos feuilles de style [hidden] { display: none; }, vous serez certains et certaines que les navigateurs ne supportant pas cet attribut masqueront bien vos éléments.

Masquer un contenu pour tout le monde, sauf les technologies d’assistance

Il arrive fréquemment que l’on souhaite masquer un contenu à l’écran mais qu’il demeure accessible aux personnes utilisant des technologies d’assistance. Par exemple :

• une alternative textuelle pour une icône porteuse de sens

• fournir des indications complémentaires aux utilisateurs et utilisatrices de technologies d’assistance

Gaël Poupard, dans son article Cache-cache CSS(lien externe), propose la méthode suivante pour un support optimal :

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

Cette méthode implique que :

• le contenu n’apparaît pas dans la page

• le contenu est lisible par les lecteurs d’écran

• le contenu reste visible dans le code source

• le contenu apparaît lorsque le CSS est désactivé ou mal supporté

• le contenu peut techniquement recevoir le focus mais cela créé des comportements inatendus sur le défilement du navigateur

Attention cette méthode est recommandée pour du texte seul et non pas pour des éléments pouvant recevoir le focus, par exemple des liens d’évitement. Ces derniers doivent en effet être placés au début du code source et devenir visibles à la prise de focus. Pour mettre en place de manière accessible des liens d’évitement, vous pouvez vous reporter à l’article de Gaël Poupard Cache-cache CSS(lien externe) ou à la notice d’AcceDe Web Mettre en place des liens d’évitement(lien externe).

Masquer un contenu uniquement pour les technologies d’assistance

Enfin, il arrive également que l’on souhaite masquer des contenus spécifiquement pour les lecteurs d’écran. Par exemple :

• des SVG purement décoratifs

• des contenus dupliqués

Dans ce cas, il suffit d’ajouter sur l’élément l’attribut aria-hidden="true". Cette méthode implique que :

• le contenu reste visible dans la page

• le contenu sera ignoré par les lecteurs d’écrans

• le contenu reste visible dans le code source mais n’est plus présent dans l’arbre d’accessibilité

• si le contenu comporte un élément focusable, il ne sera pas lisible par les technologies d’assistance mais pourra être atteint au clavier ce qui peut engendrer de la confusion

• la désactivation du CSS n’a pas d’impact sur les éléments dotés de cet attribut

<svg aria-hidden="true" focusable="false">
  [...]
</svg>