Développement d’applications

Effectué

L’importance de l’accessibilité s’étend à toutes les formes de technologie, y compris les logiciels et applications numériques. Il existe deux facteurs clés à prendre en compte lors de la conception d’une application : l’interface utilisateur (IU) et l’accès programmatique. L’interface utilisateur est le moyen par lequel un utilisateur et un système informatique interagissent, par exemple les liens et les graphiques utilisés pour la navigation. L’accès programmatique concerne la façon dont une application peut accéder par programmation aux informations d’une autre application, par exemple en appelant du code. Par exemple, si quelqu’un utilise un lecteur d’écran pour accéder à une application, le lecteur d’écran appelle du code pour communiquer ce qui se passe dans l’interface utilisateur de cette application.

Il existe de nombreuses étapes pour rendre une application accessible, mais certains des points critiques à retenir sont les suivants :

  • Exposer vos éléments d’interface utilisateur pour un accès par programme.
  • Assurez-vous que votre application prend en charge la navigation au clavier pour les personnes qui ne parviennent pas à utiliser de souris ou d’écran tactile.
  • Assurez-vous que votre application prend en charge les paramètres de couleur et de contraste accessibles.

Navigation au clavier

Pour les utilisateurs aveugles ou présentant des problèmes de mobilité, il est essentiel de pouvoir naviguer dans une application à l’aide d’un clavier. Toutefois, seuls les contrôles qui requièrent une interaction de l’utilisateur pour fonctionner doivent recevoir le focus clavier, comme des liens, des boutons et des contrôles de formulaire. Des composants qui ne nécessitent aucune action, telles que les images statiques, n’exigent pas de focus clavier. Par exemple, le logo Microsoft est une image statique qui ne nécessite pas d’action.

Contrairement à la navigation avec une souris ou un écran tactile, la navigation au clavier est linéaire. Lorsque vous envisagez de naviguer avec le clavier, réfléchissez à la façon dont l’utilisateur interagit avec votre produit et à ce qu’est la navigation logique. Dans les cultures occidentales, les personnes lisent de gauche à droite, de haut en bas. Par conséquent, une pratique courante consiste à suivre ce modèle pour la navigation au clavier.

Lors de la conception de la navigation au clavier, examinez votre interface utilisateur et prenez en considération les questions suivantes :

  • Comment les contrôles sont-ils disposés ou regroupés dans l’interface utilisateur ?
  • Existe-t-il plusieurs groupes de contrôles importants ?
  • Si oui, ces groupes contiennent-ils un autre niveau de groupes ? Par exemple, des sous-listes sont-elles imbriquées dans les éléments de menu ?
  • Parmi les contrôles homologues, les utilisateurs sont-ils en mesure de naviguer à l’aide de la tabulation, ou votre interface utilisateur requiert-elle une navigation spéciale, comme les touches de direction ?

Horizontal app navigation icons.

Groupe d’éléments/contrôles de menu d’application

L’objectif est d’aider l’utilisateur à comprendre la façon dont l’interface utilisateur est disposée et à identifier les contrôles actionnables. Si trop de tabulation est nécessaire avant que l’utilisateur termine la boucle de navigation, envisagez de regrouper les contrôles associés. Certains contrôles associés, tels que les contrôles hybrides, devront probablement être traités lors de la phase d’exploration du développement de votre application. Une fois que vous avez commencé à développer votre produit, il est difficile de retravailler la navigation au clavier, donc planifiez-le soigneusement et planifiez-le tôt !

Pour en savoir plus sur la façon de naviguer dans l’interface utilisateur avec le clavier, explorez la documentation du centre de développement Windows sur l’Accessibilité du clavier.

L’e-book Engineering Software for Accessibility a un chapitre utile sur ce sujet intitulé « Designing the Logical Hierarchy ».

Couleur et contraste

L’une des fonctionnalités d’accessibilité intégrées de Windows est le mode contraste élevé, qui améliore le contraste des couleurs du texte et des images sur l’écran de l’ordinateur. Pour certaines personnes, l’augmentation du contraste des couleurs permet de réduire la fatigue visuelle et de faciliter la lecture.

Two calculator applications with high contrast color schemes.

Calculatrices affichées dans le thème clair et le thème noir à contraste élevé

L’interface utilisateur de votre application doit être conçue pour fonctionner tout aussi bien lorsqu’elle est affichée avec ou sans le mode de contraste élevé. Par exemple, lorsque vous vérifiez votre interface utilisateur avec un contraste élevé, vérifiez que les contrôles sont codés de manière cohérente et veillez à utiliser des couleurs système et non des couleurs codées en dur. Assurez-vous qu’un utilisateur à contraste élevé peut voir tous les contrôles à l’écran visibles par un utilisateur qui n’utilise pas de contraste élevé.

