Comprendre la conception UX/UI pour l'accessibilité : Concevez une page web accessible !

1. Introduction: Salut. Bienvenue à vous comprendre X vous J'ai conçu pour l'accessibilité, conception et la page Web accessible. Vous pouvez consulter cette classe parce que vous avez un intérêt pour l'accessibilité, où vous devez en apprendre davantage sur la conception accessible, mais vous ne savez pas exactement par où commencer. Eh bien, vous êtes au bon endroit. Mon nom est le shin shell, et je suis un concepteur d'expérience utilisateur, et j'ai plus de 15 ans d'expérience dans le domaine de l'accessibilité. En fait, je suis originaire de la région de Washington D.C Washington D.C ., où beaucoup des produits sur lesquels j'ai travaillé étaient liés au gouvernement et devaient être accessibles. J' ai posté des ateliers sur l'accessibilité et en ai parlé à mes collègues. En général, j'aime aider les gens à apprendre à être plus inclusif avec leurs conceptions. Dans cette classe, je vais décomposer les différents aspects de l'expérience d'un utilisateur que les concepteurs doivent prendre en compte pour l'accessibilité. Vous aurez une idée des différents types de déficiences et des types de technologie du système pour aider les personnes atteintes de ces déficiences, vous verrez quels outils et techniques vous pouvez utiliser pour rendre vos conceptions plus accessibles et, enfin, vous apprendrez les meilleures pratiques XY y pour créer des conceptions accessibles pour cette classe. Vous devriez avoir au moins des compétences de base XY y Web design. Cependant, vous pourriez être un débutant à une compréhension professionnelle chevronnée. L' accessibilité est une compétence importante pour tout le monde. Pour le projet. Pas de design. Une page web en gardant à l'esprit l'accessibilité. Je vous encourage à travailler sur votre projet parallèlement aux leçons. Cela vous donnera une chance d'essayer les outils de première main. Je vous encourage également vivement à partager vos progrès avec les autres élèves et à poser des questions cours de route. Vous apprenez souvent beaucoup plus et l'inspiration confinée et d'autres solutions de personnes. J' ai hâte de voir vos progrès et de répondre à vos questions. Êtes-vous prêt à commencer ? Commençons. 2. Les bases de l'accessibilité: avant de nous lancer dans la conception pour l'accessibilité, je vais parler un peu des bases de l'accessibilité. Et dans cette leçon, je vais expliquer ce qu'est l'accessibilité, pourquoi elle est importante et les différents types de déficiences et comment le concepteur U X Y peut aborder la conception pour l'accessibilité. accessibilité est la conception de produits tels que les sites Web et APS, sorte qu'ils sont utilisables indépendamment des capacités d'une personne. Donc, à son cœur, il s'agit vraiment de s'assurer que votre site Web ou APP est conçu pour être inclusif. Selon le Rapport mondial sur le handicap de l'Organisation mondiale de la santé, en 2011, plus d'un milliard de personnes dans le monde souffrent d'une forme ou d'une autre de handicap. Cela représente environ 15% de la population mondiale, soit trois fois la population totale des États-Unis. Le rapport indique également qu'entre 110 et 190 millions de personnes ont des difficultés très importantes à fonctionner. Si nous avons conçu en tenant compte de l'accessibilité, de nombreuses personnes peuvent bénéficier de nos sites et de nos produits. Il existe trois types de déficience permanente, qui est une déficience qui reste indéfiniment, et certains exemples de cela comprennent la cécité, un membre manquant, lésion cérébrale traumatique ou l'arthrite temporaire, qui est une déficience qui est de courte durée. Voici quelques exemples : Ah, bras cassé, blessure à la main ou altérations dues à des interventions chirurgicales ou à des traitements médicaux. Et enfin, il ya situationnel, qui est une déficience qui est causée en fonction de la situation dans laquelle vous êtes. Et certains de ces exemples peuvent inclure un bar bruyant, et vous ne pouvez pas entendre la télévision où vous essayez d'utiliser votre téléphone en plein soleil. Ces personnes et les parents peuvent entraver votre capacité à naviguer sur les sites Web ou à comprendre le contenu qu'ils contiennent pour vous aider à comprendre ce qu'est un handicap. Je vais lire cette citation du de préambule de la Convention des États-Unis relative aux droits des personnes handicapées. Le préambule mentionne que le handicap est un concept évolutif et que le handicap résulte de l'interaction entre les personnes handicapées et des obstacles comportementaux et environnementaux qui entravent leur participation pleine et effective à la vie de la société. sur un pied d'égalité avec les autres. Qu' est-ce que ça veut dire pour U Ex ? En termes d'expérience d'un utilisateur ? Le handicap est que l'interaction entre un humain et l'ordinateur lorsque quelqu'un peut interagir avec le site ou le site Web, le handicap vit avec l'expérience elle-même et non avec l'utilisateur. En tant que concepteur U. X Y, nous avons la responsabilité de supprimer ces obstacles afin que, indépendamment de vos déficiences, vous puissiez accéder au site ou à l'application. Ensuite, je vais parler un peu de la façon dont nous avons conçu pour l'accessibilité. En ce qui concerne la conception pour l'accessibilité, il existe des normes que vous pouvez suivre. Vous avez peut-être entendu parler de l'article 508 et il s'agit d'un article de la Loi sur la réadaptation professionnelle . Il précise les exigences relatives aux technologies de l'information et des communications accessibles ou I C T. Il s'agit d'un règlement que chaque organisme fédéral doit suivre si votre produit de cidre est utilisé par le gouvernement et qu'il en a plus que probable besoin de trois Conformité à la section 5. En janvier 2018, les lignes directrices relatives à l'actualisation du poids de la section 5 sont entrées en vigueur. Ces normes comprennent des lignes directrices pour suivre notre technologie en constante évolution, et elles remontent à un CAG en deux points. Oh, une autre norme est les directives d'accessibilité du contenu Web ou quoi ? CAG 2.1. C' est une norme non gouvernementale. Au lieu de cela, ces normes d'accessibilité Web sont fixées par le World Wide Web Consortium, ou W three C, et elles ont été recommandées par le consortium en juin 2018. Les lignes directrices du TAC comportent trois niveaux de conformité, la plupart des critères, et les lignes directrices n'ont qu'un seul niveau de conformité. Mais certains critères ont plusieurs niveaux pour les critères. Avec plusieurs niveaux, vous pouvez penser aux niveaux de cette façon. A, qui est une base de référence. Considérez cela comme une note de passage C à l'école, Double A est un meilleur niveau d'accessibilité, et Triple A est le plus haut niveau d'accessibilité. Mais dans la plupart des situations, viser le Double A est suffisant. Dans un processus typique de création d'un site Web ou d'une application. Voilà le travail de conception. Ensuite, il est codé et enfin, il est testé. Le processus d'inclusion de l'accessibilité n'est pas seulement une responsabilité des concepteurs. Les développeurs doivent s'assurer qu'ils écrivent du code accessible, et les ingénieurs de test doivent faire leur diligence raisonnable pour confirmer que le site ou le produit est accessible. Cependant, notre rôle consiste à concevoir de façon proactive en tenant compte de l'accessibilité afin de faciliter le processus de mise en œuvre de l'accessibilité. L' essentiel de notre rôle de concepteur U. X Y est de veiller à ce que les utilisateurs puissent naviguer sur le site et en comprendre le contenu. Pour ce cours, j'ai divisé les leçons par navigation et compréhension. Chaque leçon s'appuie sur les informations de la précédente, donc je vous recommande fortement de regarder chaque leçon dans l'ordre. Si vous voulez en savoir plus sur les lignes directrices en matière d'accessibilité et les bases, consultez la ressource est la section I fourni quelques liens utiles là-bas. 3. PROJET DE CLASSE: le projet pour cette classe est de concevoir un site Web accessible d'une page sur votre nourriture préférée . Vous ne retoucherez pas la page Web, mais vous créerez la conception au fur et à mesure de la conception de la page. Vous aurez l'occasion d'essayer certains des outils et d'appliquer des techniques de conception accessibles. Je vous encourage à commencer par une conception approximative de votre site d'une page, puis à générer sur la conception après chaque leçon. De cette façon, approcher l'accessibilité ne semblera pas si intimidant pour cette classe. Vous aurez besoin de Sketch, Adobe Illustrator ou Adobe X'd ou d'un autre logiciel de conception Web que vous connaissez . Il y a d'autres outils, et vous aurez besoin de ressources, et je vais les inclure dans le projet. La ressource est la zone que vous obtenez mis en place tout de suite. Comme vous le répétez sur vos dessins pour la classe, n' oubliez pas de poster votre travail. Ah, grande partie de la compréhension de l'accessibilité consiste à voir le contenu avant et après l'utilisation d'une technique de Tuller et à voir comment les autres ont abordé leurs solutions de conception pour l'accessibilité 4. Navigation avec les troubles des compétences de moteur: avant de nous lancer dans la navigation avec des déficiences motrices, je veux parler un peu de la navigation en général, donc la navigation est le processus de déplacement à travers ce site. Par exemple, si je suis sur le site d'achat en ligne, je navigue à travers les options pour les chaussures et le processus actuel étape par étape d' achat de ces chaussures. La navigation consiste également à vous orienter avec l'endroit où vous êtes sur le site et où vous êtes dans une page de ce site. Par exemple, si je suis sur le site de nouvelles en ligne, je suis en mesure de localiser la navigation principale. Les principales manchettes de la navigation de pied de page peuvent être affectées à la fois par les déficiences motrices et par les déficiences visuelles. Dans cette leçon, j'aborderai ce que sont certaines de ces déficiences motrices et comment rendre les sites accessibles afin qu'ils ne soient plus un obstacle. Les déficiences motrices inhibent l'utilisation de certains outils et gestes. Parmi les exemples de troubles de la motricité, mentionnons la paralysie cérébrale, l'arthrite, canal carpien ou la fracture des doigts, pour n'en nommer que quelques-uns. Les déficiences peuvent rendre l'utilisation d'une souris ou d'un clavier difficile. Par exemple, si mon doigt était blessé, il pourrait être difficile d'utiliser les boutons de ma souris ou de taper à un rythme normal. Les déficiences motrices peuvent également rendre difficile l'utilisation d'un appareil mobile. Par exemple, si je me casse le pouce, envoyer des SMS ne serait pas aussi facile. Et non plus utiliser certains gestes, comme le pincement pour zoomer pour aider les personnes ayant des déficiences motrices. Il y a une variété de technologies d'assistance disponibles. La technologie d'assistance est parfois abrégée ou appelée T. Quelque 80 comprend une souris spéciale, un clavier spécial ou seulement un clavier. Par exemple, si un utilisateur utilise uniquement un clavier, il peut utiliser la touche de tabulation pour naviguer vers divers éléments du site. Je vais entrer plus en détail sur la façon dont cela fonctionne dans un peu. Les sites Web peuvent également avoir 80 fonctionnalités conviviales, ce qui rend l'utilisation de 80 sur leur site Web beaucoup plus facile. Maintenant, regardons des exemples d'utilisation seulement d'un clavier pour naviguer. abord, je vais vous guider à travers un site difficile à naviguer, puis je vais vous guider à travers un site facile à naviguer. Alors maintenant, je vais essayer de naviguer sur le site Home Depot, en utilisant uniquement mon clavier. Quelque chose a frappé Tab et il semble que je suis le long de l'en-tête supérieur, et maintenant je suis dans la recherche. Mais je n'arrive pas à trouver où je suis en ce moment. Et de retour sur mon compte. J' essaie d'aller à la principale maintenant. Je vais essayer de chercher des miroirs. Donc je pense que c'est sous la maison pour les meubles en maïs et frappe Entrée. Et maintenant, je suppose que je peux aller dans le menu. On dirait que je suis toujours au sommet maintenant. Définit un peu frustrant. Maintenant, je ne sais pas du tout où je suis, et je continue de frapper Tab. Hum et je ne sais toujours pas où je suis, et je ne peux pas me trouver. D' accord. On dirait que je suis arrivé au secondaire maintenant, et je veux aller dans le menu que je viens d'ouvrir, mais je n'arrive pas à y arriver. On dirait que j'ai pu y arriver, mais ça a pris beaucoup de temps. On dirait que j'ai pu y arriver, Je ne m'attendais pas à passer par tous les autres éléments de navigation. Maintenant, jetons un coup d'oeil à un autre site ici. Je vais regarder le site Ari i Dot Com, et je vais chercher des mousquetons. ce moment, je passe, et je suis au Petr, et maintenant je suis à la recherche et je peux voir où je suis. Donc maintenant sur le mai maintenant si bon à grimper et tout de suite quand j'ouvre le menu Grimper, mes points de navigation sont à l'intérieur de ce menu de montée, contrairement au site Home Depot où j'ai dû passer par le reste de la navigation. C' est donc un peu plus complexe parce qu'il s'agit d'un site de commerce électronique et qu'il y a beaucoup à faire. Mais au moins, c'était assez facile de trouver ce que je cherchais. Mettez en pause la vidéo et essayez de regarder certains de ces sites par vous-même, en utilisant l'onglet Onley de votre clavier autour du site et voyez où vous finissez. Tu vois où tu es ? Les choses sont-elles sélectionnables ? Les choses sont-elles impossibles ou frustrantes ? Considérez que c'est ce que seuls les utilisateurs ont à traiter. Ce qui est bien, c'est qu'avec l'accessibilité la plus courante devient, il est plus difficile de trouver des sites qui ne sont pas conviviaux au clavier. Et c'est une bonne chose. Ceci est une note rapide si vous utilisez le safari. Si vous utilisez le safari, vous devez activer le contrôle de l'accessibilité, sinon vous ne serez pas en mesure de naviguer dans le safari, accéder à vos préférences, puis aller à Avancé, puis accédez à Accessibilité et cochez la case qui dit pressé doivent mettre en surbrillance chaque élément sur une page Web. Cela garantira que lorsque vous appuyez sur la touche de tabulation, il passera à l'élément suivant de la page. Dans cet exemple, les informations révélées lorsque vous survolez un élément doivent également être conviviales au clavier . Alors allez-y et regardez devant ma vue. Et ils disposent de ces conseils d'outils où vous pouvez survoler et en savoir plus sur ces éléments spécifiques. Alors essayons. Utilisation de l'anarchie étaient seulement et avoir à ces conseils d'outils pour voir si nous pouvons accéder au contenu. Donc, il semble que je suis en train d'avoir à travers les boutons et il est allé juste à la page donc il ne semble pas que les conseils d'outils air clavier accessible, ce qui peut être vraiment frustrant si vous êtes seulement nous avons naviguer est à travers un clavier seulement. Alors maintenant, regardez la page de prix du lin, et nous pouvons voir qu'ils ont aussi des conseils d'outils, et vous pouvez passer le curseur sur eux. Voyons donc si on peut y accéder avec un clavier seulement, et on dirait que c'est possible, ce qui est vraiment sympa. Donc, c'est génial, car maintenant vous pouvez accéder aux info-bulles avec le clavier uniquement et obtenir ce contenu supplémentaire. Les appareils mobiles ont 80 fonctionnalités conviviales, ce qui permet aux utilisateurs de modifier les gestes par défaut et de les remplacer par d'autres commandes. Je vais vous montrer une démonstration rapide ici d'une autre méthode de pincement et de zoom sur l' iPhone. En règle générale, vous pouvez utiliser un geste de zoom avec votre pouce et votre index pour pincer, zoomer et zoomer sur votre écran. Mais si vous aviez un pouce cassé, c'est vraiment difficile et presque impossible de le faire. Donc, à la place, vous pouvez utiliser la fonction tactile d'assistance, qui vous permet de faire le geste de zoom de pension avec seulement l'utilisation d'un doigt. Regardons quelques techniques pour concevoir le site afin qu'ils soient plus faciles à naviguer. Vous voulez vous assurer que les gens peuvent naviguer dans un ordre logique sur Ari, je cite. Vous pouvez prédire où vous allez passer par la suite. Vous souhaitez également mettre en évidence l'élément qui est en avant afin que les utilisateurs sachent où ils se trouvent sur le site. Lorsque vous avez une grande navigation, pensez à fournir des liens de navigation saut. Ce sont les premiers liens sur le site où les gens peuvent les sélectionner pour accéder à leur section désirée. De cette façon, ils n'ont pas à travers plusieurs éléments. Chaque fois que la page se charge, ils ne s'affichent qu'à l'onglet afin qu'ils ne perturbent pas le vôtre. Je, cependant, les éléments doivent également être accessibles au clavier. Il s'agit d'une technique avancée, mais vous pouvez fournir des raccourcis clavier. raccourcis clavier sont des combinaisons de touches. Conflit des gens. Pour effectuer une action, Gmail dispose d'une liste de raccourcis clavier que vous pouvez utiliser pour afficher cette touche shift. Et la question Marquis. Si vous décidez de créer des raccourcis clavier, assurez-vous qu'ils n'interfèrent pas avec les commandes du clavier du lecteur d'écran. Qu' est-ce qui est sympa avec ces raccourcis clavier ? Y a-t-il également un excellent choix pour les utilisateurs puissants, car ils peuvent utiliser ces commandes pour fonctionner rapidement ? Examinons certaines techniques de conception de sites afin qu'ils soient plus faciles à naviguer et à créer. Le document est un document d'ordre de navigation. Ce document montre comment quelqu'un doit naviguer dans la conception ici. Je prends un dessin sur ma page Web, et j'ajoute des annotations à l'ordre de navigation. J' essaie de rendre l'ordre logique. Je recommande fortement de collaborer avec d'autres concepteurs, développeurs ou experts en accessibilité. Je suis sûr que le document fonctionne pour toutes les parties. Un autre outil que vous pouvez essayer est le prototypage. Certains de vos dessins. Travailler avec un développeur, observez certaines des interactions afin que vous puissiez voir comment la navigation pourrait fonctionner. D' autres outils comprennent les tests de convivialité, les tests d'accessibilité avec les utilisateurs finaux vraiment. Il peut être difficile de trouver des participants ayant une déficience, mais vous pouvez simuler ce qu'ils pourraient devoir faire. Par exemple, vous pouvez demander au participant sans utiliser votre souris. Essayez de commander de la nourriture sur le site. La validation de vos conceptions est importante pour garantir une bonne expérience utilisateur. Tout expérimentation et test que vous faites vous aide, vous et vos coéquipiers, à mieux comprendre l'accessibilité. Navigation. Parlons maintenant de la façon dont vous pouvez appliquer ces outils et techniques à votre projet. Pour votre projet. Annotez l'ordre de navigation de votre conception. Assurez-vous qu'il suit un ordre logique et ne saute pas lorsque vous avez terminé. Partagez votre livraison ble. Partagez également votre processus sur la façon dont vous abordez la navigation sur votre page et n'hésitez pas à poser des questions. 5. Navigation avec les navigateurs avec des navigateurs avec des troubles de la vision: comme nous l'avons appris dans la dernière leçon. La navigation consiste à se déplacer dans le site, mais aussi à savoir où vous êtes. Dans cette leçon, je vais passer en revue certaines des déficiences visuelles qui peuvent affecter la capacité d'une personne à naviguer. Je vais également vous faire part de la façon dont vous pouvez concevoir une expérience plus accessible. Il existe plusieurs types de troubles de la vision, mais nous pouvons les regrouper en deux catégories. Vision partielle, perte et absence de vision. Parmi les exemples de perte partielle de la vision, mentionnons le glaucome ou la dégénérescence maculaire. Aucune vision ne comprend la cécité complète. Je vais vous montrer comment les types de déficience visuelle peuvent influer sur la façon dont les gens accèdent au contenu sur les sites Web. Dans cet exemple, nous regardons un site Web avec une vision complète. Maintenant. C' est une vue qui simule la vision affectée par le glaucome. Dans cet exemple, votre champ de vision devient très étroit. La simulation n'est que partiellement précise. Généralement, pour voir plus de gens se déplacer la tête autour de regarder un site Web avec une vision complète. Maintenant, c'est une vue qui simule la vision affectée par la dégénérescence maculaire. Dans cet exemple, il existe des correctifs que vous ne pouvez pas voir. La simulation n'est que partiellement précise à nouveau. Typiquement, les gens bougent la tête pour voir, mais toujours pas très pratique. Si vous voulez simuler l'une ou l'autre de ces troubles de la vision, vous pouvez facilement le faire avec vos mains pour simuler le glaucome, faire un poing avec une ouverture étroite comme celle-ci, et essayer de lire certains sites Web à travers cette ouverture étroite pour simuler dégénérescence maculaire . Il suffit de mettre votre paume devant votre vue et d'essayer de lire certains sites Web avec l'obstruction . Certaines technologies d'assistance pour les personnes ayant une vision partielle comprennent un écran de clavier spécial, feux magna et des lecteurs d'écran. Je toucherai plus sur les lecteurs d'écran Dans la partie sans vision de cette leçon, une loupe d'écran fait exactement ça. Il agrandit le contenu d'un écran. Parfois, les couleurs peuvent être modifiées pour augmenter le contraste des couleurs. La plupart des systèmes d'exploitation disposent d'une loupe d'écran intégrée. Si vous voulez les tester plus tard, j'ai fourni des informations dans la section de la ressource est de cette classe. Une autre déficience visuelle est la cécité complète. Les personnes sans vision doivent se fier à d'autres méthodes de navigation sur les sites. Par exemple, ils peuvent utiliser un lecteur d'écran pour leur lire le contenu de l'écran. Pour avoir une idée de ce que c'est, écoutera un menu téléphonique de la DNB de la Caroline du Nord. Faisons semblant de vouloir renouveler l'immatriculation d'un véhicule, écouter le clip et réfléchir à la pertinence du contenu, votre orientation dans le système et à votre modèle mental par rapport au modèle des systèmes. Merci d'avoir appelé la Division des véhicules automobiles de la Caroline du Nord. Vous pouvez maintenant obtenir le statut de votre permis de conduire, donc pas le système de réponse de la police. S' il vous plaît écouter attentivement. options de menu trouvées ont changé. Voici un message spécial de la Caroline du Nord D M V. Planifier d'attraper un vol visitera une base militaire. Il y a de nouvelles exigences pour les idées en Caroline du Nord. C' est parce que la loi fédérale sur le Real I D exige de nouvelles normes de sécurité pour la construction d'avions et l'entrée dans les installations fédérales. La Caroline du Nord que vous aimez, nous avons besoin de l'exigence fédérale. Apprenez à obtenir votre vrai i d. à N. C. Real. Je ne vais pas fixer un rendez-vous pour vous faire réaliser la presse sur 9. Sinon, appuyez sur un pour continuer le menu chose Pour des questions sur la vie de votre conducteur dans la presse un ou dire permis d'assurance Appuyez sur deux ou dire assurance pour les plaques d'immatriculation, taxes foncières admissibles robe trois ou un véhicule pour le bureau emplacements préparés pour ou dire emplacements pour tous les autres Services DMG Appuyez sur cinq, forçant d'autres à le répéter pour le plan d'enregistrement international, appuyez sur un ou, disons licence internationale, Investir la confiance ou dire, dossiers de trafic de vol. Appuyez sur trois ou dire accident de bus scolaire dans la sécurité routière, appuyez sur quatre ou dire sécurité. Pour répéter son menu, appuyez sur neuf ou dites répéter pour revenir au menu principal, appuyez sur la touche livre ou, par exemple, le menu principal pour l'assistance opérationnelle. Appuyez sur zéro ou, disons , opérateur, avez-vous pu déterminer quelle sélection faire ? C' est en fait une tâche que j'ai essayé d'accomplir plusieurs fois, et je l'ai trouvée si frustrante. J' ai presque décidé d'aller physiquement au D.M.B . D.M.B Peut-être que pendant que vous écoutiez, vous avez pensé à combien cela serait plus facile si vous pouviez juste voir où le trouver sur le site, et ce serait probablement le cas. Mais c'est une expérience que les utilisateurs non voyants auraient au quotidien, et c'est pourquoi il est important que nous ayons conçu le site afin qu'ils puissent avoir un temps facile à naviguer à travers eux. Les personnes ayant une vision faible utilisent souvent des compteurs d'écran pour naviguer sur les sites Web et APS, un lecteur d'écran, est une application qui lit le contenu à l'écran à la personne. Le lecteur d'écran lit également une partie du code pour les aider à interpréter le contexte de ce qu'ils écoutent. Par exemple, si le lecteur d'écran est sur le point de lire une liste à puces, vous laisserez la personne noter qu'il s'agit d'une liste à puces de cinq éléments, puis je vais aller Alan lire ces cinq éléments. technologies d'assistance supplémentaires comprennent un code accessible et convivial. Ces éléments sémantiques dans les attributs de l'aria, combinés avec un lecteur d'écran, aident les utilisateurs à comprendre le contexte de ce site. Il y a plusieurs lecteurs d'écran disponibles lorsque vous avez le temps. Je vous encourage à en essayer au moins un et à voir comment cela fonctionne. Pour Windows, il y a Envy D A, qui est gratuit. Il y a aussi Jaws, qui est l'un des lecteurs d'écran les plus utilisés disponibles, et vous pouvez essayer une démonstration gratuite de celui-ci. Enfin, il y a le narrateur, qui est inclus dans Windows. Quand j'ai essayé le narrateur, je n'ai pas eu beaucoup de chance. Je recommande d'essayer et VD a ou Mâchoires à la place. Mac OS et IOS inclut la voix off pour leur lecteur d'écran. Android Screen Reader est appelé Talk Back, et il est inclus dans le système ainsi. Écoutons un lecteur d'écran en action. C' est de la voix off sur un Mac. Il va lire la voix off à vue lointaine sur Jeté Off Our Travel magazine et guide Google Chrome Window hors de notre image vide slash net lien. Maintenant, je vais naviguer sur le site. La plupart des gens ne lisent pas un site Web du début à la fin. Au lieu de cela, on épluche généralement une page. Vous pourriez faire les gros titres et plonger plus profondément dans une sous-rubrique d'intérêt. Les personnes qui utilisent des lecteurs d'écran lisent de la même manière. Ils ne veulent pas écouter une page entière du début à la fin, mais ils cherchent quelque chose pour aider avec cet écran. Les lecteurs peuvent souvent sauter un en-têtes, puis je ne pouvais pas naviguer à un titre d'éléments sémantiques d'intérêt dans les éléments HTML R qui ont un sens associé à um. Parmi les exemples, mentionnons la balise de formulaire pour un formulaire, la balise de table pour indiquer un tableau et une balise H un pour le niveau de titre 1. Les lecteurs d'écran prennent en charge ces éléments, ce qui aide l'utilisateur à comprendre où ils se trouvent et ce qu'ils écoutent. Quelques exemples d'éléments non sémantiques incluent la balise DIV et la balise SPAN. Autre code accessible et convivial comprend Ari attributs Aria représente des applications Internet riches et accessibles . Et ces attributs encodent nos composants qui aident à rendre les riches. L' expérience Web est accessible. Certains composants de base incluent, mais ne sont certainement pas limités à des rôles comme peut-être dans la recherche de contenu de navigation et ainsi suite. Les lecteurs d'écran Propriétés et Etats prennent en charge ces attributs, ce qui aide l'utilisateur à comprendre où ils se trouvent, ce qui se passe et ce qu'il écoute. Teoh. Voici un guide visuel Pour aider à démontrer le fonctionnement des attributs de l'air, Aria attribue à l'écran les zones d'étiquetage de l'écran. Le lecteur peut relayer cet écouteur d'information pour fournir un contexte. Lorsque j'allume les points de repère de la région, vous pouvez voir comment les zones sont identifiées. Par exemple, c'est la bannière. Il s'agit d'une navigation, et c'est la zone de contenu principale. Dans cet exemple, il y a un guide sur la façon dont les niveaux de titre sont à nouveau identifiés. Ceci est juste une démo visuelle sur les sites réels. Ce balisage est dans les coulisses et n'est pas visible pour les utilisateurs finaux. Mettons ceci ensemble un exemple. Vous aurez besoin d'un stylo et d'un papier pour cette activité. Je vais jouer à des clips audio. Le premier lecteur d'écran lisant un site Web qui a été créé avec du code non accessible . Le deuxième clip est le même site Web créé avec du code accessible. Lorsque vous écoutez le premier clip, essayez de dessiner un cadre métallique de ce que vous entendez. La US Daily News tendance famille de nouvelles et Indiana trouve un dinosaure vivant. Tard hier, une famille visitant une aire de jeux locale a découvert un vivant T. Rex et Liverpool, Indiana Trending news, Sports divertissement. Ok, maintenant je vais jouer le second clip. Il s'agit d'un lecteur d'écran qui lit un site Web créé avec du code accessible. Pendant que vous écoutez ce clip, essayez de dessiner un cadre métallique de ce que vous entendez. Vous êtes la rubrique du contenu Web USA Lee News Lien de niveau 1 La liste des US Daily News. Trois éléments lien lien de nouvelles tendances lien Sports lien niveau de titre de divertissement à nouvelles locales niveau 3 Famille et Indiana trouve un dinosaure vivant. Tard hier, une famille visitant une aire de jeux locale a découvert un T. Rex vivant et Liverpool, Indiana. Comment s'est passé l'écoute de ces clips ? C' était un second clip. Plus facile à comprendre ? Selon la façon dont votre site Web est revêtu, cela pourrait être plus facile ou plus difficile pour quelqu'un qui s'appuie sur un orteil de lecteur d'écran. Comprendre le contenu. C' est pourquoi il est super important que cela puisse être écrit d'une manière qui aide un lecteur d'écran fournir ce bon contexte. Écouteurs d'orteils. Maintenant, jetons un coup d'oeil au site Web. Les deux clips audio décrits. Voici à quoi ressemblent les sites Web réels. En fait, ils ont l'air exactement le même. Est-ce que vos cadres filaires ressemblent généralement au site Dans le deuxième clip, code sémantique et les attributs ari ont été utilisés. Cela aide le lecteur d'écran à identifier les éléments afin que vous puissiez obtenir le contexte de l'information en cours de lecture. Ce qui est important à noter, c'est que vous pouvez obtenir le même affichage exact, mais avec deux jeux de codes différents. Donc, vraiment utiliser du code accessible n'a aucun effet sur les résultats de votre site. Voici des captures d'écran du code utilisé pour créer l'exemple de site Web. Celui de gauche est un manteau inaccessible. Celui de droite est un code accessible et comprend des éléments sémantiques et des attributs d'aria. Il y a quelques techniques que vous pouvez utiliser en approchant. Solutions pour naviguer leur 1er 1 est de déterminer l'ordre de navigation de votre site, qui est ce que nous avons discuté dans la leçon sur la navigation avec des déficiences motrices. Non seulement cela aide les déficiences motrices. Mais déterminer comment quelqu'un devrait naviguer sur le site aide également les personnes ayant une déficience visuelle . Je vous encourage à travailler en collaboration avec vos coéquipiers de conception et de développement pour déterminer quels attributs Ari fonctionnent le mieux. Les développeurs peuvent avoir une bonne idée des attributs Ari, mais c'est à vous, en tant que concepteur, de déterminer lequel offre la meilleure expérience utilisateur. Déterminer la hiérarchie de l'information est une autre technique à considérer dès le début. Commencé dans une trouvaille, les niveaux de cap des niveaux vont de H un à H six. En règle générale, le niveau de titre H un n'est utilisé qu'une seule fois, c' est-à-dire pour le titre principal. Lorsque vous déterminez le modèle de vos niveaux de titre, vous pouvez les documenter dans un guide de style pour en faciliter la consultation. Et enfin, fur et à mesure que vous concevez, assurez-vous de fournir une expérience cohérente. Lorsque les gens visitent votre site, ils forment un modèle mental dans leur tête. Par exemple, après avoir utilisé quelques pages, ils peuvent connaître l'ordre des éléments dans la navigation principale. Il les aide à comprendre votre site et à accéder plus rapidement au contenu. Cependant, si vous changez les choses dans la navigation, cela perturbe votre modèle mental et devient déroutant. Semblable à ce que vous voulez vous assurer que vous ne sautez pas, les niveaux de titre sur un écran, par exemple, vous ne voulez pas avoir un H deux, puis suivez immédiatement cela avec un H, l'auditeur se demandera ce que est arrivé à la H trois et si en quelque sorte ils se sont perdus sur la page à nouveau, un outil que vous pouvez utiliser le document d'ordre de navigation. En plus d'inclure la commande, vous pouvez identifier tous les repères de l'aria pour faciliter la navigation. Je recommande fortement de collaborer avec d'autres concepteurs, développeurs, experts en accessibilité pour veiller à ce que le document fonctionne pour toutes les parties. Comme pour d'autres leçons, vous pouvez essayer de prototyper certaines de vos conceptions ou essayer la convivialité ou l'accessibilité, tester une partie de l'interaction En écoutant avec un lecteur d'écran, vous pouvez avoir une idée du bon fonctionnement des choses. Vous pouvez vous demander : Les gens qui naviguent peuvent-ils vraiment accomplir des tâches ? Est-ce que le flux se rencontre ? Les attentes des utilisateurs sont une redondance lors de l'écoute d'un lecteur d'écran. Un autre outil que vous pouvez utiliser pour simuler une déficience visuelle est un simulateur de vision sans café . C' est un plug in disponible sur chrome et Firefox. Vous pouvez activer et désactiver différentes simulations de déficiences pour avoir une idée de ce à quoi ressemble votre site Je ne l'utilise généralement pas pour faire du travail de conception, mais c'est un excellent outil pour simuler des scénarios pour aider à construire de l'empathie. L' outil Wave est un vérificateur d'accessibilité pour les développeurs Web. Vous pouvez l'essayer en allant à Wave dot Web name dot org org. C' est un bon moyen de vérifier si vous répondez aux critères d'accessibilité de votre site. Il est disponible est un outil en ligne et une extension Chrome et Firefox. Puisque nous devrions concevoir avec l'accessibilité à l'esprit, cet outil sert du vérificateur. Une fois que votre conception a été implémentée de cette façon, vous pouvez voir tout ce que vous ou votre équipe avez pu manquer. Vous pouvez essayer d'utiliser ceux d'un audit de base de votre site. Si vous essayez d'identifier par où commencer à intégrer l'accessibilité pour la conception de votre page Web , indiquez les niveaux de titre et les repères d'aria que vous pourriez avoir. C' est à votre discrétion que vous voulez les identifier. Vous pouvez suivre mon style ou trouver le vôtre. L' objectif est de s'assurer que vos coéquipiers comprennent les annotations que vous avez faites. Une fois que vous avez terminé, partagez la façon dont vous avez marqué le titre que les points de repère Aria. Le partage est une excellente occasion de voir et de s'inspirer de la façon dont les autres communiquent ce type d'information 6. Comprendre les éléments visuels avec de la couleur: dans cette leçon, je vais parler de la façon dont la cécité des couleurs peut affecter la compréhension des éléments visuels . Je vais passer en revue les techniques que vous pouvez utiliser pour rendre vos conceptions plus accessibles, et je parlerai de certains outils que vous pouvez utiliser pour rendre votre travail plus facile. Avec la cécité des couleurs, une personne a un manque de capacité à voir certaines couleurs, ce qui signifie qu'elles sont de la couleur. Le spectre est réduit, ce qui signifie qu'ils peuvent avoir de la difficulté à identifier les éléments par couleur ou avoir de la difficulté à distinguer les éléments d'un manque de contraste dans les couleurs. Je vais aller de l'avant et vous montrer quelques exemples de la façon dont cela peut affecter ce que les gens voient. L' exemple à gauche est à quoi ressemble le site Marshmallow Peeps avec une vision non affectée . Exemple à droite est à quoi ressemble le site Marshmallow Peeps. Si vous avez essayé de connaître Pia avec cet exemple, il est presque impossible d'aider les peeps jaunes des Peeps roses. Le contraste des couleurs est une différence entre deux couleurs. Dans cet exemple, les Peeps jaunes n'ont pas assez de contraste de couleur avec les Peeps roses. Lorsque le contraste des couleurs n'est pas assez élevé, il peut être difficile de distinguer les différents éléments Examinons les problèmes de cécité des couleurs en termes d'élément d'interface utilisateur dans cet exemple, qui bascule est en position active avec vision non affectée ? Vous pouvez dire que c'est le bas, et c'est parce que c'est vert, qui est généralement un indicateur d'un non-état. Maintenant, regardons le même exemple que si vous aviez un chrome au-dessus de la cécité aux couleurs de la CIA. Dans cet exemple, il est difficile de savoir quel bascule est activé car les deux sont de la même couleur. Et c'est pourquoi il est vraiment important d'éviter d'utiliser la couleur Onley pour vous différencier des éléments. Cela est particulièrement vrai pour les éléments importants, comme ceux qui peuvent affecter la vie privée ou la sécurité. Maintenant, je vais parler des techniques que vous pouvez considérer lors de la conception avec la couleur. abord, vous souhaitez fournir suffisamment de contraste de couleur pour les éléments avec lesquels les utilisateurs interagissent, par exemple, boutons, les menus, messages d'erreur, les en-têtes, etc. Eh bien, CAG 2.1 indique que pour un niveau double A, le rapport de contraste doit être d'au moins 4,5 à 1 pour le texte normal et 321 pour le texte volumineux . Le texte volumineux est considéré comme ayant au moins 14 points et gras, ou au moins 18 points pour le niveau Triple A. Le rapport de contraste doit être d'au moins 7 pour 1 pour le texte normal et de 4,5 pour 1 pour le texte volumineux . Une autre technique consiste à utiliser plus d'un traitement visuel pour distinguer un élément. Par exemple, dans ces messages de bannière, le contexte de couleur n'est pas seulement indiqué par la couleur, mais aussi par des symboles. Visitons notre exemple précédent U avec les interrupteurs à bascule ici, nous avons ajouté un autre indicateur visuel pour aider l'utilisateur à distinguer celui qui est sur celui avec le tchèque signifie qu'il est allumé, et celui avec le X signifie qu'il est désactivé . Même si vous avez maintenant un aveuglement des couleurs, vous pouvez déterminer quel état est activé ou désactivé. Maintenant, je vais parler de certains outils que vous pouvez utiliser pour aider à assurer un contraste de couleur correct. Un outil que j'aime utiliser est un analyseur de contraste de couleur. C' est une application autonome pour Windows et Mac. Il est disponible gratuitement sur le site Web du groupe Paciello, et je vais faire une démonstration rapide du fonctionnement de cet outil. C' est assez simple, donc ce que je vais faire, c'est l'ouvrir, et je dois juste choisir une couleur de premier plan. Dans ce cas, c'est le bon texte, et je vais juste utiliser l'outil pipette. Choisissez le grand texte et puis je vais choisir la couleur de fond, qui encore une fois je vais utiliser l'outil pipette, et c'est ce vert pâle. Et puis je verrai que j'ai échoué à tous les niveaux de contraste des couleurs. Je peux également utiliser cet outil pour déterminer quelles couleurs je peux utiliser pour faire le niveau approprié de contraste de couleur. Alors allez-y et choisissez ce bleu et je changerai le texte en noir. Et ici, il dit que j'ai passé tous les différents niveaux d'exigences de contraste de couleur. Un autre outil que j'aime utiliser est le Stark Plug in, qui est disponible pour Sketch et Adobe X'd. Il est disponible gratuitement chez Get Stark dot Co. Je vais faire une démo rapide de la façon dont Stark fonctionne dans le croquis pour le branchement Stark in. Tout ce que vous avez à faire est de sélectionner deux calques, donc je vais sélectionner le texte en arrière-plan. Nous allons aller de l'avant et aller à plug ins, stark et vérifier le contraste, et il me donnera les résultats du contraste de couleur, et dans cet exemple, j'ai échoué à tous les niveaux de contraste de couleur, c'est ce que je peux faire ici est juste de continuer à ajuster les couleurs jusqu'à ce que j'obtienne les couleurs que je veux et passe les niveaux de contraste dont j'ai besoin pour votre projet. Utilisez l'analyseur de contraste de couleur et vérifiez les contrastes de couleur des éléments de votre conception. Répondent-elles aux exigences minimales ? Visez une note de passage pour le travail AG 2.1 niveau double A. Si la couleur est ne passe pas, que feriez-vous pour les changer Lorsque vous avez terminé, assurez-vous de partager vos conceptions avant et après et dites-nous votre approche pour changer le couleurs. 7. Comprendre les éléments visuels sans vision: dans cette leçon, je vais discuter de la façon dont avoir une vision partielle ou nulle peut affecter la capacité d'une personne à comprendre les éléments visuels. J' aborderai également les technologies d'assistance disponibles pour tenir compte de ces déficiences, et je vous expliquerai certaines techniques que vous pouvez utiliser pour offrir une expérience accessible. Lorsque vous avez une vision partielle, vous pouvez ne pas être sûr de ce qui est affiché à l'écran. Vous pourriez Onley compter sur un lecteur d'écran. Si le contenu peut être détecté par le lecteur d'écran, vous risquez de manquer les informations clés. Ensuite, essayons cette nouvelle simulation de vision. Je vais afficher un écran noir pour simuler que vous n'avez pas de vision. Oh, si bien. C' était hilarant. C' était génial, n'est-ce pas ? As-tu aimé ce que j'ai vu dans la simulation que tu n'as pas pu voir, donc tu n'as pas vécu ce que j'ai fait. Et c'est comme ça. Si un site ne fournit pas d'alternatives aux utilisateurs pour accéder au contenu juste pour que vous ne vous sentiez pas laissé de côté, je vais vous montrer ce que j'ai trouvé drôle. Voilà ce dont je riais. C' était un cadeau d'un paresseux qui tombait. Nous allons maintenant parler de la technologie d'assistance disponible pour aider à rendre les éléments visuels accessibles aux personnes ayant une vision partielle ou nulle en combinaison avec des lecteurs d'écran. Le texte alternatif pour tout le texte en bref est la principale technique d'assistance disponible. Tout le texte est simplement une description textuelle du contenu non textuel. Les lecteurs d'écran lisent tout le texte aux utilisateurs afin qu'ils puissent comprendre ce qui est affiché. Je vais lire ce clip vidéo d'un lecteur d'écran qui lit tout le texte des images. Lien Image BMO Drea M. O. Vous êtes actuellement sur un lien à l'intérieur du contenu des pistes pour cliquer sur ce lien Lien image. Mon équipe âge I épées double problème à Mirror Castle. Aucun lecteur d'écran n'est pas parfait à 100%. Par exemple, il s'agit de Modry MOAs BMO Drea M O. Mais l'auditeur peut au moins obtenir un peu de ce qui se passe. Regardons quelques techniques pour écrire utile tout le texte pour tout le texte. Vous voulez le garder à 60 à 80 caractères et lien. Vous pouvez également laisser l'image de dans votre écran de texte. Les lecteurs peuvent détecter quand une image est présentée et ils incluent déjà l'image de Si vous incluez l'image de dans tout le texte, elle devient redondante lors de l'écriture de tout le texte. Il est important de ne décrire que ce qui est nécessaire. Demandez-vous toujours quelle est l'intention de cette image ? Et gardez à l'esprit que l'intention n'est pas toujours le sens littéral. Par exemple, ennemi à donner ou paresseux. Si vous avez des images plus compliquées, vous pouvez envisager d'utiliser les attributs de description longue ou de fournir une alternative de texte pleine longueur . Maintenant, je vais vous montrer un exemple d'alternative en texte intégral. Voici une infographie du site Web Dick Use. Do Qué se trouve aussi être entreprise d'inaccessibilité. En haut, vous pouvez voir l'infographie complète. Cette image a beaucoup de contenu, qui est trop pour mettre à l'intérieur du four tout le texte. Donc, si vous faites défiler tout le chemin vers le bas, vous pouvez voir une alternative en texte intégral. De cette façon. Toute personne qui se fie à un compteur d'écran peut obtenir les mêmes informations que quelqu'un qui est cité. Parfois, il est plus facile de comprendre comment écrire tout le texte en voyant de bons et de mauvais exemples. Dans cet exemple, nous avons un site Web pour les débutants cours de yoga, et l'image de la paresse a besoin, um, tout le texte. Un bon exemple est l'animation d'un paresseux essayant de faire du yoga mais tombant dessus même si ce n'est pas 100% précis qu'il porte. L' intention de l'image sur l'exemple est juste paresseux. Bien que c'est vrai, il manque de contexte, un autre mauvais exemple est juste GIF animé. Cela est également vrai, mais il ne fournit pas de contexte précieux et, enfin, un autre mauvais exemple. Il y a un paresseux couvert d'algues dans la rue. Il s'étire, mais il tombe. Il y a une voiture derrière lui. Il y a une étiquette qui dit, Faire un cadeau dot com. Bien que cela soit très précis, il ne fournit toujours pas les informations pertinentes à l'auditeur. De plus, toutes ces informations sont du bruit, ce qui peut contribuer à une surcharge cognitive pour les images plus compliquées. Il est préférable de résumer l'intention de l'image et de ne pas entrer dans les détails complexes dans cette capture d'écran du site Bitcoin sur la valeur de Bitcoin. Ah, une bonne description alternative serait. La valeur de Bitcoin a augmenté régulièrement depuis Juin 2017, mais a repris Décembre à plus de $19,000 chacun. Il a fortement baissé en février 2018 pour atteindre environ la moitié de cette valeur. Cela capture l'essence de ce que vous voulez que le lecteur obtenir à partir de cette image sur l'exemple d'une description serait quelque chose comme le 1er juin, la valeur était 2100 le 2 juin, la valeur est 2101 Le 3 juin, le était 2200. Je ne vais pas continuer, mais je pense que vous comprenez le point. S' ils ont l'intention de nous montrer l'essentiel de ce qui s'est passé, ce n'est pas nécessaire d'être super granulaire. Dans les cas où les images ne sont diffusées qu'à des fins décoratives, vous pouvez omettre tout le texte pour aider à rationaliser un peu les choses. Si vous disposez d'un système de conception ou d'une bibliothèque de composants, assurez-vous d'y documenter tout le texte. De cette façon. Vous n'annotez pas toujours vos créations avec tout le texte pour chaque image réutilisée. Une autre note S P G peut avoir tout le texte à, et emojis peut être lu à partir de certains lecteurs d'écran. Donc, ne vous sentez pas limité ou ne pouvez pas vous amuser à rendre les choses accessibles. Voyons comment appliquer certaines de ces techniques à votre projet. Pour votre projet. Essayez d'écrire tout le texte pour vos images lorsque vous avez terminé de publier votre travail à partager avec d'autres, parfois comprendre comment écrire bien tout le texte est livré avec beaucoup d'exemples 8. Compréhension du texte avec des troubles cognitifs: dans cette leçon, je vais parler de la façon dont les déficiences cognitives peuvent affecter la compréhension de la lecture. Ils ne vous guident pas à travers certains exemples d'écriture ainsi que les techniques et les outils que vous pouvez utiliser pour améliorer votre écriture pour plus d'accessibilité. À la fin de la leçon, je vais vous parler de ce que vous allez faire pour le texte de votre projet. Parmi les exemples de troubles cognitifs, mentionnons les lésions cérébrales traumatiques, les effets secondaires des traitements chimiothérapiques et la lecture dans une langue seconde. Lorsque des personnes ont des déficiences cognitives, elles peuvent avoir de la difficulté à comprendre l'information. Parfois, lorsque l'information n'est pas fournie d'une manière facile à comprendre, elle peut souffrir d'une surcharge cognitive. Cela signifie que c'est trop pour la personne à traiter. Cela vaut également pour les personnes qui utilisent des lecteurs d'écran lorsqu'il y a trop d'informations à écouter . Il est difficile d'analyser ce qui est important et ce qui n'est pas important. Regardons maintenant un exemple de contenu dans son état d'origine, où il n'est pas facile à lire. Ensuite, nous verrons comment je révise le texte qui se lit beaucoup plus facilement. Voici un exemple d'une recette de pizza où vous pouvez voir le contenu est difficile à lire. C' est dans un grand paragraphe, et vous devez vraiment comprendre comment le contenu est organisé. Dans l'exemple Dans la droite, j'ai retravaillé le contenu à. C' est plus facile à lire. Les lecteurs peuvent facilement trouver les ingrédients et suivre les instructions. Regardons quelques techniques pour écrire du contenu plus facile à lire. L' une des techniques consiste à écrire dans un langage simple lorsque cela est possible. Le langage simple est l'écriture où les lecteurs peuvent comprendre l'information facilement, rapidement et complètement que possible. L' écriture en langage simple réduit la charge cognitive sur le lecteur. Il facilite également la traduction d'un contenu dans une autre langue. Ceci est particulièrement important si votre site ou produit doit prendre en charge plusieurs langues lors écriture. Visez un excellent niveau en fonction de vos utilisateurs. Cependant, même si votre public est de nature technique, écrire en langage simple rend les choses beaucoup plus faciles à lire, donc c'est utile pour tout le monde. Une autre technique consiste à organiser l'information dans un format facile à lire. Lorsque vous écrivez en langage simple, assurez-vous d'utiliser des en-têtes, utiliser des listes à puces ou numérotées et de garder ses phrases concises. Lorsque vous organisez les informations, il est plus facile pour les utilisateurs d'analyser et de consommer le contenu. Plongez dans quelques outils pour vous aider à simplifier votre écriture. langage clair ne va pas. Il s'agit d'un site Web qui appuie la Loi sur l'écriture simple de 2010, qui exige des organismes fédéraux qu'ils utilisent un langage clair et compréhensible pour les communications publiques sur le site. Ils ont des directives avec Do et Dont, ainsi que plusieurs exemples pour vous aider à comprendre les concepts d'écriture. Une autre ressource que je recommande fortement est un Hemingway up. C' est un outil léger pour vous aider à rendre votre écriture claire et concise. Il mettra en évidence de longues phrases que vous devrez simplifier, et je ferai quelques recommandations de formulation. Ce qui est bien, c'est qu'il résume également votre niveau de lecture. Une autre application. Les gens utilisent Graham tôt. Il est similaire à la Hemingway up, mais fournit plus de détails. Si vous voulez plus d'aide avec la grammaire, je recommande d'utiliser celui-ci. Parlons maintenant de la façon dont vous pouvez appliquer ces outils et techniques à votre projet pour votre projet. Travaillez à rendre le texte de votre conception facile à lire. Écrivez le texte comme vous l'auriez normalement été. Copiez et collez le texte dans Hemingway ou Graham tôt et voyez à quel point il lit les attaques Wordsmith jusqu'à ce qu'il soit facile à lire pour ce projet. Vise la huitième année plus bas quand tu as fini. Partagez le texte original et votre texte révisé. Parfois, il pourrait être amusant et même ouvrir les yeux pour voir combien mieux, le texte révisé lit. 9. Compréhension de l'audio et de la vidéo: dans cette leçon, je vais examiner comment les déficiences auditives et visuelles peuvent affecter la capacité d'une personne à comprendre l'audio et la vidéo. Je vais passer en revue la technologie d'assistance disponible pour les accueillir chez les parents, puis nous parlerons de ce que vous pouvez faire pour que vos médias soient accessibles. La cécité complète est une déficience visuelle qui peut affecter la capacité d'une personne à comprendre la vidéo. Par exemple, si la personne peut écouter un film sur Li, elle peut ne pas obtenir le contexte complet sans voir les visuels présentant une déficience auditive, les gens ne peuvent pas entendre le dialogue, les signaux sonores ou la musique qui définit le ton. autres déficiences qui peuvent affecter la capacité d'une personne à comprendre la vidéo, mentionnons le fait d'être dans un environnement bruyant. Par exemple. Tu es dans un bar bruyant et tu n'entends pas ce qu'on dit à la télé. Un autre exemple est que vous regardez un film en langue étrangère et que vous ne comprenez pas la langue, donc vous ne pouvez pas comprendre ce qui se passe. Si les utilisateurs de l'air malentendants, vous pouvez ajouter des sous-titres codés aux vidéos. Les légendes apparaissent en bas de l'écran et s'affichent et s'insèrent sur ce que disent les gens dans la vidéo. Écoutons ce clip YouTube, et vous aussi, aussi, vous pouvez activer ou désactiver le sous-titrage. Alors, euh, sortons de ça en harmonie Poulets. Tu peux ? Tu peux le garder ? Ça vous dérange du tout ? On ressemble à un tas de vélociraptors sur Ted dot com. Ils ont des transcriptions interactives de leurs entretiens. Alors qu'un orateur parle, la transcription ci-dessous met en lumière les mots pour que les gens puissent suivre. Jetons un coup d'œil à la façon dont cela fonctionne. Je vis à South Central. C' est le magasin de liqueur South Central, restauration rapide, terrains vacants. Ce qui est aussi agréable, c'est qu'il s'agit d'une transcription interactive. Vous pouvez habiller la transcription, clic ou la phrase, et la vidéo va sauter à cet endroit pour les personnes malvoyantes. Ils peuvent écouter des dialogues, des sons et des vidéos, mais ils ne peuvent pas comprendre le contexte complet. C' est là que les descriptions audio entrent en jeu. Les descriptions audio décrivent l'activité de la vidéo afin que les gens puissent comprendre le contexte de ce qui se passe. Écoutons la description audio de cette vidéo. Vous l'êtes ? Il prend le siège du conducteur. Je ne conduis pas. Steve repose ses mains sur ses côtés tandis que la voiture tire sur la route. Le volant. Tournant son propre look, Prius roule dans une rue résidentielle calme. Regardons quelques techniques et outils que vous pouvez utiliser pour rendre votre audio et vidéo accessible . Lorsque vous traitez de l'audio et de la vidéo, Vous voulez vous assurer de fournir des méthodes alternatives pour les gens de comprendre cette information dans ce tableau, J'ai énuméré quelques alternatives basées sur le type de média et la déficience. Ce n'est pas parce qu' il y a une vidéo que vous devez fournir un sous-titrage codé. Si des raisons de faisabilité ou de budget vous empêchent de le faire, vous pouvez fournir une autre méthode alternative pour accéder au contenu. En ce qui concerne la création de légendes, vous pouvez suivre quelques bonnes pratiques. Tout d'abord, assurez-vous que la transcription est exacte. Cela inclut de ne pas modifier le contenu pour la longueur ou d'interpréter ce que quelqu'un a dit. Il est de votre responsabilité que la transcription soit exacte pour transmettre ce qui est réellement dit dans la vidéo ou le son. Ensuite, gardez les légendes sur deux lignes. L' exemple. Images de Netflix. Garder les légendes sur deux lignes aide pour quelques raisons. Les 2 premières lignes ne gênent généralement pas la vue. Deuxièmement, il est plus facile pour les gens de lire des lignes de texte plus courtes. Vos légendes doivent s'afficher en synchronisation avec la boîte de dialogue, mais elles doivent également s'afficher suffisamment longtemps pour que les utilisateurs puissent les lire. Bien qu'il soit tentant de rester au diapason d'un dialogue, le dialogue est trop rapide. Il se peut que les lecteurs ne soient pas en mesure de tout lire. Si vous fournissez une description de la vidéo, elle doit être concise et pertinente pour donner suffisamment de contexte à la personne. Les mêmes bonnes pratiques pour écrire tout le texte s'appliquent ici aussi. Je ne suis pas très familier avec les outils et services de transcription, mais si vous cherchez desalternatives rapides et peu coûteuses, alternatives rapides et peu coûteuses, YouTube dispose d'une fonctionnalité de sous-titrage qui tire parti de la technologie de reconnaissance vocale automatique de Google . Lorsque vous téléchargez une vidéo, YouTube commence à la sous-titrer automatiquement. C' est assez précis, et vous pouvez facilement y et les ajuster dans cette leçon. Inclure un peu la façon dont les déficiences visuelles peuvent affecter la capacité d'une personne à comprendre l'audio et la vidéo. n'y a pas d'activité de projet avec cette leçon, mais je vous encourage à consulter certaines des fonctionnalités d'accessibilité dans les sites de montré . J' ai ajouté des liens vers eux dans la liste de ressources 10. Réflexions finales: vous êtes arrivé à la dernière leçon. Nous avons couvert beaucoup de terrain, et en regardant ces vidéos et en allant au projet, j'espère que vous avez appris à penser à l'accessibilité à partir d'un UFC. Pourquoi concevoir une perspective Quand il s'agit d'intégrer l'accessibilité dans votre processus, commencer une petite accessibilité ne doit pas nécessairement être comme une ouverture. Les vannes fonctionnent par phases. Par exemple, la première étape peut être de vous assurer que toutes vos images ont toutes la texture. C' est une fois que c'est une couverture que tu peux. Nous voulons nous assurer que toutes vos couleurs ont des rapports de contraste de couleur appropriés. N' hésitez pas à passer en revue les leçons pendant que vous travaillez à intégrer l'accessibilité à votre processus de conception . Espérons en prenant cette classe, ces ressources commencent à avoir un peu plus de sens pour vous. Lorsque vous en aurez la chance, s'il vous plaît revoir la classe et sentez-vous pour vous de me suivre sur le partage de compétences. Merci encore et prenez soin