Nouveau Components

sr-only (Uniquement pour lecteur d’écran)

La classe utilitaire sr-only est utilisée pour masquer du contenu visuellement tout en le maintenant accessible aux lecteurs d’écran. Cette technique est essentielle pour fournir un contexte supplémentaire aux technologies d’assistance sans perturber la mise en page visuelle de l’interface utilisateur. Elle favorise un design inclusif en garantissant que tous les utilisateurs, quel que soit leur mode d’interaction avec un produit numérique, aient accès aux informations essentielles.

Quand l’utiliser

  • Pour fournir des noms ou des descriptions accessibles pour des éléments interactifs (ex. : boutons comportant uniquement une icône).
  • Pour inclure du texte explicatif destiné aux utilisateurs de lecteurs d’écran (ex. : description d’un graphique ou d’une icône).
  • Pour étiqueter des zones, des repères ou des champs de formulaire de manière non visuelle.
  • Pour annoncer des changements ou des mises à jour d’état aux technologies d’assistance (en combinaison avec les régions ARIA live).

Quand ne pas l’utiliser

  • Lorsque le contenu masqué est également important pour les utilisateurs voyants.
  • Pour masquer des éléments focalisables (cela peut créer des expériences inaccessibles).
  • Pour masquer de grands blocs de contenu ou des sections entières d’une page.
  • Comme substitut à l’utilisation correcte de HTML sémantique ou d’ARIA.

Sur cette page

Mots-clés

  • sr-only – Une classe utilitaire pour masquer du contenu visuellement tout en le rendant accessible aux technologies d’assistance.
  • clip, position, white-space, overflow – Propriétés CSS utilisées dans sr-only pour masquer visuellement le contenu.

Décomposition des composants

Une classe CSS sr-only typique inclut les propriétés suivantes :

CSS
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
  • position: absolute ; et clip/overflow retirent l’élément du flux visible tout en le maintenant dans l’arbre d’accessibilité.
  • width, height, margin, and border réduisent l’empreinte visuelle à zéro.
  • white-space: nowrap ; garantit que le contenu ne se divise pas et n’entraîne pas de problèmes visuels inattendus.

Comparaison avec d’autres techniques pour masquer du contenu

sr-only

  • Visible pour les utilisateurs : Non
  • Visible pour les lecteurs d’écran : Oui
  • Focalisable : Non

display:none

  • Visible pour les utilisateurs : Non
  • Visible pour les lecteurs d’écran : Non
  • Focalisable : Non

visibility:hidden

  • Visible pour les utilisateurs : Non
  • Visible pour les lecteurs d’écran : Non
  • Focalisable : Non

L'attribut hidden en HTML

  • Visible pour les utilisateurs : Non
  • Visible pour les lecteurs d’écran : Non
  • Focalisable : Non

aria-hidden="true"

  • Visible pour les utilisateurs : Dépend du CSS (l'élément peut rester visuellement présent)
  • Visible pour les lecteurs d’écran : Non
  • Focalisable : Oui/Non (selon l'implémentation — à utiliser avec précaution si des éléments interactifs sont masqués)

Lecteur d'écran

  • Le contenu à l'intérieur d'un élément stylisé avec sr-only est annoncé par les lecteurs d'écran comme s'il était visible.
  • Cela est souvent utilisé pour étiqueter des icônes, des boutons ou pour fournir des instructions réservées aux lecteurs d'écran.
  • L'élément doit toujours faire partie du DOM.
  • Soyez prudent lorsque vous utilisez sr-only sur des éléments focalisables. Si les utilisateurs au clavier ne peuvent pas voir l'élément, cela peut créer de la confusion ou des problèmes d'accessibilité.

Sur cette page

Non applicable. La classe sr-only n'est pas destinée aux éléments interactifs et ne doit pas être appliquée directement aux composants focalisables. Cependant, si elle est utilisée sur du contenu référencé par des éléments focalisables (par exemple, via aria-describedby), assurez-vous que l'élément référencé n'est pas lui-même focalisable et ne perturbe pas le flux de tabulation au clavier.