Du moment que vous ne remplacez pas les couleurs système, une application de plateforme Windows universelle (UWP) qui fonctionne sur toutes les plateformes et appareils Windows prend en charge les thèmes à contraste élevé par défaut. Si un utilisateur sélectionne un thème à contraste élevé à partir des paramètres système ou des outils d’accessibilité de son appareil, le framework UWP utilise automatiquement des couleurs et des paramètres de style qui produisent une mise en page et un rendu à contraste élevé pour les contrôles et les composants de l’interface utilisateur.

Pour plus d’informations, consultez cet article du support Windows sur le Contraste élevé.

Si vous préférez utiliser votre propre thème de couleurs à des fins de conception plutôt que des couleurs système, tenez compte des instructions suivantes :

Ratio de contraste des couleurs : la section 508 mise à jour du Rehabilitation Act (Loi de réhabilitation), ainsi que toute autre législation, exige que le contraste des couleurs par défaut entre le texte et son arrière-plan soit d’au moins 4,5:1. Le ratio fait spécifiquement référence au contraste de luminance du texte et de l’arrière-plan. L’une des façons de considérer le contraste de luminance est la différence entre la clarté et l’obscurité du texte et des couleurs d’arrière-plan. Par exemple, le texte blanc sur un arrière-plan noir a un ratio de 21:1. D’autres schémas de couleur pour le texte et les arrière-plans peuvent être utilisés, mais le ratio doit être d’au moins 4,5:1 ou plus.

Les ratios pour le texte de grande taille n’ont pas besoin d’être aussi élevés. Pour du texte de grande taille, le contraste par défaut requis est de 3:1. Le texte de grande taille est défini en tant que taille de police de 18 points et plus, ou 14 points et gras (et plus grand).

Combinaisons de couleurs : environ 7 % des hommes (et moins de 1 % des femmes) présentent une certaine forme de déficience de perception de la couleur. Les utilisateurs daltoniens ont des difficultés à faire la distinction entre certaines couleurs, donc la couleur ne doit jamais être utilisée pour communiquer l’état ou la signification dans une application. En d’autres termes, ne faites pas référence au « point rouge » sur un écran. Au lieu de cela, vous pouvez inclure une icône avec un marquage distinctif ou une forme distinctive qui peut facilement être identifiée par une personne daltonienne. Comme pour les images décoratives (par exemple, les icônes ou les arrière-plans), les combinaisons de couleurs doivent être choisies de manière à optimiser la perception de l’image par les utilisateurs daltoniens.

Examples of home icons with high color contrast and low color contrast.

Exemples d’une icône avec un contraste de couleurs élevé (ratio 21:1) et une icône avec un contraste de couleur faible (ratio de 1:5)

Accès par programme

L’accès programmatique est nécessaire pour créer l’accessibilité dans les applications. L’accès programmatique garantit que les contrôles d’interface utilisateur sont exposés à la technologie d’assistance ou à d’autres périphériques de sortie.

Sans accès programmatique, les API pour la technologie d’assistance ne peuvent pas interpréter correctement les informations, ce qui laisse l’utilisateur incapable d’utiliser ou d’interagir efficacement avec l’application. La technologie d’assistance qu’une personne utilise détermine les actions et les options qui lui sont disponibles. Par conséquent, si une application n’a pas de nom et de description accessibles, plusieurs parties risquent d’être jugées non disponibles par la technologie d’assistance.

Par exemple, les noms et les descriptions accessibles pour le contenu et les contrôles d’interface utilisateur interactifs sont des éléments essentiels pour obtenir un accès programmatique dans votre application. Pour les personnes qui utilisent le narrateur Microsoft ou un affichage braille pour utiliser une application, les noms descriptifs pour les images ou les boutons les aident à comprendre et à parcourir l’application.

Pour plus d’informations sur la mise à disposition des éléments d’interface utilisateur d’application pour les technologies d’assistance, consultez la documentation du centre de développement Windows sur la façon d’exposer les informations d’accessibilité de base.

Pour plus d’informations sur les applications de technologie d’assistance, explorez la liste des partenaires de technologie d’assistance de Microsoft.

Listes de vérification de l’accessibilité

Comme nous l’avons vu dans ce module, vous devez effectuer plusieurs étapes pour rendre votre application accessible. Vous trouverez probablement utile de suivre une check-list pour savoir ce qu’il faut faire au fur et à mesure que vous développez votre application. Voici une version abrégée d’une check-list d’accessibilité que vous trouverez probablement utile :

  1. Définissez le nom accessible (obligatoire) et la description (facultatif) pour le contenu et les éléments interactifs dans votre application.
  2. Mettez en œuvre l’accessibilité du clavier :
  3. Vérifiez visuellement votre interface utilisateur pour vous assurer que le contraste du texte est suffisant, que le rendu des éléments est correct dans les thèmes à contraste élevé et que les couleurs sont utilisées correctement.
  4. Exécutez les outils d’accessibilité, traitez les problèmes signalés et vérifiez l’expérience de lecture d’écran.
  5. Assurez-vous que toutes les fonctionnalités de votre application suivent les instructions d’accessibilité.
  6. Déclarez votre application comme accessible dans Microsoft Store.