Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Les fondements de l'UX : L'accessibilité

Accorder l'accessibilité et le design web

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Tenez compte des précautions à prendre en termes de design. Il s'agit de rendre avant tout accessible une production graphique riche visuellement.
06:42

Transcription

Nous avons vu que pour garantir l'accessibilité de nos interfaces et de leurs sites web pour les personnes dotées de handicap, il était important de pouvoir suivre le travail des équipes de développement afin que le code soit rédigé de manière à présenter les différents éléments dans une séquence qui est une séquence logique. En ce qui concerne le design web c'est la même chose, il va falloir que vous suiviez vos équipes de designers qui eux sont essentiellement accès sur le graphisme, donc évoluent dans un univers visuel et leur faire comprendre qu'il y a des personnes qui sans pour autant êtres non-voyants vont avoir des difficultés visuelles et qu'ils vont devoir prendre un certain nombre de dispositions pour garantir l'accès au contenu. Le premier défi va être celui des mises en page multi colonnes même si le code-source va permettre de pouvoir dérouler le contenu pour un lecteur d'écran de manière linéaire, une personne qui va avoir des difficultés visuelles et qui va travailler avec un agrandisseur d'écran, aura des problèmes avec des mises en page de type multi colonnes. Ensuite il va falloir que les appels à l'action soient visibles, c'est-à-dire se trouvent à proximité immédiate de ce qui va les motiver. Si ce n'est pas le cas encore une fois, les personnes qui vont utiliser des agrandisseurs d'écran, vont avoir du mal à trouver ces appels à l'action. Et puis le troisième problème n'est pas le moindre, il s'agit d'un problème de contraste. Nous sommes aidés en ce qui concerne le contraste car le consortium qui gère le web, le World Wide Web Consortium, W3C, a édicté un certain nombre de règles et il exige des applicatifs en ligne qui permettent de vérifier le contraste. Nous allons en voir quelques exemples ensemble maintenant. Nous sommes ici sur un utilitaire qui permet de saisir la couleur de premier plan et puis la couleur d'arrière plan et de vérifier au niveau des résultats quelle va être la différence en termes de brillance, différence de couleur, le taux de contraste et est-ce que ces couleurs vont respecter les règles qui ont été édictées au niveau du consortium qui gère le web. Donc il y a différents types de normes qui vont prendre en compte ou non la taille de la typographie. Et nous allons pouvoir ici par exemple faire des essais. Ici nous avons une couleur de premier plan qui est le noir, une couleur d'arrière plan qui est le blanc et nous avons une différence de couleur qui est de 255 bien entendu et donc nous sommes sur un taux de contraste qui est maximum et ces couleurs bien entendu sont parfaitement lisibles, le taux de contraste correspond. Si nous saisissons d'autres types de couleurs, vous voyez que nous avons chuté en termes de taux de contraste et bien entendu, ces couleurs ne vont pas correspondre à toutes les normes. Alors ça ne veut pas dire que ça ne va pas fonctionner mais vous pouvez répondre à certaines normes et ici la typographie à une taille qui est supérieure à 18 points. Cela peut fonctionner mais globalement on est dans un système de couleurs qui ne fonctionne pas. Alors on peut essayer d'autres couleurs et vous voyez que là, on est carrément dans quelque chose qui ne fonctionne absolument pas. C'est-à-dire qu'il faut éviter à tout prix. Alors cet utilitaire va vous servir mais ce n'est pas le seul, il y en a un autre qui est particulièrement intéressant et qui lui, travaille uniquement sur le taux de contraste, sur le ratio entre le premier plan et l'arrière plan. L'intérêt de cet utilitaire c'est que l'on peut saisir ces valeurs soit directement avec des codes HTML, soit avec des codes de type teinte, saturation, luminosité ou carrément des valeurs textuelles. Par exemple je peux dire : « ici, orange et puis ici, je vais mettre black ». Bien entendu, il faudra le saisir en anglais. Et vous voyez que là, j'ai du texte qui va être noir sur un fond orange avec un taux qui est un taux de 10.6 et normalement je corresponds aux règles de lisibilité. Par contre de l'orange sur du brun, que ce soit dans un sens ou dans l'autre, vous voyez qu'on peut intervertir les différentes valeurs. Et bien ici, on a un taux qui est descendu à 3.6. Alors on va ici respecter les normes mais uniquement si on a des textes qui sont des textes très grands. Le dernier point qu'il va falloir aborder, c'est le point du daltonisme. Pour ce faire, ici dans Photoshop, j'ai fait une capture d'écran d'une interface sur laquelle nous avons déjà travaillé. Et nous allons voir que pour 12% de la population masculine qui souffre de daltonisme, c'est une affection qui ne concerne pas les femmes, vont voir cette interface. Pour ce faire, je vais dans le menu ici Affichage, au niveau du Format d'épreuve, choisir un des deux problèmes qui vont concerner le daltonisme. Soit la pronatopie-dyschromatopsie, soit la deutéranopie. Donc il y a quelques petites variantes. Vous voyez que la lisibilité est loin d' être la même que celle qui était lorsqu'il y avait une vision normale de cette interface. Donc vous devrez vérifier systématiquement vos interfaces de manière à prendre en compte le daltonisme. Nous allons voir ici une autre capture d'écran et vous voyez que nous sommes sur un site qui est un site officiel de la France, sur France.fr. Si nous affichons ici les Couleurs d'épreuve c'est-à-dire que nous sommes sur un Format d'épreuve qui est protanopie et bien en affichant les Couleurs d'épreuve, nous avons quelque chose qui est pratiquement la même chose. Bien entendu les couleurs ont été affaiblies dans la photo mais les daltoniens sont habitués à ce type de vision. En ce qui concerne l'interface en tant que telle, le bleu est resté bleu, nous avons juste ici un problème sur le rouge du logo mais ici le designer web n'y pouvait rien. Donc vous comprenez peut-être mieux maintenant pourquoi Facebook, Linkedin et d'autres sites sont systématiquement avec des interfaces bleues, parce que l'on est sûr que même une population masculine qui va souffrir de daltonisme, pourra la visualiser de la même façon que quelqu'un qui a une vision totalement normale. Dans l'intégration de l'accessibilité, dans votre processus de création web, vous devez veiller à ce que tous les éléments de design soient passés en revue le plus tôt possible, de manière à ce que vous évitiez ce genre de problèmes. Et si vous avez des doutes, pour les lever, effectuez un test réel avec des personnes qui vont souffrir des handicaps visuels que vous désirez intégrer.

Les fondements de l'UX : L'accessibilité

Repensez les éléments de vos sites pour les rendre accessibles à tous. Fluidifiez le parcours utilisateur en intégrant les principaux handicaps visuels, auditifs, etc.

1h20 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :27 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !