Concevoir pour l’accessibilité  

Les concepteurs fournissent un cadre visuel qui permet aux clients et aux membres de l’équipe, peu importe leurs capacités, de profiter d’expériences numériques exceptionnelles. Il est essentiel pour les concepteurs de connaître nos normes d’accessibilité afin d’être en mesure de travailler sur tous les appareils et les formats d’écran.

L'accessibilité est une exigence légale imposée par la Loi sur l'accessibilité pour les personnes handicapées de l'Ontario (LAPHO) et par le Conseil de la radiodiffusion et des télécommunications canadiennes (CRTC).

Les spécialistes de l’expérience d’utilisation et les concepteurs visuels ont des rôles différents en matière d’accessibilité

Expérience d’utilisation

Les professionnels de l’expérience d’utilisation doivent comprendre les modèles d’interaction des personnes qui ont un handicap dans les interfaces utilisateur. La conception doit pouvoir prendre en charge ces cas d’utilisation et communiquer le modèle d’interaction (par exemple, si la fonctionnalité en question est un lien ou un bouton).

La définition du modèle d’interaction nous aide à rédiger la documentation et à identifier les modèles d’accessibilité existants qui ont été intégrés au produit. La documentation décrit la conception visuelle, le codage et les essais.

La compréhension approfondie de l’accessibilité consiste à examiner les exigences commerciales d’un projet et à déceler des occasions d’améliorer une expérience pour les personnes ayant divers besoins et qui pourraient avoir un besoin précis pour ce service.

Visual Design

Conception visuelle

Les concepteurs visuels doivent s’assurer que les couleurs, les polices, les formes et la représentation visuelle générale sont inclusives. La conception accessible vise la représentation claire du contenu et de la sémantique prévue de cette structure, en fonction de la conception visuelle. La conception visuelle et les interactions annotées permettent aux développeurs de coder en fonction de ces éléments (p. ex. listes non numérotées ou tableaux, en-têtes ou texte en gras, boutons ou liens).

Une compréhension plus approfondie de la conception visuelle et de l’accessibilité tient en compte la façon dont le cerveau traite les couleurs, les formes et les mises en page. Différentes méthodes d’organisation du contenu peuvent créer de meilleures expériences pour les personnes ayant des besoins particuliers. La conception gouverne l’expérience prévue et définit les exigences pour les développeurs et les vérificateurs. Ainsi, l’accessibilité est assurée tout au long du projet.


Conception d’éléments accessibles

Cette section décrit les normes d’accessibilité de TELUS pour les concepteurs. En suivant ces meilleures pratiques, les concepteurs pourront créer une expérience utilisateur claire, simple et accessible pour les clients et les membres de l’équipe.


Couleur et contraste

La communication au moyen des couleurs uniquement peut rendre l’utilisation d’une application difficile pour certains visiteurs. Les éléments en couleur doivent toujours être accompagnés de texte ou d’un symbole qui indique la fonction de l’élément de l’interface utilisateur. Par exemple, un chevron (>) peut indiquer un lien. 

Les concepteurs doivent s’assurer que le contraste est suffisant entre l’arrière-plan de la page et le texte, ainsi qu’avec les éléments de l’interface utilisateur comme les liens, les boutons et les en-têtes. Un contraste élevé aide les visiteurs malvoyants, mais aide aussi la consultation en cas de reflets sur l’écran.

Un ratio de contraste minimal de 4,5:1 respecte les règles WCAG 2, niveau AA. Les meilleures pratiques décrites dans les normes de la marque TELUS visent un contraste de 7:1 pour les sites web réactifs mobiles. 

Le texte qui fait partie d’un logo ou d’un nom de marque n’a pas à se conformer aux exigences en matière de contraste.

Outils d’essai du contraste de couleurs

Conseils

  • Utilisez votre application de conception pour convertir les éléments en niveaux de gris afin de confirmer que vous pouvez toujours distinguer les différences de couleurs. 

  • Effectuez des essais automatisés sur des captures d’écran de votre site web pour cerner d’éventuels problèmes de contraste. 

  • Confirmez les résultats des essais au moyen d’autres outils dans l’environnement de développement.

Correct. Texte blanc sur fond vert foncé.
Incorrect. Texte blanc sur fond vert clair.

