Gérer l’accessibilité en UWP

Dans vos applications Windows 10, l’accessibilité consiste à créer une expérience qui rend votre application accessible au plus grand nombre. En effet, il existe de nombreuses incapacités ou déficiences possibles, comme la mobilité, la vision, … qui rendent la lecture de votre application difficile. Néanmoins, avec UWP, vous pouvez facilement gérer la plupart des cas.

Gestion du clavier

Votre application doit correctement gérer l’accès au clavier pour que les utilisateurs aveugles ou avec des problème de mobilité, puissent facilement accéder à l’ensemble des éléments et fonctionnalités de votre application.

Tabulation

Pour utiliser le clavier sur un contrôle, celui-ci doit pouvoir avoir le focus et être accessible avec la gestion par tabulation. Par défaut, l’ordre de gestion de la tabulation des contrôles est l’ordre dans lequel ils sont ajoutés dans votre XAML.

Dans la plupart des cas, cet ordre par défaut est suffisant car il correspond au sens de lecture de votre application.

Par exemple, pour un écran de connexion :

Sur l’appui de la touche de tabulation, l’utilisateur va avoir le focus sur le champ  textBoxUsername puis sur textBoxPassword et pour finir sur le bouton  buttonValid .

Cela va boucler si l’utilisateur continue de taper sur la touche de tabulation.

Néanmoins, il peut arriver que cet ordre par défaut ne vous convienne pas. Il est donc possible de modifier cet ordre et de choisir la navigation de la tabulation. Rien de plus simple, il vous suffit de renseigner en XAML la propriété  TabIndex .

Ici, l’utilisateur va avoir le focus sur le bouton  buttonValid puis  textBoxPassword et pour finir sur  textBoxUsername .

Vous pouvez également exclure si besoin un élément avec la propriété  IsTabStop à  false et il ne sera donc pas appelé avec la tabulation.

Retour d’expérience sur des headers de Gridview ou de Listview

Il peut arriver que dans votre interface vous ayez des éléments focusables dans le header d’une Listview / GridView comme par exemple un bouton refresh. J’ai eu le cas où avec la tabulation, je n’arrivais pas à avoir le focus sur les éléments de mon header, celui-ci était assez complexe avec plusieurs éléments et des changements en fonction de la taille de mon application.

La petite astuce à tester, si cela vous arrive, est de redéfinir la propriété TabNavigation à  Local  sur votre GridView / ListView. Et normalement le tour est joué 😉

Raccourcis

Avec la dernière build de Windows 10, avec la version 16299, vous avez la possibilité de rajouter facilement des raccourcis à votre interface. Cela permet à l’utilisateur d’accéder plus rapidement à une fonctionnalité de votre application.

Pour cela, il faut ajouter la propriété  AccessKey sur vos éléments d’interface avec la touche clavier correspondant au raccourci souhaité.

Pour afficher et utiliser ces raccourcis, rien de plus simple, cliquez sur le touche « Alt » de votre clavier.

Des « popups » avec le raccourci s’afficheront automatiquement sur les contrôles, de plus, cela gérera automatiquement le focus ou le clic de l’élément.

 

Narrateur

Une autre fonctionnalité importante pour l’accessibilité : le narrateur. Le narrateur est le descriptif vocal des éléments qui ont le focus sur votre interface.

Pour activer le narrateur, appuyez sur Windows + Ctrl + Enter. 

De base, le narrateur va lire le type de contrôle sur quoi l’utilisateur a le focus ainsi que le Content de celui-ci.  Néanmoins, certains éléments n’ont pas de texte interne Content, et donc la valeur décrite ne sera pas correcte pour l’utilisateur. Il faut donc ajouter des propriétés pour décrire l’action sur cet élément en définissant la propriété AutomationProperties.Name directement en XAML.

Ici, le narrateur va donc lire ces propriétés pour décrire ce que l’utilisateur doit renseigner dans les champs  TextBox .

Vous pouvez également faire un  Binding sur un élément TextBox  qui décrit cet élément en définissant la propriété AutomationProperties.LabeledBy .

Cela vous permet d’éviter de réécrire plusieurs fois le même texte descriptif pour un élément.

Pour que le narrateur fonctionne correctement, il est important de renseigner les langues supportées dans les propriétés de votre application, ainsi que d’avoir installé le package audio de la langue sur votre Windows 10.

Après la gestion des différents éléments, comme les boutons ou textboxes, on retrouve la gestion des éléments comme les GridView / ListView . Ici le narrateur va lire de base le namespace de votre objet. On en convient, c’est pas vraiment le mieux. La solution est assez simple, il vous faut overrider la méthode ToString() de votre objet et retourner les propriétés voulues pour le narrateur, car celui-ci lit de base le ToString() de votre objet.

Retour d’expérience

Si vous avez pu le remarquer, le narrateur est uniquement disponible sur des éléments qui sont focusables. Néanmoins, dans une interface, nous n’avons pas toujours des boutons ou autres éléments focusables. On peut avoir une page avec uniquement du texte comme par exemple une page « A propos » avec la description de l’entreprise ou autre. On souhaite quand même que l’utilisateur puisse lire ces informations.

Une des solutions possible est de transformer les champs  TextBlock  en  TextBox, où on retire toutes interactions et visuels de la TextBox. Personnellement, je ne suis pas vraiment fan de cette méthode.

Un autre solution, qui selon moi est mieux, consiste à créer un nouveau contrôle et d’overrider la méthode OnCreateAutomationPeer pour gérer le narrateur. Voici le lien de cette solution que je vous conseille de consulter pour régler la gestion du narrateur sur des TextBlock. Si vous avez une autre solution, je suis également preneur 🙂

 

Gestion du contraste élevé

Dans les paramètres Windows 10, l’utilisateur peut activer les thèmes de contraste élevé. Ces thèmes utilisent des couleurs contrastées pour rendre l’interface plus facilement visible pour l’utilisateur. L’utilisateur a la possibilité de définir lui-même les couleurs pour les différents éléments de l’interface comme le texte ou le fond de l’application.

Vous pouvez sélectionner les thèmes de contraste dans les paramètres > Options d’ergonomie > Couleur et contraste élevé.

Si possible, il est important de respecter les couleurs définies par l’utilisateur dans les paramètres. Il faut donc créer un dictionnaire de thème dans les resources de l’application pour pouvoir gérer les différentes couleurs de votre application.

Dans votre App.xaml, rajoutez au moins les dictionnaires de resources « Default » et « HighContrast« .

Ainsi lorsque le thème par défaut est sélectionné, les couleurs standard de votre application s’affichent, tandis que lorsque l’utilisateur sélectionne son thème contrasté, il est important de respecter au mieux sa configuration, comme l’exemple ci-dessous.

Ce qui donne par exemple :

et dans la page :

 

Affichage par défaut de l’application
Affichage en contraste élevé

 

Windows Store

Après avoir pris le temps de rendre votre application accessible au plus grand nombre, n’oubliez pas de le faire savoir sur le Windows Store, en cochant la propriété « This product has been tested to meet accessibility guidelines. » située sur la page Properties, lors de la soumission d’une nouvelle version.

C’est juste déclaratif, mais ça permet de signaler à vos futurs utilisateurs que votre application respecte au mieux les recommandations / guidelines de Microsoft pour la prise en compte de l’accessibilité à chacun.

Avec tous ces conseils, à vous de jouer maintenant pour rendre vos applications accessibles au plus grand nombre !