Communiquer l’état actuel

Nous concevons souvent des éléments visuels pour montrer si un élément est sélectionné ou non, ou s’il est désactivé, en lecture seule ou actif, ou pour montrer si un élément de navigation est l’élément sélectionné. Les renseignements multisensoriels font en sorte que les personnes ayant divers handicaps sont en mesure de percevoir l’état.


Identifier l’état

Identifier l’état

Identifiez les éléments qui changent d’état sur votre site web ou dans votre application :

  • Les champs de formulaire, comme les cases à cocher, les boutons radio, les boutons, les champs d’entrée, ont tous des commentaires intégrés pour afficher des états (p. ex. champ actuel, champ sélectionné, champ par défaut, pointeur placé sur le champ, focus sur le champ et champ appuyé) et s’ils sont désactivés ou en lecture seule.
  • Utilisez des composants HTML ou des composants d’applications natives lorsque c’est possible. Sinon, utilisez la façon dont l’état actuel des éléments est présenté aux clients pour toutes les expériences des utilisateurs en matière d’accessibilité afin d’éclairer les expériences personnalisées.

Les indicateurs visuels doivent fonctionner avec des thèmes à contraste élevé.

Si vous utilisez un élément svg ou une image, le rédacteur de contenu et le développeur peuvent ajouter l’option de texte de remplacement appropriée pour que l’indicateur de champ actuel soit aussi disponible pour les lecteurs d’écran.

Identifiez les éléments qui changent d’état sur votre site web ou dans votre application :

  • Les champs de formulaire, comme les cases à cocher, les boutons radio, les boutons, les champs d’entrée, ont tous des commentaires intégrés pour afficher des états (p. ex. champ actuel, champ sélectionné, champ par défaut, pointeur placé sur le champ, focus sur le champ et champ appuyé) et s’ils sont désactivés ou en lecture seule.
  • Utilisez des composants HTML ou des composants d’applications natives lorsque c’est possible. Sinon, utilisez la façon dont l’état actuel des éléments est présenté aux clients pour toutes les expériences des utilisateurs en matière d’accessibilité afin d’éclairer les expériences personnalisées.

Les indicateurs visuels doivent fonctionner avec des thèmes à contraste élevé.

Si vous utilisez un élément svg ou une image, le rédacteur de contenu et le développeur peuvent ajouter l’option de texte de remplacement appropriée pour que l’indicateur de champ actuel soit aussi disponible pour les lecteurs d’écran.


Apparier l’état de programmation et l’état visuel

Apparier l’état de programmation et l’état visuel

L’état et la fonction de l’élément en question ont un état visuel qui correspond à l’état de programmation.

Exemple : Un état en lecture seule n’est pas identique à un état désactivé.

Pour la conception visuelle, consultez le guide sur le signalement par couleur, le guide sur l’introduction au contraste des couleurs, le guide sur la conception pour les daltoniens et le guide sur le langage clair pour l’accessibilité.

Le changement d’état doit toujours répondre aux exigences en matière de contraste des couleurs ou de signalement par couleur, sinon les clients daltoniens ou ceux qui voient différemment peuvent rater du contenu important.

L’état et la fonction de l’élément en question ont un état visuel qui correspond à l’état de programmation.

Exemple : Un état en lecture seule n’est pas identique à un état désactivé.

Pour la conception visuelle, consultez le guide sur le signalement par couleur, le guide sur l’introduction au contraste des couleurs, le guide sur la conception pour les daltoniens et le guide sur le langage clair pour l’accessibilité.

Le changement d’état doit toujours répondre aux exigences en matière de contraste des couleurs ou de signalement par couleur, sinon les clients daltoniens ou ceux qui voient différemment peuvent rater du contenu important.


Explore more

Explore more