Conception pour les daltoniens

Certaines personnes ont de la difficulté à distinguer les couleurs. La forme la plus courante est le daltonisme rouge-vert.

Conseils de conception pour les daltoniens :

  • Convertissez les sites en niveaux de gris et vérifiez si des tons de gris très semblables sont présents

  • Utilisez des textures pour distinguer les couleurs

  • Servez-vous d’outils en ligne pour analyser les couleurs sur votre page

Signalement par couleur

Lorsque vous indiquez un état ou un changement de l’expérience utilisateur, ne vous servez pas uniquement de signalement par couleur. Par exemple, la bordure verte indiquant qu’un champ est valide et la bordure rouge signalant une erreur apparaîtront de la même couleur pour un daltonien. 

Vous devez toujours ajouter du texte pour indiquer les erreurs. Les concepteurs peuvent aussi se servir de symboles universels, comme un crochet, une icône d’arrêt ou un point d’exclamation. 

Une échelle de daltonisme montrant à quoi ressemblent le vert et le violet pour des personnes atteintes de différents types de daltonisme.

Le site est uniquement en anglais.


Images accessibles

L’accessibilité numérique dépend étroitement de la conception de la page. Les concepteurs doivent s’assurer que l’expérience de la page demeure accessible pour une vaste gamme d’utilisateurs, y compris ceux qui ont un handicap visuel ou cognitif. Les images, les logos, les graphiques et les animations qui donnent des renseignements doivent comporter un texte descriptif. 

Les créateurs de contenu et les concepteurs doivent collaborer pour établir la signification et la raison d’être des éléments visuels sur la page. Ils doivent décider si une image est décorative ou descriptive.

Les images décoratives font partie de la disposition de la page, alors que les images descriptives font partie du message. 

Correct. Le texte est à côté de l’image d’un téléphone et il n’y a aucun chevauchement.
Incorrect. Le texte est superposé à l’image d’un téléphone.

Vous voulez en savoir plus sur la rédaction de balises descriptives du point de vue du contenu?


Éléments distincts

La conception détermine le résultat de toutes les interactions sur une page. Les concepteurs doivent créer une expérience qui comporte des éléments d’interface utilisateur reconnaissables et un modèle de conception familier. Pour que tous les utilisateurs profitent d’une expérience accessible, les éléments de conception comme les en-têtes, les tableaux et les boutons doivent être clairs. Les fonctionnalités associées aux liens et aux boutons doivent être claires aussi pour les visiteurs de la page, afin qu’ils puissent utiliser la fonction à laquelle la page est destinée.

Correct. Deux boutons uniformes. Le premier est vert foncé avec du texte blanc et il porte la mention de l’appel à l’action principal. Le deuxième est violet foncé avec du texte blanc et il porte la mention du bouton secondaire.
Incorrect. Le bouton est vert clair avec du texte blanc. En dessous, le bouton est violet clair avec du texte blanc et il est plus grand et n’a pas la même forme.

États de focus utilisables

La bordure visible des liens, des champs de saisie et des boutons est connue comme un indicateur de focus. Elle aide les utilisateurs à voir quel élément a actuellement le focus du clavier. Elle leur permet aussi de comprendre où ils se situent lorsqu’ils parcourent un site. Les indicateurs de focus sont très utilisés lorsque le clavier est le principal moyen de navigation dans un site web, ou avec un lecteur d’écran.

Les éléments qui doivent pouvoir avoir le focus comprennent les liens, les champs de formulaires, les widgets fonctionnels, les boutons et les éléments de menu. Ils doivent avoir une apparence différente des éléments qui les entourent pour que la fonctionnalité soit observable. Les concepteurs doivent s’assurer que ces éléments sont bien visibles et que le contraste est suffisant pour qu’ils soient faciles à distinguer du reste du contenu.

Annoncer les changements d’état et les erreurs

Les indications visuelles de changements dans l’IU doivent avoir un équivalent en texte. Les renseignements multisensoriels font en sorte que les personnes ayant divers handicaps sont en mesure de percevoir le changement.

Correct. L’ordre d’enchaînement est de gauche à droite.
Incorrect. L’ordre d’enchaînement est confus.

Le site est uniquement en anglais.