Gestion de produits : des outils pour améliorer l'accessibilité des produits

1. Introduction: Quand il s'agit de développer pour le web, ce que j'aime absolument, c'est que c'est pour tout le monde. Vous n'avez pas besoin d'avoir un certain téléphone portable, vous n'avez pas besoin d'un certain ordinateur ou d'une connectivité grasse, fondamentalement, n'importe qui est invité à faire des choses sur le web. Je suis tombée amoureuse du web quand je travaillais à la radio, et j'ai réalisé que n'importe qui pouvait devenir éditeur sans avoir à dépenser de l'argent dessus. Je voulais m'assurer dès le premier jour que le web est là pour tout le monde, indépendamment de la capacité, peu importe où vous êtes sur la planète, peu importe votre configuration et quel ordinateur vous avez, je veux m'assurer que je peux utiliser mon en tant qu' ingénieur pour s'assurer que les produits sont disponibles pour tout le monde. Parce que lorsque nous faisons cela, nous avons beaucoup plus d'utilisateurs et c'est une idée très simple. Bonjour, je suis Christian Heilmann. Je suis directeur principal de programme chez Microsoft et mon travail consiste à m'assurer que nos produits sont accessibles à tout le monde, et c'est ce dont nous allons parler aujourd'hui. L' accessibilité n'est pas cette chose effrayante, problématique qui est une exigence légale, mais beaucoup de fois juste le bon sens et s'assurer que le produit peut résister aux changements que les gens ont besoin d'y faire. Vous découvrirez que les gens ont des besoins différents et que vos besoins changent vous-même avec le temps. Si j'enlève mes lunettes, j'utilise le produit différemment que lorsque j'ai mes lunettes . Le handicap n'est pas un état ponctuel. Il s'agit d'une échelle mobile qui change au fil du temps et notre produit doit être suffisamment flexible pour le supporter. Dans ce cours, nous allons parler de l'accessibilité au-delà conformité et cela signifie que nous construisons choses qui sont accessibles en pensant comme les utilisateurs et pas seulement en pensant à ce que nous devons faire pour être accessibles. Nous allons jeter un coup d'œil à certains des systèmes automatisés qui fonctionnent sur vos produits et vous dire où se trouvent les pièces problématiques et nous allons parler de la façon dont cela peut être un faux positif. Nous allons ensuite changer d'engrenages et aller dans le navigateur et utiliser le produit comme un utilisateur le ferait, et changer une partie de l'apparence et de la sensation, sorte que vous savez réellement quels cas de bord vous devez couvrir. Et nous allons utiliser les outils de développement intégrés dans le navigateur pour savoir où se trouvent les parties les plus problématiques de votre produit et comment les résoudre. Cette classe me tient à cœur parce que je dois travailler au quotidien avec l'accessibilité des produits dans Microsoft, et c'est parfois une bataille ardue. C' est parfois difficile à faire. Souvent, c'est parce que les gens ne comprennent pas que l'accessibilité signifie faire des choses pour les humains et découvrir les problèmes que les humains ont avec votre produit et pas seulement pour être conforme. À la fin de la classe, vous partirez avec l'idée qu' il y a beaucoup de gens là-bas qui voient le produit différemment que vous. Il y a des choses que vous pouvez faire pour vous assurer que ces personnes ne sont pas bloquées et deviennent des clients possibles et des utilisateurs supplémentaires de votre produit. Vous découvrirez également qu'il y a beaucoup de choses qui viennent déjà avec le navigateur que vous utilisez qui vous permet de tester ces besoins et de vous assurer que votre produit que vous avez construit est disponible pour les gens là-bas. Ce cours, j'espère, s'adresse à tous ceux qui ont pensé à l'accessibilité et ont construit des produits accessibles avec une équipe de développement et avec une équipe de test, mais qui n'ont pas tout à fait pris des mesures elles-mêmes. Ce que je dis ici, c'est qu'en tant que développeur, prenant les compétences que vous apprenez dans cette classe, vous allez en fait rendre beaucoup plus facile de travailler avec l'équipe juridique, travailler avec l'équipe de développement et de travailler avec le équipe de test parce que vous aurez fait la bonne chose avant de récupérer le test et que vous devez le refaire et réparer les choses à nouveau. Pour nous lancer, j'ai construit un projet qui est un site Web qui a quelques problèmes d'accessibilité, dont certains ne sont pas évidents. J' ai également créé une version fixe de ce site Web que vous pouvez également télécharger et vous pouvez jeter un oeil à ce que j'ai fait pour contourner ces problèmes. Rendez-vous ensuite sur les forums de discussion et discutez de cette chose. Je ne suis pas d'accord avec moi. Vous pourriez trouver un meilleur moyen de résoudre cela, ou vous pourriez trouver qu'il y a des problèmes avec les solutions que vous avez dans vos propres produits et que d'autres personnes peuvent vous aider. 2. L'accessibilité et pourquoi elle est importante: Dans cette première leçon, nous allons parler de ce qu'est l'accessibilité et de la raison pour laquelle elle est importante. Il y a beaucoup de mythes sur l'accessibilité. Il y a beaucoup de craintes au sujet de l'accessibilité. Parfois, il est considéré comme quelque chose qui pourrait être automatisé, ce qui n'est pas le cas. Nous voulons nous assurer que nous commençons du bon pied en comprenant l'accessibilité et pas seulement en essayant de le faire. En ce qui concerne l'accessibilité du Web, les gens commettent de simples erreurs qui ont des conséquences désastreuses. L' un des plus gros problèmes que nous découvrons là-bas est que nous continuons avoir des médias comme des images sans textes alternatifs. Ça ne semble pas être un problème. Les gens peuvent voir l'image. Mais si vous êtes aveugle, vous ne pouvez pas voir l'image et vous ne savez pas de quoi est l'image. Mais s'il a un texte alternatif, cela serait traduit pour vous. C' est assez simple de faire ce qu'il faut. C' est juste très facile de l'oublier. Notre propre expérience n'est pas ce que nos utilisateurs finaux ont et ce que personne d'autre que nous n'avons. Comme je peux lire le site allemand, vous ne pouvez probablement pas. Je peux lire un site web français, probablement d'autres personnes ne peuvent pas le lire, donc ils ont besoin de les traduire pour vous. Ces besoins sont différents des vôtres. Vous pouvez voir, c'est génial. Mettez un texte alternatif pour les personnes qui ne peuvent pas voir. Vous avez une vidéo qui a vraiment un bon son et qui a en fait de bonnes images, mais si quelqu'un est malentendant, il ne sait probablement pas ce qui se passe. Assurez-vous que vos vidéos comportent des légendes. Vous vous apercevrez que c'est quelque chose dont vous pouvez profiter aussi. Si vous êtes, par exemple, dans un pub et qu'il y a une télévision là-haut et que la musique brûle fort, vous appréciez vraiment ces sous-titres parce que vous comprenez le programme sans avoir à dire au barman de tourner hors de la musique et allume la télé, ce qu'ils ne feront pas pour toi. la même façon, lorsque vous activez les sous-titres dans des films étrangers, vous pouvez probablement mieux apprendre la langue de cette façon. Mettre ce petit effort supplémentaire pour s'assurer que les utilisateurs finaux ayant des capacités différentes que les vôtres peuvent consommer vos produits, multiplie réellement vos utilisateurs finaux. Cela garantit que tout le monde peut utiliser le produit et c'est souvent simplement une chose simple à mettre là, comme un texte alternatif pour une image, comme une légende pour une vidéo, ou s'assurer que votre produit a une taille de police ce n'est pas vraiment minuscule, mais en fait agréable de lire même sur un téléphone mobile au soleil. Quand il s'agit de tactiques, je pense que la première chose à penser est de vous mettre dans la peau de vos utilisateurs finaux. N' utilisez pas seulement votre produit sur le grand ordinateur que vous avez avec une grande résolution et la connectivité Internet rapide, obtenez un mauvais téléphone mobile avec une mauvaise connectivité, courez dans les bois et regardez vos produits là-bas. Ensuite, vous réaliserez que ce n'est pas autant de joie d'attendre cette animation de 50 mégaoctet avant de pouvoir réellement faire quelque chose. Il est important que vous compreniez les besoins de vos utilisateurs en désactivant les images de temps en temps. Par exemple, éteignez le son d'une vidéo ou d'une animation et réalisez, est-ce toujours logique ? Vous pouvez configurer vos environnements de développement pour assurer que lorsque vous oubliez, par exemple, un texte alternatif ou une image, cela vous donne une ligne squiggly et cela vous indique que c'est un problème. C' est ennuyeux d'avoir des problèmes pendant que vous développez, mais en même temps, c'est beaucoup moins problématique que quand il s'agit de vos utilisateurs finaux ou de vos testeurs et que vous passez par une autre série de construction de la chose. Pour vous mettre dans la bonne humeur pour cette classe, je veux que vous jetiez un oeil aux fonctionnalités d'accessibilité qui viennent avec les systèmes d'exploitation et les navigateurs déjà disponibles, que les gens utilisent pour changer votre produit et en fait doivent également changer votre produit afin qu'ils puissent le consommer. Cela commence par le redimensionnement de votre police sur vos sites Web jusqu'à 400 %. Ça a l'air intimidant, mais c'est ce dont les gens ont besoin. Assurez-vous que votre produit fonctionne toujours de cette façon. Vous pouvez également jeter un coup d'œil à certaines des nouvelles fonctionnalités systèmes d'exploitation comme le mode sombre et le mode lumineux. Il y a un mode de contraste élevé dans Windows qui est utilisé par jusqu'à six pour cent des utilisateurs ou Windows, il y a quelques millions de personnes là-bas. Vous verrez que votre site Web a l'air complètement différent. Vous ne le saviez probablement pas, mais c'est quelque chose à considérer. L' autre jour, par exemple, j'avais un clavier qui s'est cassé sur moi. J' utilise la façon de parler à l'ordinateur pour commencer à dicter mes textes. C' est quelque chose dont beaucoup de gens ont besoin là-bas aussi. Dans le passé, cela signifiait que je devais acheter un logiciel supplémentaire qui était obsolète, nos jours vient juste avec des systèmes d'exploitation et vous pouvez l'essayer vous-même. Jetez un oeil autour de votre système d'exploitation et de votre navigateur et voyez ce que vous pouvez activer et désactiver qui fait une différence pour les personnes handicapées et vous permet de mieux comprendre leurs besoins. 3. Outils d'accessibilité automatisés: Jetons un coup d'oeil à l'un de ces outils qui fournissent un rapport automatisé et voyons jusqu'où cela nous mène. Il s'agit d'un produit appelé Accessibility Insights, j'utilise également tous les jours au travail. Il s'agit d'une extension de navigateur que vous pouvez installer et il vous donne toutes les informations sur ce qui se passe en matière d'accessibilité et les problèmes de votre site Web. Vous allez sur un site Web qui a des problèmes d'accessibilité et que vous voulez tester, vous avez cette petite icône ici qui vous permet d'exécuter un FastPass dessus. Une fois que vous faites cela, vous obtenez en fait un rapport qui vous montre tous les problèmes qu'il a trouvés et il vous indique réellement où dans la page ils sont également. Cela vous explique qu'il y a en fait des instances échouées, sept d'entre elles. Il y a un problème de contraste de couleur. Il y a un problème d'image alt où les images n'ont pas de texte alternatif. Il y a un problème d'étiquette dans lequel un formulaire rempli n'a pas d'étiquette. Il vous montre également à l'écran où sont ces problèmes et ce qu'ils signifient réellement. Si vous développez les informations, vous apprendrez plus d'informations sur le contraste des couleurs, où vous pouvez savoir où il s'agit d'un problème, quelles normes Web sont en train de le définir, c' est également une exigence légale, puis en fait quelle partie de la page a ce problème et comment le résoudre. C' est génial, car il ne s'agit pas seulement de vous présenter un rapport, mais aussi de vous indiquer les prochaines étapes. Mais pour le moment, il est important de savoir que ces tests automatisés n'obtiennent qu'une partie de la page. Ils voient la page ou ils l'expérimentent d' une manière et vos utilisateurs finaux l'expérimentent de bien des façons. C' est quelque chose à considérer. Les ordinateurs ne peuvent pas nous dire quand quelque chose est accessible. Vous devez interagir avec la page comme le font vos utilisateurs finaux. C' est ainsi que vous découvrirez vraiment les problèmes d'accessibilité. Webhint est également un projet open-source qui teste réellement les problèmes d'accessibilité , les problèmes de performance, etc. Il a une extension de navigateur, mais où je l'utilise est en fait plus intéressant, qui est à l'intérieur de mon éditeur. Pour tester quelque chose avec Accessibility Insights, vous devez aller déployer le site Web, puis le tester là. Celui-ci vous dit que pendant que vous construisez quelque chose, quelque chose ne va pas. Par exemple, l'élément d'entrée qui n'a pas d'étiquette ici a une ligne squiggly en dessous en ce moment. Quand je roule cela dans mon éditeur, cela me dit en fait que chaque élément d'entrée a besoin d'une étiquette. Je ne fais même pas les erreurs que je dois tester plus tard en ayant cette extension dans mon éditeur de code Visual Studio. Installez ces deux-là et vous êtes en bonne voie pour faire des tests d'accessibilité appropriés. 4. Tester l'accessibilité des couleurs et du texte: Dans cette leçon, nous allons parler de l'accessibilité du texte et des couleurs sur notre site Web et nous allons apprendre que ce que nous voyons à l'écran n'est pas ce que les autres voient et parfois il est plutôt intimidant de voir comment les gens utilisent nos produits, mais il est important que nous les construisions, qu'ils fonctionnent aussi pour ces environnements. Jetons un coup d'oeil sur notre site Web et notre site de test en ce moment et donnons coups de pied aux pneus et voyons où nous trouvons réellement des problèmes d'accessibilité des couleurs. La première chose lorsque je teste un site Web pour des problèmes d'accessibilité est de grossir la taille de la police. Ceci est assez facile à faire avec Command plus ou Control plus. La plupart du temps, vous aurez probablement rencontré cela aussi dans le passé, vous allez jusqu'à 125 pour cent et vous êtes heureux que tout fonctionne, mais ce n'est pas suffisant. La plupart des utilisateurs finaux là-bas qui ont vraiment besoin d'un zoom vont jusqu'à 400 pour cent. C' est en fait une exigence légale à partir de Juillet de cette année en 2021 que vous devez être accessible avec un facteur de zoom de 400 pour cent. Cela signifie que vous ne pouvez faire défiler que dans une direction et que vous n'avez pas besoin de faire défiler dans deux directions pour prendre en compte ce qui se passe avec le site Web. Si vous jetez un oeil à ce site en ce moment, il se passe assez bien dans ce facteur de zoom. Mais certaines des choses qui ont l'air assez cool sur le facteur de zoom normal deviennent vraiment ennuyeux dans cela. Comme nous avons cette animation sur la navigation ici qui semble plutôt cool si je suis sur mon mode de zoom normal, mais c'est vraiment super ennuyeux une fois que je suis dans ce mode de 400 pour cent. Aussi quand je clique sur toutes ces choses et lisse ce défilement vers le bas, qui est une chose vraiment cool à faire en CSS en ce moment. Mais dans un mode de 400 pour cent, c'est en fait plus ennuyeux que toute autre chose. Une autre chose que j'aime faire est en fait de redimensionner l'écran et de m'assurer que tout circule bien. Pour cela, j'ouvre les outils de développement et la première chose que je fais est de simuler un appareil de téléphone mobile. C' est quelque chose qui est génial de toute façon, parce que la plupart des utilisateurs finaux là-bas auront un appareil mobile. Ensuite, vous pouvez voir comment votre site Web foire. Vous pouvez déjà voir ici que l'en-tête est maintenant en deux lignes et chevauche d'autres éléments. C' est déjà moche, mais pas un problème d'accessibilité. Mais si je commence à faire défiler la page, tout d'un coup mon en-tête fixe qui semble cool en résolution normale superpose maintenant la boîte de recherche et cela signifie que cela ne fonctionne pas réellement. Essayer votre site Web à différentes résolutions trouve également ceci. Vous pouvez également mettre cela ensemble si vous ne simulez pas un téléphone mobile, mais juste un design réactif et augmenter la taille de la police, vous trouverez en fait qu'il y a tous les différents problèmes dans cet environnement ainsi. C' est la première chose à faire pour voir si votre produit est réellement disponible pour les personnes ayant des besoins différents. Dans ce cas, les gens qui ont réellement besoin d'un zoom de 400 pour cent. Ils sont plus de gens que vous ne le pensez et ils devraient réellement utiliser votre site Web, vous ne devriez pas les bloquer. La prochaine chose à considérer est en fait le contraste et de voir si vous avez assez de contraste de couleur dans tous les éléments que vous avez sur votre page. Pour ce faire, il y a deux façons. Une des façons est en fait d'aller dans l'onglet Problèmes et les problèmes ici apparaissent sous cette petite icône. Ça dit que c'est sept numéros sur la page. Si vous cliquez sur celui-ci, vous découvrirez sous autre qu'il y a essentiellement deux choses qui n'ont pas assez de contraste, deux éléments. Vous cliquez dessus et vous pouvez voir qu'il s'agit d'un li.High, qui est mis en évidence maintenant sur l'écran ici aussi. Il vous montre que le contraste des couleurs n'est pas suffisant pour cela. Nous devons faire quelque chose pour faire le contraste des couleurs là-bas. L' autre est un p, qui est jusqu'à l'écran. Pour aller à celui-ci, vous pouvez aller à ce menu ici et dire défiler dans la vue. De cette façon, vous voyez que c'est en fait le pied de page ici. Si vous voulez résoudre ces problèmes, si vous voulez les résoudre dans le navigateur lui-même, cela est également intégré. C' est quelque chose que beaucoup de gens ignorent. Si vous allez à nouveau à la p ici, vous trouvez qu'il y a un fond, une couleur de premier plan. Si vous cliquez sur la couleur de premier plan, vous verrez dans le sélecteur de couleurs qu'il y a un rapport de contraste de 365. Ce n'est pas assez bon et il a en fait cette petite flèche à côté de lui disant que ce n'est pas assez bon. Vous pouvez sélectionner celui-là dès maintenant. Dans le sélecteur de couleurs, vous obtenez deux lignes pour vous dire à quelle hauteur vous devez aller pour vous assurer que vous avez suffisamment de contraste. Vous pouvez aussi être paresseux comme moi et il suffit de cliquer sur l'une de ces couleurs ici qui sont réellement recommandées pour vous. Si vous changez celui-ci, vous voyez que le pied de page a maintenant une meilleure coloration et qu'il s'agit en fait d'une couleur valide avec suffisamment de contraste. Le navigateur ne vous indique pas seulement dans le rapport qu'il se passe quelque chose, mais vous pouvez réellement utiliser l'outil directement pour le corriger, puis revenir à votre CSS, mettre une autre couleur et vous assurer que l'accessibilité est donnée pour le réglage de contraste de celui-ci. Le panel des questions nous montre des problèmes évidents qui sont là, mais il ne voit que le site dans un seul état. Il ne reconnaît pas réellement que les gens peuvent faire choses différentes sur le site Web pour avoir des états différents. C' est là qu'intervient un autre outil qui s'appelle l'inspecteur. L' inspecteur est cette petite flèche ici. Si je me déplace maintenant sur la page, cela me donne toutes les informations sur les différents outils. Ça me donne les dimensions, ça me dit ce que c'est. Nous allons y revenir dans une autre leçon. Il me montre aussi la mise en page de celui-ci. S' il a des problèmes de mise en page vraiment cool que vous pouvez trouver et inspecter là aussi. Mais plus important encore, il me dit en fait les problèmes de couleur de quelque chose aussi bien. Cela me montre que le contraste de celui-ci est assez bon. Mais le contraste, par exemple, sur l'élément que nous avons examiné plus tôt, à savoir que le groupe d'experts a signalé, n'est pas suffisant. Au lieu d'avoir une coche, j'obtiens ce point d'exclamation. Le problème est cependant, que l'inspecteur ne voit à nouveau qu'un état de celui-ci. Lorsque vous prenez par exemple, la navigation ici, il dit que ce bleu foncé et blanc est totalement correct, il y a assez de contraste. Mais si vous vous souvenez de l'utilisation du site Web, il y a cet état de survol qui en fait une couleur différente. Cette couleur différente, je ne sais pas si elle est accessible maintenant ou si elle a assez de contraste, parce que dès que j'allume l'inspecteur, ça ne le déclenche plus. Vous pouvez contourner cela en utilisant la simulation d'état dans les outils de développement. Dans n'importe quel élément, vous pouvez déclencher cette simulation d'état. Vous pouvez dire, par exemple, quoi ça ressemble si je survole ? Maintenant, il a l'état de vol stationnaire sans que je doive passer dessus avec ma souris. De cette façon, je peux utiliser l'inspecteur pour savoir s'il a assez de contraste. Si vous cliquez dessus maintenant et que vous allez au sélecteur de couleurs, vous apprenez que le rapport de contraste n'est pas suffisant et vous devriez choisir une couleur différente. Ceci est intéressant lorsqu'il s'agit d'interagir avec différents éléments du site Web. Mais qu'en est-il si les utilisateurs ont réellement une façon différente de regarder le site Web ? L' un d'eux est appelé le volet de rendu. Vous pouvez réellement activer cela en allant dans le menu points-points, aller à plus d'outils et de rendu. De cette façon, vous pouvez réellement l'allumer là-bas. Il fait tous les trucs cool hardcore pour tester pour la performance. Mais plus important encore, si vous faites défiler tout le chemin vers le bas, vous pouvez simuler différents modes du site de cette façon. Maintenant, j'ai un mode sombre ici sur mon ordinateur parce que j'aime le mode sombre comme la plupart des gens le font aujourd'hui, mais d'autres ont un mode lumière. Normalement, j'allais au système d'exploitation, transformais mon système d'exploitation en mode lumière et je voyais ce que les gens verraient le site Web comme. Mais cette simulation dans la douleur de rendu vous permet de le faire d'une manière plus simple. Vous pouvez maintenant aller au jeu de couleurs préféré et le transformer en lumière. Bien sûr, certaines des choses que nous pensions aller bien pourraient ne plus être d'accord. Vous pouvez voir cela ici où le contraste pour le jaune et le rouge était totalement correct en mode sombre, mais en mode lumière ce n'est plus ou c'est ce que je suppose en ce moment. Mais encore une fois, c'est là que le volet des problèmes peut m'aider. Je vais maintenant simuler le mode lumière, puis je recharge la page. Vous voyez que nous avons beaucoup plus de choses qui ont réellement un problème de contraste de couleur que nous avions auparavant. Nous avions deux éléments avant, et maintenant nous avons six éléments parce que nous sommes passés à un autre mode du site Web. Notre schéma de couleurs, notre thème de lumière doit également être testé pour les problèmes d'accessibilité et de couleur. Ce n'est pas la fin parce que les utilisateurs ont tous les problèmes avec leurs yeux sur lesquels nous voulons nous assurer que nous travaillons également. Dans les outils de développement, vous avez une chose appelée émuler les déficiences de vision, qui vous permet de voir le site Web comme les personnes ayant différentes déficiences de vision verraient le site Web en ce moment. La première chose que vous voulez essayer est une vision floue. C' est comme si mes lunettes étaient sales ou que le soleil brille sur mon téléphone portable. Je peux voir immédiatement qu'il y a quelques problèmes ici, comme l'en-tête semble correspondre en ce moment, cette ombre portée, qui semble assez cool quand je peux le voir correctement. En fait, ça n'aide pas la cause mais l'empêche. En outre, les tailles de police pourraient ne pas être aussi grandes que je veux qu'elles soient correctement utilisables. C' est quelque chose que la vision floue vous donne déjà. Vous pouvez alors également activer différentes émulations comme, cécité des couleurs différentes comme la protanopie, deutéranopie et ainsi de suite et ainsi de suite. Soudain, vous réalisez que le vert, le jaune et le rouge n'ont aucun sens parce que tout le monde ne les voit pas comme vert, rouge et jaune. Vous pouvez également désactiver toutes les couleurs pour voir s'il y a suffisamment de contraste sur toutes les choses lorsque les gens ne peuvent pas voir les couleurs du tout. Ce n'est que quelques façons de commencer. Maintenant, c'est ton tour. Je vous ai montré quelques choses comment résoudre certains problèmes. Jetez un oeil, par exemple, à ce rouge, vert et jaune, ce que vous pourriez faire à ce sujet. Faites un peu de redimensionnement, découvrez d'autres problèmes. Il y a plus de problèmes sur ce site Web que vous n'avez peut-être pas encore pensé quand il s'agit de couleurs et de texte. Vous vous maintenant ce qu'il faut faire, vous cliquez sur l'onglet Problèmes et vous donne réellement les informations sur les problèmes. Vous pouvez réellement utiliser l'inspecteur et vous pouvez utiliser la simulation pour essayer les choses. Vous pouvez le faire sur n'importe quel produit, en fait des produits qui ne sont pas sur le web, cela s'exécute sur votre machine locale. C' est un moyen facile pour vous de commencer à vous assurer que toutes les couleurs que vous avez choisies sont non seulement jolies, mais aussi accessibles. 5. Tester l'accessibilité des interactions: Dans cette leçon, nous allons parler de l'interaction avec un site Web et nous assurer que nous sommes accessibles. Il y a plusieurs façons d'interagir avec votre site Web. La souris est la plus commune le plus probable, mais il y a aussi des utilisateurs de clavier, il y a des gens qui peuvent simplement cligner les yeux pour passer d'une section à l'autre. Vous devez vous assurer que votre site Web est logique à tous ces. Nous allons parler de la façon de tester cela, de savoir comment découvrir les problèmes qui se trouvent sur un certain site Web, et comment les résoudre. Jetons un coup d'oeil à notre site Web et voyons comment cela fonctionne pour quelqu'un qui utilise uniquement un clavier, qui inclut les utilisateurs de lecteurs d'écran et seulement les personnes qui ne peuvent pas utiliser une souris. Nous pouvons le tester nous-mêmes en n'utilisant pas notre souris, mais en utilisant réellement le clavier. Le moyen le plus simple est d'utiliser la touche de tabulation pour passer d'un élément à un autre, car c'est ce que les gens font aussi. Il y a plus de choses évoluées comme la clé d'entrée pour envoyer formulaires et de l'espace pour passer par différentes sections. Mais nous n'avons pas besoin d'y aller, mais c'est quelque chose que vous pourrez regarder vous-même plus tard. Si je parcourt la page en ce moment, la première chose que je fais est de mettre en surbrillance le champ de recherche, et il a cette bordure autour d'elle. Beaucoup de gens pensent que c'est notre clé. C' est très nécessaire, n'éteignez pas ça. Beaucoup de gens vous en remercieront. Allez sur le bouton go, et là j'essaierai de retourner si cela envoie du formulaire. Il envoie le formulaire, il ne va nulle part en ce moment que 'pourquoi je viens de faire défiler vers le bas. Mais cela fonctionne avec un clavier, donc nous devrions être heureux là-bas. Quand j'appuie à nouveau sur l'onglet, la première chose que je fais est en fait de parcourir les liens dans la page, et c'est bizarre car en substance, cela signifie que ce menu ici n'est pas dans le flux, et il devrait être dans le flux car visuellement, il est logique utiliser celui-ci pour descendre aux sections de la page. Avec un clavier, je suis déjà dans la page. Quand je vais maintenant plus haut, je ne sais pas où je suis parce que le menu n'a qu'un état de vol stationnaire. Il n'a pas d'états focaux. Avec un clavier, si j'y accède, j'obtiens l'état focus, avec un survol, je vais juste obtenir un état de souris. Un utilisateur de clavier ne saura pas où ils sont en ce moment sauf pour savoir qu'ils sont sur un lien et un lecteur d'écran vous lirait que votre lien sur, mais vous n'êtes pas tout à fait sûr que vous êtes dans le menu en ce moment, mais quelque part autre. La prochaine chose à réaliser ici est que si je passe par le menu, je suis à nouveau dans une autre boîte de recherche, je suis à l'autre boîte en ce moment, mais il y a des clés au-dessus. Que se passe-t-il là ? Ces touches ne sont pas accessibles au clavier. Avec une souris, je peux cliquer sur le 200, le 50 et le 100. Avec un clavier, je ne peux pas y accéder. Tabbing à nouveau me fait pas don de bouton, mais en fait m'amène à la navigation principale. Vous voyez qu'il y a quelques problèmes dans ce site Web qui ont à voir avec la navigation au clavier, et maintenant nous essayons de savoir pourquoi. Eh bien, l'outil à utiliser à nouveau est l'inspecteur, nous avons essayé cela plus tôt pour découvrir les problèmes de couleur. Maintenant, nous pouvons l'utiliser pour en savoir plus sur les problèmes d'interaction. Si je vais, par exemple, sur l'élément d'entrée ici, cela me dit que c'est un rôle de boîte de recherche et qu'il est focalisable sur le clavier. C' est pour ça que je pourrais l'utiliser avec le clavier. Mais il n'a pas de nom. La raison en est que c'était quelque chose qui a été signalé par les problèmes précédemment, que nous avons une étiquette dans le code source, mais il n'est pas connecté à l'élément. L' entrée ne se trouve pas dans la zone de recherche ou l'étiquette n'a pas d'attribut for et l'entrée n'a pas d'ID. C' est une étiquette qui est effectivement utilisée à tort et n'a aucun sens. Pour corriger cela, vous pouvez le faire vous-même ou regarder la partie de réparation du site, est plutôt facile. Une chose intéressante cependant est, quand vous pensez aux tests automatisés que nous avions précédemment, que le formulaire ici que nous venons d'apprendre comme étant complètement inaccessible aux utilisateurs de clavier n'est en fait pas signalé parce que nous utilisé une étiquette, et si vous cliquez sur l'étiquette, vous pouvez mettre en surbrillance le champ du formulaire, mais il ne fait pas partie d'un formulaire. Il ne savait pas que ces boutons sont inaccessibles parce qu'ils ne sont pas des boutons, ils sont juste quelque chose. Qu'est-ce qu'ils sont ? Encore une fois, nous utilisons l'inspecteur et nous le repassons, et nous découvrons que le rôle est générique et que ce n'est pas focalisable sur le clavier parce que si vous regardez le code source, nous découvrons en fait qu'il s'agit de DIFS. Ces DIFS sont quelque chose que les gens aiment faire parce qu'ils sont super stylables et qu'ils n'ont pas de style hors de la boîte comme ce contour par exemple, mais ils ne veulent rien dire. Comment ai-je pu les rendre réellement cliquables pour sélectionner ces différentes choses ? Vous pouvez essayer cela aussi en allant aux écouteurs d'événement et en suivant cela, et vous pouvez voir que j'ai écrit du JavaScript pour les faire en différents boutons. Mais avec un utilisateur de clavier ou sans JavaScript, ce formulaire ne serait pas accessible du tout. Au lieu de cela, j'aurais dû utiliser des boutons ou des boutons radio. Encore une fois, regardez la version fixe du site Web pour voir comment contourner cela. Vous trouverez souvent que vous écrivez JavaScript supplémentaire juste parce que vous avez utilisé le mauvais HTML. La plupart du temps, il n'est pas nécessaire de le faire parce que JavaScript est toujours plus fragile que HTML parce que HTML vous donne beaucoup de choses gratuites du navigateur directement, et vous pouvez le découvrir dans les outils de développement aussi bien ici. En général, vous pouvez parcourir tous les éléments de la page et savoir si leur focus clavier, quel nom et quel rôle ils ont. Mais si vous voulez savoir cela sur l'ensemble du document, vous pouvez également utiliser l'arborescence d'accessibilité ici. Le document que vous avez est présenté sous deux formes. Il vient dans l'arbre DOM, qui est réellement généré ici, qui vient de Watson via HTML, et aussi ce que JavaScript fait au HTML. Ce qui est à l'écran et quel est l'ordre de l'écran, c'est aussi ce que le CSS nous dit de faire. Par exemple, nous avons réalisé que le contenu ici est en fait avant celui-ci pour une raison quelconque, mais il y regarde toujours, et nous ne savons pas comment le faire. Dans l'arbre d'accessibilité, c'est quelque chose qu'une technologie d'assistance comme un lecteur d'écran obtiendrait. Ceci est une autre vue de la page qui réellement assemblée avant que le reste du document ne soit là. Tout ce que vous faites dans votre HTML et votre JavaScript plus tard pourrait ne pas finir là dedans. Si vous parcourez les différents éléments de la page, et que vous regardez l'arborescence d'accessibilité à côté, vous pouvez savoir si quelque chose est générique, ou qu'il a un nom, ou qu'il a un rôle, et si elle accessible également. C' est une façon très enracinée de parcourir l'ensemble du document. Comme la technologie d'assistance passe par ordre source, dans la source du document, le document HTML, ce qui vient d'abord est lu d'abord, et ensuite, et ainsi de suite et ainsi de suite. À l'écran, cela peut sembler complètement différent, et nous ne savons pas à moins que nous examinions aussi la source, ce qui est assez intimidant parce que personne ne veut lire le HTML. Nous avons construit ce petit outil appelé le raccourci Source Order Viewer. Si celui-ci est activé, vous pouvez effectivement cliquer sur l'un des éléments ici et vous pouvez obtenir l'ordre source affiché pour vous. Si vous allez dans la section, nous apprenons maintenant que la section avec le contenu est la première, la navigation est la seconde, et la navigation principale est la troisième, ce que nous avons également trouvé déroutant plus tôt. C' est quelque chose que vous pouvez utiliser pour découvrir ces petits problèmes. Une autre chose que je veux vous montrer est, nous avons parlé d'Accessibility Insights plus tôt, et il a une fonctionnalité vraiment cool qui vous aide à tester l'accessibilité du clavier ainsi. En plus du FastPass que nous avons utilisé précédemment, vous avez également des outils ad hoc. Ces outils ad hoc sont des superpositions sur la page qui vous permettent de montrer ce qui se passe dans la page en termes d' interaction avec le clavier et en termes d'autres choses comme la couleur aussi bien. La première chose à essayer est des points de repère. Landmarks est vraiment une bonne chose à donner aux utilisateurs de clavier parce que cela signifie qu'ils peuvent sauter directement à cette section. Si je dis que je veux aller à l'élément de navigation suivant, si l'élément de navigation a un rôle de navigation, il peut le trouver. Si c'est juste un DIF, il ne peut pas le trouver. C' est vraiment bon d'avoir pour les utilisateurs de clavier et de lecteur d'écran de naviguer plus rapidement sur votre site Web. Un autre intéressant est l'onglet s'arrête ici. Comme nous l'avons traversé plus tôt, nous pouvions simplement le trouver nous-mêmes, mais les taquets de tabulation sont maintenant visualisés, donc je peux savoir que je suis dans la zone de recherche d'abord, puis ajouter le bouton, et ainsi de suite et ainsi de suite. Il ne se superpose pas sur la page. Cette page n'est pas aussi complexe, mais quand vous aimez les applications ou les pages très complexes, cela peut sembler vraiment brutal. C' est un excellent moyen de faire une capture d'écran pour montrer aux gens combien de travail il est pour les utilisateurs de lecteurs d'écran ou les utilisateurs de clavier de passer par votre application. Mettez-le dans un document, mettez-le dans une présentation, et montrez-nous que c'est ce que nous avons fait . Peut-on avoir du temps d'ingénierie pour le réparer ? Bien sûr, lorsque vous utilisez la visionneuse de commandes source et que vous l'essayez vous-même avec l'onglet, vous n'avez pas besoin de le faire réellement. Maintenant, c'est à votre tour, jetez un oeil aux outils de développement, jetez un oeil à la source ou à la visionneuse. Essayez ces sites Web que vous avez. Essayez votre produit avec un clavier. En savoir plus sur la navigation au clavier. Tabbing n'est qu'une de ces choses. Activer les barres d'espace ou appuyer sur « Entrée » pour envoyer des formulaires en est une autre. Découvrez comment vos utilisateurs finaux qui ont réellement besoin d'utiliser un clavier interagissent avec votre site Web, puis jetez un oeil à vos produits et voyez où ils sont bloqués. Utilisez ces outils à votre avantage et vous aurez un beau produit accessible. 6. Tester l'accessibilité des supports et des images: Dans cette leçon, nous allons parler des médias, principalement des images et des animations sur vos sites Web. Ces choses sont des choses formidables, mais elles peuvent constituer une barrière massive, alors nous allons découvrir comment les utiliser de manière responsable. En ce qui concerne les médias et l'accessibilité, il est plus important que ce que vous pouvez emporter que ce que vous pouvez ajouter. Lorsque vous avez une image, vous feriez mieux de vous assurer qu'il y a un texte alternatif. Vous devez réellement supposer que l'image ne peut pas être vue. Il ne peut pas être chargé ou les gens ne peuvent pas le voir, donc le texte alternatif a beaucoup de sens. La même chose avec la vidéo. Incorporer une vidéo est assez facile de nos jours, mais c'est vraiment bon si elle a aussi une transcription. La plupart des services vidéo comme YouTube ou d'autres vous permettent également de le faire automatiquement. C' est quelque chose à considérer pour s'allumer à chaque fois. Bien sûr, ce sera vraiment génial si vous aviez une transcription pour la vidéo et que vous venez d'apparaître à la place, mais c'est quelque chose qui est un pas supplémentaire à faire en ce moment. Quand il s'agit d'animations, c'est aussi une autre chose où il vient avec modération. C' est comme si c'était génial d'en avoir, mais ils peuvent être vraiment déroutants pour beaucoup de gens. Nous allons jeter un oeil à ce que notre site de démonstration a, pourquoi je l'ai fait et comment je peux le rendre plus accessible. Dans la page de démonstration que nous avons pour cette classe, nous avons en fait quelques animations. Tous frivoles, mais la raison est que je voulais les utiliser. Vous savez tous que vous pouvez passer des heures avec des animations CSS à peaufiner les choses. C'est beaucoup de plaisir. Dans mon cas ici, nous avons eu l'animation sur la navigation qui montre juste le point culminant, qui semble assez cool. Si vous faites défiler vers le bas jusqu'à quelque chose, il fait défiler doucement vers le bas plutôt que de simplement sauter dessus. La section sur laquelle vous cliquez clignote également un peu. Un bouton « Plus » ici devient aussi plus grand quand je vais dessus. Tout semble frivole, mais parfois l'animation peut réellement faire une différence où un bouton Acheter ou quelque chose qui apparaît là où vous allez, sens pour vous. Le problème est en ce moment cependant, que beaucoup d'utilisateurs peuvent se confondre par cela. L' autre chose à l'intérieur que j'ai est beaucoup d'images comme des images de chats ou de chiens, ce qui est génial, mais pas tous d'entre eux ont des textes alternatifs comme nous l'avons découvert plus tôt. Encore une fois, le moyen le plus rapide de savoir à ce sujet est d'utiliser l'inspecteur. Si je roule ça maintenant, je n'ai pas de nom et de rôle. C' est juste une image de rôle, elle est focalisable sur le clavier, mais il n'y a pas de nom à elle. Cette image a un texte alternatif, donc elle dit en fait photo de Socke, qui est le chien de notre famille regardant la caméra. C'est logique. Si je ne vois pas, j'ai une explication que cette image est là. Il est en fait assez simple de savoir si une image a un texte alternatif ou si elle ne l'utilise pas, et c'est un problème simple à éviter. Nous en avons déjà parlé dans l'introduction. Espérons que vous aurez pensé à cela dans proche avenir aussi lorsque vous faites de nouvelles choses vous-même. En ce qui concerne les animations, il y a une étape très importante que nous devons considérer aujourd'hui est que la plupart des systèmes d'exploitation vont venir avec un mode appelé mouvement réduit qui vous permet de désactiver les animations dans le système d'exploitation. C' est double. L'un est pour la performance. Beaucoup de gens ont réalisé que la durée de vie de la batterie de leur téléphone mobile meurt rapidement si les sites Web animent beaucoup de choses. Bien sûr, c'est un problème d'accessibilité. Les personnes ayant une tête frappée deviennent nauséeuses par des animations. Les gens peuvent avoir des problèmes de lecture lorsque les animations les distraient, et les gens peuvent généralement être distraits et ne savent plus où ils sont dès que quelque chose commence à clignoter. Toutes les choses que nous mettons là-bas devraient avoir un chèque à côté d' eux pour s'assurer qu'elles n'apparaissent que quand elles sont réellement recherchées. Vous pouvez le faire en CSS en utilisant une requête multimédia appelée mouvement réduit. Encore une fois, vous pouvez tester cela en allant sur le système d'exploitation et éteindre toutes les animations et revenir à votre site Web et le recharger. Mais nous voulions vous faciliter la tâche, donc nous avons également créé l'une des émulations dans le volet Rendu. Vous allez à préfère le mouvement réduit, et vous dites préfèrent le mouvement réduit, réduire. Maintenant, vous cliquez sur la navigation, vous verrez qu'il saute. Ça ne fait plus le flux. Il ne fait pas le ralentissement du défilement vers l'autre section. Ça saute, ce qui nous a l'air moche, mais pour quelqu'un qui est confus par l'animation, c'est une chose très, très agréable à avoir. La navigation affiche toujours l'animation, donc c'est un problème. Dans la version fixe de la page, ce n'est plus le cas, et vous pouvez jeter un oeil à ce que j'ai fait. Ok, il y a quelques choses dans les outils de développement qui vous aident à vérifier l'accessibilité de vos médias. Vous pouvez utiliser l'inspecteur pour voir si une image a un texte alternatif. Vous pouvez également utiliser la simulation d'animation de réduction pour vous assurer que vos animations ne s'affichent que pour celles qui peuvent et veulent utiliser des animations. Maintenant, une chose que vous avez pu voir dont je n'ai pas encore parlé est que dans les éléments, dans le HTML, vous avez une ligne squiggly ici sous cette image en ce moment. Cela signifie qu'il y a là un problème d'accessibilité. Si vous faites un clic dessus, vous passez au volet d'accessibilité, à la liste des problèmes, et celui-ci vous indique exactement ce qui ne va pas avec celui-ci. Cependant, c'est le HTML qui est déjà généré, c'est déjà fait. Que diriez-vous si vous voulez le faire pendant que vous écrivez du HTML ? Cela nous ramène à quelque chose dont nous avons parlé plus tôt, à savoir l'extension webhint pour Visual Studio Code. Si vous allez dans votre éditeur, vous verrez les mêmes lignes squiggly sous des morceaux HTML problématiques. Dès que vous les aurez réparés, ces squiggles disparaîtront. Encore une fois si vous passez par la douleur des problèmes et que vous voulez le voir directement là, vous pouvez survoler et vous explique quel est le problème dans ce cas que, cette image n'a pas de texte alternatif. Si vous tapez un texte alternatif, il disparaît. C' est ennuyeux. Ce n'est pas joli et cela signifie en fait que vous voulez le réparer. C' est quelque chose que vous pouvez installer dans votre code Visual Studio et aussi dans la visionneuse source des outils de développement, et vous montre maintenant exactement où se trouvent vos problèmes. Dans cette leçon, nous avons parlé d'images sans textes alternatifs que vous devriez l'écrire. On a parlé un peu de vidéos, mais on n'a pas montré de démo là-bas. Mais en fait, essayez ça. Téléchargez une vidéo sur une plate-forme, assurez-vous d'obtenir une transcription et voyez si vous pouvez obtenir la transcription pour l'afficher avec la vidéo, si elle ne le fait pas automatiquement. Nous avons parlé de mouvement réduit, et nous avons parlé de différents états, ce que les gens peuvent consulter votre site Web. Assurez-vous de regarder les mouvements réduits parce que c'est une chose très puissante à faire. Pensez-y, si quelqu'un ne veut pas voir d'animations ou ne peut pas voir d'animations, et que vous lui envoyez un GIF animé de deux mégaoctet, cela n'a aucun sens. Assurez-vous d'utiliser cette requête de média de mouvement réduit CSS à bon, et assurez-vous que les gens n'ont pas à charger choses qu'ils ne veulent pas avoir et ne peuvent pas traiter. 7. Réflexions finales: Eh bien, c'est la fin de ce cours et j'espère que vous avez appris quelque chose sur l'accessibilité et l'interaction. Cette accessibilité ne peut pas être automatisée, mais beaucoup de problèmes apparaissent seulement lorsque vous commencez à interagir avec la page vous-même, et que vous commencez à simuler la façon dont les utilisateurs changent votre site Web pour répondre à leurs besoins. Il y a le site que nous avons là-dedans qui a quelques erreurs là-dedans, alors jetez un oeil à celui-ci, essayez de les réparer vous-même, et jetez un oeil au site fixe aussi, et si vous trouvez quelque chose que je n'ai pas pensé de, et je suis sûr qu'il y a quelque chose là-dedans que je n'ai pas pensé, venez aux forums de discussion, discutez avec nous et apprenez-en plus sur l'accessibilité.