Masquage accessible
<gcds-sr-only>

Autres noms : masquage visuel, lecteur d'écran uniquement.

Le masquage accessible est une façon de rendre l'information textuelle uniquement accessible à des technologies d’assistance.

• GitHub
• Figma

Création d'un masquage accessible

Utilisez le masquage accessible sur du texte destiné aux technologies d'assistance pour communiquer des informations généralement exprimées par des moyens visuels uniquement.

Codage et accessibilité du masquage accessible

Écrivez du texte en masquage accessible qui est utile

• Signalez les informations contextuelles qui sont exclusivement communiquées par des styles visuels absents du HTML sémantique.
• Écrivez du texte clair et très concis pour les technologies d'assistance. En écrire trop alourdit inutilement la charge cognitive.
• Fournissez du texte supplémentaire à l'intention des technologies d'assistance seulement si l'interface dépend des visuels pour transmettre des informations.
• Évitez d'ajouter des informations qui sont absentes de l'interface.
• Évitez de répéter les informations déjà communiquées par les textes de remplacement. Si le texte de remplacement évoque le contexte, le composant masquage accessible est possiblement superflu.

Offrez une expérience équitable dans les deux langues officielles

• Utilisez le composant masquage accessible pour vous assurer que le texte sera lu dans la langue associée à la balise de langue du composant.
• Évitez d'utiliser un attribut aria-label pour définir une langue additionnelle, car certaines technologies d'assistance utiliseront la langue source de la page par défaut.

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.