Créer des expériences accessibles

Régions de repérage

Les rôles repères ARIA aident les utilisateurs de lecteurs d'écran à comprendre comment le contenu d'une page Web est organisé et structuré. Les informations qui ont une structure visuelle peuvent être étiquetées par programmation afin qu'elles puissent être comprises par les utilisateurs de lecteurs d'écran. Les points de repère peuvent également servir de cibles pour les « liens Ignorer » et fournir des raccourcis clavier aux utilisateurs de lecteurs d'écran afin qu'ils puissent passer d'une section de page à l'autre.

Implémentation de points de repère

La première étape consiste à diviser une page en zones de contenu perceptibles. Ensuite, attribuez des points de repère à chacune de ces sections clés. Par exemple, banner, main, complementary et contentinfo sont des points de repère de niveau supérieur. L'Initiative pour l'accessibilité du Web (Web Accessibility Initiative, WAI) fournit une explication détaillée de toutes les régions de repérage disponibles.

Les points de repère ne peuvent pas être définis au niveau d'un composant Jutro. Vous devrez donc décider quels sont les points de repère les plus appropriés à utiliser dans votre application.

Titres

Les titres communiquent la structure du contenu d'une page. Les utilisateurs de technologies d'assistance, comme les utilisateurs de lecteurs d'écran, peuvent également utiliser des raccourcis pour naviguer dans une page lorsque les titres sont utilisés correctement.

Les titres sont imbriqués par niveau et vont du titre le plus important, <h1>, au moins important, <h6>. Dans la mesure du possible, évitez d'ignorer les niveaux de titre car cela pourrait prêter à confusion. Par exemple, évitez de faire suivre immédiatement un <h2> d'un <h5>.

Dans Jutro, certains composants et modèles reçoivent un niveau de titre par défaut spécifique. Vous devez vous assurer que, lorsque de nouveaux composants Jutro sont ajoutés à une application, la hiérarchie des titres reste logique. Si le texte fonctionne visuellement comme un titre de section, marquez-le comme un titre pour assurer une bonne interprétation par des technologies d'assistance.

L'exemple suivant, issu de la Web Accessibility Initiative, illustre une structure de titres hiérarchiques qui privilégie une organisation claire des documents pour les utilisateurs :

Visibilité du focus

Fournissez un indicateur de focus clairement visible pour la navigation vers un élément focalisable à l'aide d'un clavier. Les éléments focalisables comprennent les liens, les boutons et les contrôles de formulaire. Tous les composants Jutro disposent d'un indicateur de focus avec un rapport de contraste de 3:1 minimum. Toutefois, vous devrez peut-être personnaliser la couleur de l'indicateur de focus en fonction du thème de couleur de votre application. Par exemple, si l'indicateur de focus par défaut est bleu mais que vous utilisez un arrière-plan bleu similaire, il se peut qu'il ne ressorte pas. La visibilité du focus peut être rapidement modifiée et appliquée de manière cohérente aux composants applicables à l'aide de jetons de conception.

L'exemple suivant illustre un champ de saisie de texte mis en évidence (focus) :

Validation

Instructions relatives aux formulaires

Jutro utilise un astérisque pour signaler les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.

En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.

Des instructions importantes ne doivent pas être ajoutées en tant que texte générique, car cela pourrait entraîner un certain nombre de problèmes pour certains utilisateurs. Le texte générique disparaît souvent au fur et à mesure de la saisie de l'utilisateur, ce qui augmente la charge cognitive, et le texte générique est souvent peu contrasté. Placez donc plutôt les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ. Par exemple, si un utilisateur a besoin de connaître le format de date, il est préférable de l'inclure comme texte d'aide permanent.

Il convient donc d'inclure le format de date comme texte d'aide.

N'utilisez pas que l'espace réservé au texte pour indiquer le format de la date.

Si une entrée nécessite des caractères spéciaux, cela doit être clair dans les instructions. Par exemple, si un mot de passe doit comporter au moins 8 caractères et une majuscule lors d'un processus d'inscription, cela doit être affiché avant qu'un utilisateur n'essaie de créer un mot de passe sans ces critères.

Messages d'erreur

Veillez à ce que les messages d'erreur soient aussi explicites que possible afin que les utilisateurs puissent rapidement corriger les erreurs. Si un utilisateur a rempli un long formulaire et que plusieurs messages d'erreur se contentent d'indiquer « ce champ contient une erreur », cela ne l'aide pas vraiment. Privilégiez plutôt des messages d'erreur utiles tels que :

• « Il manque le symbole '@' à l'adresse e-mail. »
• « Vous n'avez rien saisi. »

Utilisez le texte d'erreur pour guider l'utilisateur et lui proposer une solution.

Ne rédigez pas de messages d'erreur ambigus ou ne laissez pas les utilisateurs deviner comment résoudre un problème.

Texte alternatif

Le texte alternatif est essentiel pour s'assurer que les images peuvent être interprétées par des personnes souffrant de divers handicaps. Par exemple, les logiciels de lecture d'écran annoncent un texte alternatif, aidant les personnes ayant une déficience visuelle à comprendre ce qu'une image véhicule.

Il faut déterminer si une image est purement décorative (à ignorer) ou si elle nécessite un texte alternatif. La Web Accessibility Initiative (WAI) fournit un arbre de décision utile pour le texte alternatif.

Certains composants Jutro contiennent des icônes et nous avons ajouté un texte alternatif par défaut approprié pour ceux-ci à l'aide d'un aria-label. Par exemple :

<svg class="jut__Icon__icon jut__Icon__iconSizeLarge" viewBox="0 0 24 24" role="img" data-testid="icon-gw-check-circle" aria-label="Success icon">
…
</svg>

Si vous souhaitez ajouter un texte alternatif à un composant d'icône autonome, vous pouvez le faire en transmettant une propriété aria-label au composant.