Développer pour être accessible (pour les débutants) : Créez une page web accessible !

1. Intro: Salut, tout le monde. Je m'appelle Brendan Kelly. Bienvenue au développement pour l'accessibilité, construction d'une page Web accessible Un peu plus sur moi. Je suis un développeur web frontal depuis 2009 spécialisé en HTML. CSS, JavaScript et accessibilité et divers fronts et frameworks comme angulaires et bibliothèques comme Jake Weary, j'ai, ah, retour premier diplôme en développement Web et une maîtrise en éducation des adultes. Donc aujourd'hui, je vais vous apprendre les bases de la construction d'une page Web accessible étaient de couvrir un certain nombre de domaines différents, comme les directives que nous devons suivre une telle section 50 attendre dans les lignes directrices d' accessibilité du contenu Web qui sont écrit et maintenu par les trois sièges W, puis aussi parler de l'importance de l'écriture de balisage HTML sémantique et en regardant Aria, qui est synonyme de succès d'applications Internet riches. Et puis regardez les différents attributs qui y sont disponibles et comment les utiliser. Ensuite, nous allons examiner le contraste des couleurs et comment évaluer correctement votre palette de couleurs pour assurer que vous obtenez les ratios conformes appropriés pour votre page Web. Ensuite, nous allons examiner un certain nombre d'éléments et d'attributs différents que vous pourrez ajouter à votre pagination utilisée tout de suite pour obtenir une meilleure accessibilité dès la sortie de la porte. Et enfin, ce que nous allons faire est de regarder comment évaluer correctement votre page Web à l'aide d'un clavier et d'un lecteur d'écran, et aussi réaliser quelques outils gratuits comme wave et actes, et regarder comment ceux-ci seront en mesure de vous aider à obtenir la conformité appropriée. Et puis, à la fin de ce cours, vous prendrez tout ce que vous avez appris et construisez votre toute première page Web réussie qui fournit des informations sur votre passe-temps préféré. D' accord, allons-y. 2. Qu'est-ce que l'accessibilité Web et quelles sont les directives: a commencé par parler de ce qu'est l'accessibilité du Web et de ce que sont les îlots que nous devons suivre. Wikipédia a donc une très bonne définition de ce qu'est l'accessibilité Web, et ils affirment que l'accessibilité Web est une pratique inclusive qui consiste à s'assurer qu'il n'y a pas d' obstacles qui empêchent l'interaction avec les sites Web ou l'accès à ceux-ci sur le World Wide Web par les personnes handicapées. Lorsque les sites de développement de conception correctement édités. Généralement, tous les utilisateurs ont un accès égal à l'information et aux fonctionnalités, sorte que l'accessibilité est essentielle pour les développeurs et les organisations qui veulent créer des sites Web et des outils Web de haute qualité et ne pas exclure les gens de leurs produits et services. L' accessibilité du Web et les coupes sont tous les handicaps, qui comprennent l'ouïe visuelle, déficiences physiques et cognitives. Donc, pour peigner les termes que vous entendez lorsqu'on parle d'accessibilité, il y a des technologies d'assistance et des stratégies d'adaptation, des technologies assistées, matériel et des logiciels que les personnes handicapées ont utilisés pour améliorer l'interaction avec le Web. Il s'agit notamment de lecteurs d'écran qui lisent à haute voix les pages Web pour les personnes qui ne peuvent pas lire la loupe d' écran de texte pour les personnes ayant certains types de logiciels de reconnaissance vocale et de faible vision et de commutateurs de sélection pour les personnes qui ne peuvent pas utiliser un clavier ou une souris et les stratégies d'adaptation sont les techniques utilisées par les personnes handicapées pour améliorer l'interaction avec le Web, comme l'augmentation de la taille du texte, la réduction de la vitesse buccale et l'activation des légendes. Maintenant, en vertu des deux normes et lignes directrices, qui incluent la section 5 dans les lignes directrices sur l'accessibilité du contenu Web. Le Congrès de 1998 a donc modifié cette loi de 1973 sur la réhabilitation afin d'obliger les organismes fédéraux à rendre les technologies électroniques de l'information accessibles aux personnes handicapées. En vertu de la section 5, les organismes doivent permettre aux employés handicapés et aux membres du public d'avoir accès à des renseignements comparables à ceux dont disposent les autres. Et certains des exemples de ces lignes directrices fournissent des alternatives textuelles ou des images et d'autres contenus non textuels, y compris les composants de l'interface utilisateur. Fourniture d'un sous-titrage synchronisé pour le multimédia vidéo pré-enregistré. Et 1/3 serait de fournir un ordre de lecture raisonnable et logique lorsqu'on utilise un sens de la technologie. Et on parle un peu plus de celui-là. Plus précisément plus tard, lorsque nous parlons de la sémantique et du bon déroulement ou à travers une page Web passant aux directives d' accessibilité du contenu Web , W. C. A. G pour abrégé So W. C. A. G est élaboré dans le cadre du processus des trois C en collaboration avec des particuliers et des organisations du monde entier, avec un or qui fournit une norme commune unique pour l'accessibilité du Web qui répond aux besoins des individus, organisations et gouvernements à l'échelle internationale. Donc W. C E. G couvre les mêmes normes de la section cinq attendent, mais beaucoup plus. Les lignes directrices et les critères de réussite que W. C A. G a organisés autour des quatre principes suivants, qui jettent les bases nécessaires à l'accès et à l'utilisation du contenu Web. Quiconque veut utiliser le Web doit disposer d'un contenu perceptible, utilisable, compréhensible et robuste. Ainsi, les composants de l'information et de l'interface utilisateur doivent être présentés aux utilisateurs d'une manière qu'ils peuvent percevoir. Les composants de l'interface utilisateur et la navigation doivent être des informations utilisables, et le fonctionnement de l'interface utilisateur doit être compréhensible. Et le contenu doit être suffisamment robuste pour pouvoir être interprété de manière fiable par une grande variété d'agents utilisateurs, y compris les technologies d'assistance. En vertu de chacun des principes, il existe des lignes directrices selon lesquelles les critères de réussite qui ont aidé à tenir compte ces principes pour les personnes handicapées et chacun des critères de réussite sont définis avec l'un des trois niveaux de priorité de conformité. Le niveau d'air est un niveau double A et le niveau Triple A, le niveau A établit un niveau de conformité de base et couvre un ensemble de problèmes d'accessibilité fondamentaux tels que des images textuelles alternatives , des légendes et des vidéos. niveau A est le niveau minimum de conformité. double A inclut des critères de succès supplémentaires, tels que fournir un indicateur de mise au point visible pour les utilisateurs du clavier et garantir un niveau de contraste des couleurs suffisant . double A est une priorité de la plupart des organisations car il fournit une cible raisonnable pour les sites Web et les applications Web, puis le niveau Triple A est le plus haut niveau de performance conforme à W C E G 2.1. Il a nivelé Triple A signifierait que tous les critères de réussite devraient être respectés le Il n'est pas recommandé queleniveau de conformité Triple A soit exigé est une politique générale pour sites Web entiers parce qu'il n'est pas possible de satisfaire tous les critères de succès de niveau triple A pour quelque chose de bien qui complète les normes et les lignes directrices. Suivant regardera la sémantique HTML 3. Sé, courez un long chemin: dans ce segment vidéo, nous allons parler spécifiquement de la sémantique HTML et de l'ordre des pages. Le balisage sémantique est HTML qui donne un sens à une page Web plutôt qu'à une simple présentation. Des éléments comme Header principal, beurre, knave, un bouton et ainsi de suite ont une signification spécifique et transmettent cela au navigateur de l'utilisateur et technologie d'assistance. Lors de l'utilisation du balisage sémantique, beaucoup a déjà fait pour vous nativement pour l'accessibilité. Par exemple, une balise est utilisée pour la navigation et les boutons ou pour l'interaction de l'utilisateur. Lorsqu' une page Web construite avec un balisage sémantique riche, il est beaucoup plus facile et plus efficace pour la technologie d'assistance de naviguer à travers elle et de transmettre l'information à l'utilisateur. Donc, l'utilisation de balisage enrichi ne va pas simplement rendre votre page Web nativement plus accessible. Mais cela va aussi améliorer le PDG S de votre site aussi. Une autre chose importante que vous voulez garder à l'esprit lors du développement d'une page Web pour l'accessibilité est de garder vos éléments dans un ordre de lecture approprié. Deux. Spécial. Pensez-y juste en haut à gauche en bas à droite Focus. L' ordre est important car lorsqu'un utilisateur navigue dans votre page, il aura une attente quant à l'endroit où le lecteur d'écran ou la bague de mise au point va les mener ensuite. Donc, si vous avez le nom du site dans l'en-tête de votre site, concentré, puis vous appuyez sur la touche de tabulation et qu'il a sauté dans la page ailleurs, ce serait déroutant pour l'utilisateur et un comportement inattendu. Ensuite, je veux vous montrer quelques exemples de mon balisage sémantique que j'ai utilisé dans mon projet. J' ai construit une page Web qui affiche des informations autour de vous avez besoin de restauration de voiture. Donc, d'abord, je vais vous montrer comment je décompose les sections principales de la page Web en utilisant des balises sémantiques HTML . Donc, si nous regardons à l'intérieur du corps, j'ai mon en-tête principal, ma balise principale et ma balise de pied de page principale. Et quand vous vous décomposer en chacune de ces sections, alors je commence à diviser les choses en sections plus petites, et j'ai utilisé la balise de section hnl pour noter ensuite chaque section individuelle dans chaque zone individuelle. Donc, si j'ouvre ma balise principale, cela illustrera un peu mieux ce point. Donc, vous voyez où ma première section à l'intérieur principal est mon intra graphique, puis ma deuxième section est mes éléments de lien rapide. Et dans ma troisième section, c'est ma zone de projecteurs. Et enfin, mon quatrième est mes articles en vedette. Et puis si je me casse dans mon pied de page, j'ai juste une section qui contient mon texte dans le pied de page, puis mes icônes sociales. Alors disons ça un peu plus profondément dans ma tête. Euh, j'ai ma seule section, mais à l'intérieur, j'ai ma principale H et dans ma structure de navigation. Et chaque fois que j'ai développé des sites Web, j'aimerais suivre la règle d'avoir un H dans une page, qui est toujours le nom du site dans l'en-tête. Et puis à partir de là, j'aime descendre en cascade à travers les différents niveaux de cap, niveau H 2, h 3 et ainsi de suite. Et nous voulons nous assurer que nous ne sauterons pas le niveau de la rubrique, parce que si nous le faisons, ce sera marqué et des outils d'évaluation de l'accessibilité. Alors, en passant à ma structure de navigation, j'ai, bien sûr, utilisé l'étiquette de l'odeur de l'âge pour commencer, puis j'utilise une liste inchangée. J' aime utiliser des listes inchangées chaque fois que j'ai un regroupement d'éléments connexes, et ce n'est pas seulement pour la navigation. C' est quatre articles différents ou dans ce cas particulier, bien sûr, une liste de liens et ainsi de suite. J' utilise donc mes propres listes de mots et dans chaque élément de liste est un élément de navigation, et j'ai juste une structure de navigation simple. Je n'ai pas de décrochage ou quoi que ce soit du genre. Je ne veux pas trop compliquer ça pour un projet. Donc, nous avons juste une liste régulière de liens, rien de trop compliqué et passer à la première section de la balise principale. Nous avons le graphique intra et je le marque en utilisant l'étiquette de figure à l'intérieur de la balise de figure. Nous avons juste notre image simple avec, bien sûr, notre tout texte. Et puis pour la légende, j'ai utilisé la balise de légende FIG avec une balise H 2 et une balise de paragraphe à l'intérieur. Et si vous remarquez que j'ai utilisé mon H deux, mais j'utilise une balise span pour le casser en plusieurs lignes. Ce n'est jamais une bonne idée d'utiliser plusieurs balises d'âge lorsque vous essayez simplement de diviser un titre en plusieurs lignes. Il suffit d'utiliser une balise span à l'intérieur, dit, bloc d'affichage et coup de pied à la ligne suivante. De cette façon, la technologie assistée va voir que comme un seul en-tête et ne pas lire il est, aussi. Ça va être déroutant pour l'utilisateur, puis passer à nos éléments de lien rapide. J' ai utilisé un H trois pour ce titre, puis j'ai utilisé à nouveau la liste inchangée pour chaque élément rapidement. Maintenant, certaines personnes pourraient penser qu'utiliser juste des balises d'article pour les diviser serait tout simplement trop bon, et ils seraient corrects. J' aime utiliser sur la liste ordonnée spécifiquement parce que quand un lecteur d'écran lit à travers cela , vous serez Oto simplement touche d'un élément à l'autre, ce qui , bien sûr, sera la même si vous utilisez les balises d'article. Mais le côté plus de la liste dans l'ordre est qu'il va en fait dire l'un des quatre ou deux sur quatre et ainsi de suite. Et j'aime vraiment ça. Je pense que c'est une meilleure rétroaction pour l'utilisateur. Donc, en regardant à l'intérieur de ma propre liste de commandes, j'utilise une balise A pour ces conseils rapidement parce qu'ils sont en fait des liens. Ils vont être utilisés pour la navigation. Donc, j'utilise ceux-là est mon rappeur principal, et j'ai juste une icône génial simple, combattu avec un titre simple et une légende simple Passant à mes projecteurs. J' ai juste un article simple avec un H trois dans une balise de paragraphe, puis une image d'accent sur le côté, sautant vers le bas à mes histoires principales à nouveau, j'utilise une liste inchangée. À l'intérieur de chaque élément de liste se trouve une balise de paragraphe, puis quelques balises de span pour créer la mise en page à partir d'une image et d'un texte. Et enfin, dans ma section Pied de page, j'ai juste une seule section avec une balise de paragraphe pour mon texte que les lignes à gauche , puis sur une structure nordle ist pour mes icônes sociales qui vont aligner à droite, Donc, cela enveloppe jusqu'à la sémantique html. Gardez donc à l'esprit qu'il y a beaucoup de balises HTML sémantiques là-bas, et vous voulez vous assurer d'utiliser la balise appropriée pour chaque élément spécifique que vous développez pour vous assurer que vous obtenez le plus de sens de votre page Web. Ensuite, nous allons regarder de plus près les liens et les images 4. Un aperçu de manière approfondie les liens et les images: segment de voie. Nous allons regarder de plus près les liens et les images, ces problèmes communs d'air que je vois beaucoup de mon travail, et je pense que c'est une bonne idée de prendre un peu de temps pour regarder quelques bons exemples d'utilisation. Ce que j'ai fait ici est pris ma page Web de projet et créé quelques sections supplémentaires ci-dessous où je vais illustrer quelques bons exemples d'image, quelques bons exemples de liens et puis, enfin, quelques bons exemples où nous mélangeons les deux où nous avons des images liées. regardant le premier exemple, nous avons juste une image simple avec tout le texte et le second exemple. Nous avons une image avec vide tout le texte avec une description ci-dessous, Sautons par-dessus le code et voyons à quoi cela ressemble. C' est donc ici, vous verrez que j'utilise à nouveau une liste inchangée, et dans le premier élément, nous avons cette seule image avec tout le texte descriptif. Maintenant, nous voulons nous assurer que nous utilisons tous les textes descriptifs parce que chaque fois qu'un lecteur d'écran ou une technologie d'assistance lit cette image à l'utilisateur, nous voulons nous assurer qu'ils utilisent ou comprennent complètement ce qu'est l'image et descriptif tout le Texas. Comment nous allons faire ça, sautant à notre deuxième exemple. C' est là qu'une image a une légende visuelle, et dans ce cas particulier, nous voulons laisser tous les attributs vides car cela provoquera une redondance. Si vous prenez note, la légende devient directement après l'image et la technologie d'assistance s'en chargera . Alors, lançons la voix off et voyons à quoi ressemblent ces images. Ce que je vais faire pour naviguer dans ces images, il est de maintenir vo Key enfoncée et d'utiliser mes touches fléchées gauche et droite. Maintenant, quand je dis v o Key, cela signifie option de contrôle. Si vous lisez la documentation sur la navigation en voiceoff, vo fera toujours référence aux touches de contrôle et d'option ensemble. Donc, à l'avenir, quand je dis vo, vous saurez quelles touches et parler de contrôle plus option et voix qui allait lire le texte assez vite parce que j'ai mon taux assez élevé, mais vous pouvez accéder à la sur votre machine pour l'ajuster à votre goût. Remorque de voiture vintage. Avant, si vous avez remarqué que le camion Chevy vintage avait remporté le meilleur dans le spectacle, la légende était correctement identifiée par voix off comme texte descriptif de l'image. Les plus grands problèmes que je vois avec les images sur une base régulière sont que les images n' ont pas du tout un ancien attribut ou ont un attribut vide quand un est requis. Ou il y a une utilisation de texte non descriptif pour tous les attributs. Donc, il y a deux autres choses que je veux mentionner une bonne utilisation de l'image dans le 1er 1 fera référence à ma section de projecteurs au-dessus des images de fond, une image décorative, et elle ne transmet aucun contenu. Dans ces cas, l'attribut all doit être laissé vide. Plus important encore, cependant, les images décoratives sont mieux appliquées via l'arrière-plan CSS, sorte qu'elles ne sont pas physiquement dans le flux de la page Web. Si vous devez avoir une image décorative dans la structure HTML. Ce que j'aime faire le mieux est juste d'ajouter un rôle égal à la présentation et la zone cachée est égale à true, avec le texte vide tout. De cette façon, nous nous assurons qu'elle est cachée de la technologie d'assistance et, en troisième lieu, renvoie à la section intra graphique ci-dessus. Bien qu'il ne transmette pas beaucoup d'informations, je voulais délibérément le faire dans le flux de ma page Web et d'être lu par la technologie d'assistance maintenant je veux passer à des liens. Il y a un certain nombre de choses différentes dont je veux parler concernant les liens un couple de choses qui comprennent si oui ou non le lien s'ouvre dans une nouvelle fenêtre. Bonne décoration de lien de texte descriptif et en évitant les URL redondantes. Donc, dans mes bons exemples de liens, mon premier exemple est juste un simple lien avec du texte descriptif qui ne s'ouvre pas dans une nouvelle fenêtre. Et mon deuxième exemple est un lien avec du texte descriptif mais s'ouvre dans une nouvelle fenêtre. Et ce que j'affiche ici est le moyen le plus simple d'alerter un utilisateur que ce lien s'ouvre dans une nouvelle fenêtre. C' est assez commun où l'utilisateur aura un indicateur visuel que le lien s'ouvre dans une nouvelle fenêtre et sera également lu par le lecteur d'écran à Parce que, bien sûr, ils vont lire le texte du lien et l'ouvre dans une nouvelle fenêtre. La notification est incluse dans ce texte, alors passons par-dessus le code pour voir à quoi ils ressemblent. Donc encore une fois, en utilisant mon a nordle ist et mon premier exemple est mon lien simple qui s'ouvre dans la même fenêtre avec du texte descriptif. Rien de trop compliqué qui se passe avec celui-ci. Mais mon deuxième exemple est où j'ai ouvert le lien dans une nouvelle fenêtre, utilisant les attributs cibles au vide et où inclure également les ouvertures, un nouveau texte de fenêtre à l'intérieur de la description du lien. Il existe plusieurs façons différentes de gérer cette fonctionnalité. Mais de loin le plus facile dans la seule unité dont nous allons parler dans cette classe est la simple ouverture dans un nouveau texte de fenêtre inclus dans le texte du lien descriptif sautant à la page. Il y a trois autres choses dont je veux parler concernant de bons exemples de liens. Et le 1er 1 est que nous étions sûrs d'utiliser le texte du lien descriptif tel que cliquer ici ou lire plus, n' est pas descriptif et ne fournit pas de contexte pour l'utilisateur. Peu de temps, on va se lever, voix off, et on va avoir un affichage, une liste de liens qui sont diffusés sur toute la page web. Et c'est là que tu vas vraiment pouvoir voir où ça pourrait être problématique pour nous. Donc, nous voulons toujours nous assurer que nous donnons le texte de lien le plus descriptif Quatrièmement, nous nous sommes assurés d'utiliser un indicateur autre que juste la couleur. Maintenant, vous voyez que par des liens air vert en couleur, mais ils sont également soulignés ce que les utilisateurs attendent. D' autres exemples couramment utilisés autres que le soulignement seraient combattus poids ou frontières. Enfin, nous voulons nous assurer de faire correspondre le Focus ST à notre état de vol stationnaire afin que l'interaction soit exactement la même, que vous naviguiez avec un clavier ou une souris. Alors maintenant, je veux ouvrir la voix off, et je veux naviguer à travers les deux liens que nous avons. Mais alors je veux faire apparaître la liste des liens qui sont dans la page en utilisant la route ou la fonction et voiceoff garçons sur vous avez besoin de restauration de voiture. Fenêtre Google. Vous avez besoin de contenu de restauration de voiture. Essayez-le. Ouvrez la fenêtre. Donc, en écoutant une voix off, vous pouvez clairement dire quel lien va ouvrir une nouvelle fenêtre dans laquelle on ne l'est pas. Maintenant, ouvrons la route ou l'outil et regardons la liste des liens qui se trouvent dans la page Web. Liens que vous liez sautez aux liensde contenu principal liens , liens , , règlement, règlement chimique insulte me. Trouve que tu cherches quelque chose pour essayer. Lien train de voiture clignotant. Vintage Chevy Truck a remporté le meilleur dans le spectacle liens Facebook lien Twitter clignote Lincoln, Comme je l'ai mentionné en regardant la liste des liens de la voix de son fournit, vous pouvez vraiment voir comment il serait déroutant pour un utilisateur de toutes ces listes. Juste dit, cliquez ici ou lire le lien plus descriptif. Tex aide vraiment l'utilisateur à comprendre ce que ces fuites d'air servent. La dernière fois que je veux couvrir est quelques bons exemples d'utilisation d'images liées. J' ai deux exemples ici. Pour en montrer un est juste une image simple avec tout le texte qui est enveloppé dans une balise. Et mon deuxième exemple est une image avec tout le texte vide avec une description externe qui est enveloppé dans une balise les deux exemples ressemblent beaucoup à ceux que nous avons couverts ci-dessus quand nous avons parlé d'images avec tout le texte ou des images avec une légende visuelle. Mon premier exemple est juste une image simple avec descriptif, tout le texte enveloppé dans une balise sur. Mon deuxième exemple est l'image avec des attributs vides pour la légende externe. Dans mon premier exemple, le lecteur d'écran utilisera l'image tous les attributs comme texte du lien. Et sur mon deuxième exemple, le lecteur d'écran utilisera le texte de la légende comme texte du lien visité. Lien Carlin Car Dreamer Faisons comme un lien visité. Vintage Chevy Truck a remporté le meilleur dans le spectacle, de sorte que termine les exemples que je voulais partager avec. Vous devez regarder du code et regarder les exemples en action avec voiceoff. Ensuite, on va chercher des attributs de zone et des rouleaux. 5. Attributes et rôles ARIA: Attendez. Segment suivant, nous allons couvrir la zone Spécifications, qui est écrit et maintenu par le W trois c Position diverses étaient accessibles riches applications Internet zones, un ensemble d'attributs prédéfinis utilisés pour rendre Web contenu et applications Web plus accessibles aux personnes handicapées. Ses utilisations principales avec des situations telles que le contenu dynamique et les interfaces utilisateur avancées. Où HTML, CSS et JavaScript seuls ne suffisent pas. Il existe trois catégories pour les attributs de zone. Ce sont Rolls, Propriétés et états. Les rôles sont des attributs qui aident à trouver l'élément, type ou le but, et une valeur de rôle ne peut pas changer. Un exemple. valeurs des rôles sont les propriétés ou attributs de menu, d'en-tête de barre principale et de case à cocher qui fournissent une signification ou des informations supplémentaires pour l'élément auquel il est appliqué. Un exemple. Les valeurs des propriétés sont des contrôles de zone. La zone présente des états dynamiques de zone ou des attributs qui aident à fournir des informations basées sur l'interaction pour l'élément qui s'est appliqué à et les états sont les plus susceptibles de changer au fil du temps grâce à l'interaction de l'utilisateur ou à d'autres actions. Un exemple. Les valeurs des états sont étendues. Leur zone vous a vérifié la zone de Preston sélectionnée pour rester dans le cadre de cette classe, nous ne couvrirons pas les implémentations avancées du marché régional, mais je veux vous guider à travers mon code de projet et appliquer certains des attributs de zone cela aidera à améliorer la qualité de mon balisage. Je n'aurai pas besoin d'en utiliser beaucoup parce que j'ai déjà utilisé un balisage sémantique approprié. Mais il y a quelques domaines où j'aimerais améliorer ma page. Ce que je veux d'abord faire est d'améliorer le balisage de ma barre de navigation Shell CEO. Ma liste commandée par l'ONU. Si j'ai ajouté un rouleau de barre de menu au puits, un rouleau de aucun à chaque allié et un rouleau de lien d'enseignement élément de menu utilisé maintenant un rouleau de none sur chaque allié parce que le rôle de la barre de menu rend la technologie d'assistance le reconnaître comme un menu de notre élément au lieu d'un UL réel comme il est. Donc, si vous évaluez votre page avec un outil d'évaluation de l'inaccessibilité, ces éléments sont marqués car il reconnaît l'UL comme un élément de barre de menu et non un UL où les alliés sont censés être en vous. L. Donc, vous devez appliquer une règle de zéro pour que ceux-ci soient conformes. Le deuxième domaine qui aiment parler sont l'icône dans ma ressource rapide est la section. J' ai appliqué une zone cachée égale vraie à chacune de mes images d'icônes, parce que je veux qu'elles soient vues visuellement. Mais je ne pense pas qu'il soit nécessaire que les technologies d'assistance les interprètent. Et puis, enfin, pour mes icônes de médias sociaux, j'utilise à nouveau Icône à l'intérieur de chaque balise a, et il n'y a aucun texte descriptif associé à celles-ci. Donc, ce que je pourrais faire est soit d'avoir du texte à l'intérieur des balises A qui est caché visuellement mais accessible à la technologie d'assistance. Ou simplement appliquer une antenne capable à une balise, ce que j'ai fait donc j'ai appliqué une étiquette de zone pour Facebook, Twitter et allonger. Une fois que vous appliquez, ces attributs seront en mesure de voir la différence dans la façon dont la technologie d'assistance interprète les éléments et le contenu. Faisons une voix off et naviguons dans les pages Web. Voyez comment c'est de retour à nous. Rubrique niveau 1. Vous avez besoin de travaux de restauration de voiture, de navigation, d'un élément de menu. Vous êtes actuellement chez vous. Tout le monde voulait pour l'élément de menu de fabrication avant la carrosserie. Élément de menu trois ou quatre suspensions pour quatre, et un minibar et la navigation et un fournisseur pour l'image d'arrière-plan. Restauration complète. Tu as trop deux objets. Bienvenue à vous besoin de restauration de voiture. Ceci est une petite collection de mon travail, et j'espère que vous trouverez quelque chose d'un peu rapide. Ressources. Vous êtes actuellement visité par un analyste. Lien Conseils du corps Voici quelques conseils avec des problèmes de corps un pour les liens visités Fine. Je vais avoir besoin d'aide avec un problème à 1/4 lien visité. Trouvez des cartes. Ceci est une liste de passants récemment gratuits pour les liens visités. Trouvez votre swat local moi pour faire quelques offres pour fin de liste en-tête niveau 3. Ma partie préférée de la restauration. Vous êtes actuellement au niveau trois mois même pour raconter des histoires. Vous êtes actuellement sur une liste d'éléments qui doivent être un lien visité. Doit avoir une suspension indépendante. Si un client de lien visité obtient ouvre une nouvelle fenêtre trop ivre gratuitement. Vous pouvez souvent trouver des pièces de votre projet. Le swap local rencontre un lien visité. Trouvez une liste de vos échanges locaux ici. Ouvre une nouvelle fenêtre de fin de liste et de développement pour l'accessibilité. construction conviviale liste de liens accessibles visité liens Facebook l'un des trois visités liés à trois Visitez lien Clinton gratuit tous et au moins dans l'avenir dans la description de classe ont fourni une ressource appelée guide de style allée dans des exemples où vous trouver une grande collection d'exemples d'utilisation qui incluent des implémentations de zone. Je recommande de regarder ces exemples. Si vous avez besoin d'accessibilité, aidez avec des implémentations spécifiques ou avancées, sorte que les attributs et les règles de zone sont regroupés. Ensuite, nous examinerons quelques fonctionnalités courantes que vous pouvez ajouter immédiatement à vos pages Web pour améliorer l'accessibilité. 6. Boîtier de fonctionnalités d'accessibilité: dans ce segment, je vais partager avec vous quelques fonctionnalités communes qui font partie de mon squelette de développement. Fonctionnalités répétées et requises plus faciles qui doivent faire partie de vos pages Web pour assurer la conformité en matière d'accessibilité . La première fonctionnalité dont je veux parler est l'attribut HTML Lang. Cet attribut indique au navigateur dans la technologie d'assistance, quelle langue la page Web pour le contenu doit être interprétée. J' ai un attribut Lang appliqué à la balise HTML d'ouverture. Si vous avez des sections de contenu qui sont diffusées dans différentes langues, vous pouvez appliquer des attributs de mensonge supplémentaires à ces conteneurs parents. Cette fonctionnalité couvre les directives d'accessibilité du contenu Web 3.1 point 1, qui est la langue de la page. La deuxième fonctionnalité dont je veux parler est un saut vers le lien de contenu principal. Ceci est important pour fournir une navigation efficace aux utilisateurs de clavier. Il leur permet d'ignorer les blocs de contenu répétés tels que les structures de navigation et les éléments d'en-tête afin qu'ils puissent accéder directement à la zone de contenu principale. Cette fonctionnalité peut être réalisée de plusieurs manières différentes. J' ai choisi d'avoir un ennemi vers le bas du haut de la page quand il reçoit le focus, puis faire disparaître une fois que le focus quitte l'élément. La chose importante à noter ici est qu'il est le tout premier élément à base de plantes de la page. Une fois qu'un utilisateur appelle un lien, il a sauté vers le bas à la balise d'ancrage où ils pouvaient commencer à naviguer dans la zone de contenu principale. J' ai utilisé un index négatif d'un onglet sur mes balises d'ancrage qu'il pourrait être utilisé pour déplacer l' indicateur de focus à sa position mais ne recevrait pas le focus du clavier car un utilisateur navigue dans la page. Naturellement, avec leur clavier, cette fonctionnalité couvre le contenu Web. Ligne directrice d'accessibilité 2.4 point un, qui est des blocs de contournement. La troisième caractéristique est un indicateur de mise au point cohérent. frères ont des indicateurs de mise au point par défaut, mais il y a tous différents et rarement, sinon jamais, se rencontrent. Les exigences de mon projet démontrent un indicateur de mise au point conforme au contraste des couleurs très visible et unique. Il s'agit d'un contour CSS en pointillés de deux pixels appliqué en utilisant la classe de pseudo CSS focus. La couleur principale que j'utilise est le rouge, mais je la change dans certaines des régions de mon projet afin qu'il respecte les exigences de contraste de couleur . Cette fonctionnalité couvre la ligne directrice d'accessibilité du contenu Web 2.4 point sept, qui est focalisée, visible quatrième fonctionnalité permet un zoom de page. La balise Meta de rapport fournit un attribut appelé échelle maximale. En règle générale, n'utilisez pas cet attribut, mais s'il est nécessaire pour votre projet, assurez-vous que 200 % est le minimum. Le W 3 C recommande aux utilisateurs de redimensionner le contenu jusqu'à 200 % sans technologie d'assistance . Lorsque je fais ma page Web de projet, vous avez remarqué que je ne perds pas de contenu ou de fonctionnalité, qui est un aspect important pour respecter cette directive. Une autre façon d'y parvenir est à travers des contrôles personnalisés pour ajuster le texte et ou la taille de l'élément est situé tout en haut de la page Web. Cependant, il s'agit d'une pratique moins courante. Cette fonctionnalité couvre le contenu Web. Lignes directrices en matière d'accessibilité 1.4 point quatre, qui est redimensionné. Texte. Les deux dernières fonctionnalités dont je veux parler ne sont pas tant des éléments de squelette existants, mais sont traitées de la même manière dans tout mon travail de développement. Et il y a notre cohérence entre les pages Web. Une telle navigation sur le site et l'image de marque et en utilisant le balisage sémantique. De manière générale, les en-têtes et pieds de page de navigation devraient être très proches, sinon identiques sur toutes les pages du site Web. La zone de contenu principale sera le seul élément avec de légères différences. Cela offre une expérience plus prévisible à vos utilisateurs. Cette fonctionnalité couvre le contenu Web. Lignes directrices sur l'accessibilité 3.2 point quatre, qui est une identification cohérente. Nous avons beaucoup discuté de l'importance de l'utilisation du balisage HTML sémantique et de la façon dont il améliore l'expérience de vos pages Web. N' oubliez pas de toujours choisir le balisage le mieux adapté à votre solution. Cette fonctionnalité couvre le contenu Web. Lignes directrices sur l'accessibilité. 1.3 point un, qui est info et relations afin que couvre ma fonctionnalité d'accessibilité Boilerplate. Ensuite, nous allons discuter du contraste des couleurs. 7. Contraste de couleurs: dans ce segment, nous allons parler du contraste des couleurs et de la façon de s'assurer que votre palette de couleurs est conforme. contraste de couleur adéquat est important, sorte que le texte que vous lisez par des personnes ayant une vision modérément faible, les directives d'accessibilité du contenu Web que nous devons examiner sont 1,4 point trois, qui est nommé de façon appropriée. Contraste. Il indique que la couleur du texte, qui est identifiée comme le premier plan, ainsi que la couleur d'arrière-plan que les superpositions de texte doivent avoir un rapport minimum de 4,5 à 1 pour le texte normal dans un rapport de 3 à 1 pour le texte volumineux. La première chose que nous devons discuter est que la ligne directrice ne définit pas de valeur sur ce qu'ils considèrent comme une taille de texte normale. Ils restent dans la ligne directrice. Ce texte de 18 points ou un texte en gras de 14 points est jugé assez grand pour exiger un taux de contraste plus bas afin que nous puissions le moins garder cela à l'esprit. Le rôle que je suis est de considérer votre taille de texte par défaut comme votre taille de texte normale et d'évaluer le rapport de contraste à partir de là, qui est de 4,5. La taille normale du texte est fortement débattue. Mais généralement, la taille du texte par défaut de mon développement est d'environ 14 à 16 pixels, ou 11 à 12 points. Donc, cette information à l'esprit, vous pouvez considérer la palette de couleurs pour votre site Web, mon favori lui a dit. Vérifier le contraste des couleurs est Web Buts Contraste des couleurs Checker J'ai fourni un lien vers l'outil dans la description de la classe. C' est un excellent outil où vous pouvez facilement coller ou les couleurs de premier plan et d'arrière-plan dans les entrées, et il vous fournit immédiatement un rapport où passe ou échoue. Ce que j'aime le plus à ce sujet, cependant, est qu'il vous fournit avec curseur de légèreté afin que vos paires de couleurs ne soient pas conformes. Vous pouvez ajuster une ou les deux couleurs jusqu'à ce qu'elles fournissent un rapport conforme. Je n'ai pas trouvé cette fonctionnalité pratique dans toute autre évaluation de contraste de couleur dit que j'ai utilisé la sélection de couleurs qui produisent un rapport conforme est très facile lorsque vous utilisez une valeur de couleur unie pour la couleur de premier plan et d'arrière-plan. Cependant, ce n'est pas toujours le cas. Dans les conceptions Web d'aujourd'hui, nous avons du texte sur des images, éclat de rig texted, du texte sur des arrière-plans multicolores, du texte sur des vidéos et, plus généralement, du texte directement ou une image ou une vidéo n'est pas un bon sauf si vous avez un contrôle total sur ce contenu et qu'il ne sera pas modifié par 1/3 partie où il pourrait produire des résultats non conformes. Évaluation de l'accessibilité dit. Presque toujours jeter des fausses violations positives dans ces situations parce que leurs algorithmes ne peuvent pas déterminer soit la couleur de premier plan ou d'arrière-plan. Et ces éléments plus complexes, les arrière-plans simples sont à peu près la seule chose qu'ils peuvent gérer. Alors soyez conscient de cela. Nous en parlerons plus dans le prochain segment sur l'évaluation de l'accessibilité qui traite des situations plus complexes peut être réalisée assez facilement. Protège qui sera assis sur des images ou des vidéos. Je recommande fortement d'utiliser une couleur unie entre un texte et un élément d'arrière-plan, ou au moins une couleur ou des ingrédients définis sur un pourcentage d'opacité élevé. Par exemple, si vous avez une galerie de diaporama avec du texte, les superpositions chaque diapositive, vous pouvez définir la couleur du texte orteil blanc dans une zone avec un fond noir transparent. Étant donné que les images peuvent avoir n'importe quelle combinaison de couleurs, vous devriez considérer l'image dans son pire scénario, que nous blanc. Dans ce cas, ils ont un fond blanc avec du texte blanc qui superpose cet arrière-plan avec votre boîte noire transparente qui se trouve entre votre texte dans l'image. À partir de là, vous pouvez utiliser un outil comme l'analyseur de contraste de couleur. Pour vérifier la valeur du transfert de la boîte noire avec du texte blanc, vous trouverez que vous devez respecter au moins 60% d'opacité pour être conforme. Dans ce pire des cas, j'ai fourni un lien vers l'outil analyseur de contraste de couleur dans la description de classe. l'autre côté, considérez une situation. Nous avons un texte noir qui relie l'image à l'intérieur d'une boîte blanche transparente. Ensuite, vous devez considérer une image noire pure pour évaluer le rapport de la boîte blanche transparente avec du texte noir. Les scénarios simples où nous avons noir et blanc mais la même approche à utiliser pour vérifier différentes couleurs si nécessaire. Généralement, le contenu dynamique est le plus difficile à prendre en compte, mais la clé est de toujours évaluer. Dans le pire des cas, il y a en fait certaines situations où votre client peut avoir une marque non conforme. Le jeu de couleurs qu'ils ne peuvent pas changer leur n'est pas grand-chose que vous pouvez faire dans cette situation à leur jeu de couleurs réel, mais il existe une solution que vous pouvez implémenter pour atteindre la conformité en matière d'accessibilité. Le W C E G en tant que technique générale étiquetée G 1 74 lui fournit un contrôle avec un rapport de contraste suffisant qui permet aux utilisateurs de passer à une présentation qui utilise un contraste suffisant. Vous pouvez accomplir cette technique en fournissant un simple bouton sur off pour un haut contraste site de fièvre très haut qui bascule le site dans et hors d'un mode de contraste élevé. Dunkin Donuts site en a un excellent exemple. Leur contraste ne va pas au noir ou blanc pur, mais il change bien. J' ai implémenté une solution similaire à celle-ci à mon travail à plusieurs reprises où j'utilise noir et blanc avec quelques accents gris foncé. Il fournit d'excellents résultats, et je l'ai vu obtenir beaucoup de commentaires positifs de la part des utilisateurs. Donc, cela enveloppe un contraste élevé et comment atteindre une palette de couleurs conforme. Ensuite, nous allons examiner comment évaluer la conformité d'une page Web à l'accessibilité 8. Évaluation d'accessibilité: dans le segment, nous allons examiner comment évaluer la conformité d'un site Web à l'égard de l'accessibilité. Pour ce faire, nous allons naviguer sur une page Web avec le clavier et le lecteur d'écran et inspecter la structure et le balisage utilisera ensuite les faisceaux Web, l'évaluation des vagues, évaluation des vagues systèmes d'index d' outils, actes, outil d'évaluation à la fois comme mesure secondaire. Nous allons commencer par naviguer sur la page Web avec un clavier et un lecteur d'écran parce que c'est la forme la plus importante et la plus fiable de tests d'outils d'évaluation tels que Wave et Acts n'évaluent que par programmation sur un ensemble de règles, et ils commettent souvent des erreurs. Le test humain est toujours la forme numéro un de test et d'évaluation. Wow, naviguant avec un clavier et un lecteur d'écran, je vais utiliser juste un petit ensemble de contrôles utilisera à nouveau The Vo Key dont j'ai parlé dans une leçon précédente. Avec Cherokees, va également onglet à travers la page pour vous assurer que tous les éléments à base de plantes sont correctement accessibles pendant la navigation, nous allons nous assurer que les éléments de la page et le contenu ou l'accès dans un , et qu'ils sont interprétés correctement par le lecteur d'écran. Amusant Max intégré lecteur d'écran appelé Voice Over. Il y a beaucoup d'autres options populaires, comme NBD A et Jaws qui peuvent être utilisés une fois que nous naviguons avec succès sur toute la page ouvrira Crume outils de développement pour vérifier la marque et s'assurer que la structure et contenu sont sémantiques, ainsi que tout ce qui peut se démarquer. Si vous faites cela pour la première fois, cela peut sembler accablant, déroutant ou difficile, et c'est OK. L' évaluation de l'accessibilité prend de la pratique et vous développerez la compétence en un rien de temps. Pour de l'aide supplémentaire, J'ai fourni un lien dans la description de la classe à un tutoriel de débutant pour la voix off créé par le groupe de développeurs Chrome appelé Screen River Basics. Maintenant, lançons une voix off et vérifions la conformité de ma page Web de projet à l'accessibilité, ce qui conduit à beaucoup de talent. Passer physiquement au contenu principal. Vous n'êtes actuellement rien à l'intérieur du contenu, tout comme l'autre titre d'élément Niveau un. Vous avez besoin de réservations, de navigation. Un article. Vous êtes vraiment dans un menu de navigation. Articles que tout le monde voulait pour l'élément de menu de fabrication avant carrosserie, élément de menu pour suspension, beaucoup d'attente pour quatre et un minibar et la navigation et un meilleur fond de niveau deux éléments . Bienvenue à vous. Ceci est une petite collection de mon travail, et j'espère que vous trouverez quelque chose d'utile. Titre Niveau trois Ressources rapides. Vous êtes actuellement au niveau de la rubrique trois ou quatre articles visités. Lien conseils du corps Voici quelques conseils pour ces deux corps. Un pour les liens visités Trouver la santé a besoin d'aide ou d'orientation avec un problème avant un lien visité . Trouvez des cartes. Ceci est une liste des derniers passants trois ou quatre rencontres de swap Link visitées. Trouvez votre swat local moi pour faire quelques offres pour votre liste actuelle. Rubrique niveau 3. Ma partie préférée de la restauration. Le design est comme un projet d'enregistrement, surtout en hiver. Vous êtes actuellement en tête des histoires de niveau trois avec trois éléments que vous suivez actuellement. L' un des trois besoin de modéliser est un tel lien gratuit que vous avez visité, donc je suis arrivé à lui donner un essai. Ouvre une nouvelle fenêtre de livraison. Doit avoir une suspension indépendante si elle est parfaite pour votre client. Plus précisément, le client obtient des ouvertures. Une nouvelle fenêtre a explosé pour tomber gratuitement. Tu te réveilles. Vous pouvez souvent trouver des pièces pour votre échange local projeté rencontre un lien visité. Trouvez une liste de vos habitants. Armes ici ouvre une nouvelle fenêtre, et la liste et moi que vous développez actuellement pour l'accessibilité commencer un millésime convivial, bâtiment accessible. Vous n'écoutiez pas les objets que vous avez visités. Lien Facebook, l' un des trois visité Lincoln. Trois. Visité Lincoln, Lincoln, libère tous et liste, et si oui, on dirait que nous sommes en bonne forme. Tous les éléments et le contenu étaient accessibles à l'ordre prévisible et ont été interprétés correctement par le lecteur d'écran. Mes commandes de clavier se déplacent dans toute la page Web Exactement comment le devrait se produire. Rien n'a interféré avec mon interaction. Maintenant, nous allons taper sur la page pour nous assurer que tous mes éléments seront, en fait, recevoir focus visité, lié au contenu. Tu veux dire comme un mini-bar pour les objets ? Fabrication de châssis, carrosserie d'élément de menu ? Quoi qu'il en soit, c'est essentiellement n'importe qui en fait des jetons Voici quelques conseils pour ceux qui doivent être physiquement bien. J' aurai besoin d'aide ou d'orientation pour un problème. Visité. Klink Trouver des cartes. Il s'agit d'un gaspillage de visiteurs récemment visité Link swap rencontre. Trouvez votre swat local moi pour faire quelques offres visitées lien afin que je puisse lui donner un lien visité. Le client obtient ouvre un nouveau lien de fenêtre visité. Trouver une liste de vos échanges locaux s'ouvre ici une nouvelle fenêtre. Liens visités Liste Facebook Lien revisité. Vous voulez un lien visité ? Lincoln Dirigeant mon contenu unique notre destination Select tentative. Maintenant que nous avons confirmé que mon focus, il sera éléments reçu focus et dans le bon ordre qui est maintenant qui va vérifier la structure de la page dans le balisage. Obtenir une vue d'ensemble générale de la structure de la page. Tout a l'air très bien. Notre premier élément à base de plantes dans les pages. Un saut au lien de contenu principal, suivi par les balises principale et pied de page sémantique, ce que je m'attendrais. Perspectionnons chacune de ces balises. Découvrez comment les morceaux de contenu sont construits. Ok, nous pouvons voir que les balises de section sémantique sont utilisées pour regrouper les plus grandes sections de contenu ensemble, ce qui est génial. Nous pouvons également voir que le saut à l'ancre de contenu principal est correctement placé comme le premier élément à l'intérieur de la balise principale. Jusqu' à présent, tous les éléments HTML air dans le bon ordre sur le marché qui a été choisi est approprié . Nous allons creuser dans l'en-tête un peu plus loin. Nous pourrions voir que celui H a été utilisé pour le nom du site, qui est ce que je m'attendrais, et à partir de là je vais supposer que tous les autres en-têtes et page vont incrémenter de celui-ci H. La barre de navigation a été correctement définie à l'aide de la balise sieste sémantique, ainsi qu'une liste inchangée utilisant les attributs de zone appropriés qui aideront avec technologie d'assistance. En passant à la section infographique, on peut voir qu'un élément figure a été utilisé pour marquer cette image avec une grande légende et H 2 dans le paragraphe. À l'intérieur, nous pouvons confirmer que l'image a un bon tous les attributs aussi bien. L' utilisation du balisage sémantique ici est excellente, et tout est dans le bon ordre. La section Liens rapides utilise un H 3 correctement incrémentiel avec une liste nord pour les liens. À l'intérieur de chaque lien, nous pouvons voir un élément d'icône, qui est caché de la technologie d'assistance, ainsi qu'un titre de lien et une légende divisés en balises de span distinctes. J' aime comment le tiret est utilisé pour briser les légendes de titre ici, donc ils ne sont pas rouges par le lecteur d'écran car une course sur le tiret crée une belle pause pour le lecteur d' écran et dissident visuellement en utilisant le verre caché allée définie. La section Spotlight utilise une balise d'article unique avec un H 3 et un paragraphe à gauche et une image à droite. Nous pouvons confirmer que l'image a un bon tous les attributs aussi bien. L' image d'arrière-plan ne transmet pas de contenu, alors assurez-vous qu'il n'est pas accessible à la technologie assistée. Nous pouvons voir qu'il est défini comme une image d'arrière-plan, et c'est ce que je m'attendrais. La section article de fonctionnalité utilise un autre H trois avec une liste inchangée pour les articles chaque article, images, les images,la photo laissée avec le texte correct. Enfin, nous avons pu voir que le pied de page utilise un paragraphe pour le slogan et une liste ordonnée par l'ONU pour les icônes des médias sociaux. Chaque icône utilise une étiquette de zone, ce qui est parfait, étant donné que ces liens ou juste des icônes et nous avons besoin de texte discernable pour les liens. Nous venons de confirmer que la structure de la page et le contenu sont construits en utilisant un balisage sémantique approprié , et que tout est placé dans un ordre approprié et prévisible. Maintenant, il est temps de terminer notre évaluation de l'accessibilité en exécutant la vague et agit outils d'évaluation comme une mesure finale pour être complètement sûr que nous n'avons pas manqué aucune violation de la manière d'une hache. Les outils sont des extensions de navigateur que j'ai installé, et nous allons commencer par la vague dit une fois que je clique sur le bouton, nous verrons que la vague va évaluer la page, puis afficher les résultats dans la barre latérale gauche . Nous pouvons voir immédiatement que nous avons zéro erreur et zéro alerte, qui est exactement ce que nous recherchons. Nous pouvons voir toutes les alertes, erreurs, fonctionnalités et plus encore en cliquant sur les drapeaux. Bouton dans le panneau aiment également désactiver CSS en cliquant sur ces boutons de styles afin que les éléments marqués soient plus faciles à localiser. Si nous avions reçu des alertes ou des erreurs, nous les verrions en haut de ce panneau, et chaque élément serait répertorié individuellement avec les informations sur la violation où il se trouve dans la page. Et quelques informations utiles sur la façon de le réparer, ainsi que les directives d'accessibilité qu'il se rapporte à vague évalue également pour le contraste des couleurs , mais je vais regarder ces éléments dans l'Axtell dans mon expérience est les essieux fait moins d'erreurs. Eh bien, maintenant ouvrez à nouveau les outils de développement de l'équipe et exécutez l'outil hache, nous verrons toutes les violations qu' il trouve dans la barre latérale inférieure gauche, les seuls éléments de l'évaluation trouvés ou les violations de contraste de couleur. Si nous avions reçu des violations, nous les verrions dans le panneau latéral gauche, et chaque élément serait répertorié individuellement avec les informations sur la violation où il se trouve dans la page et quelques informations utiles sur comment le réparer. Avec les directives d'accessibilité à laquelle il se rapporte, Nous pouvons voir que les violations de contraste de couleur sont marquées comme citation incapable de déterminer contraste pour les éléments de question ou de citation. La couleur d'arrière-plan n'a pas pu être déterminée car l'élément contient une image. Note. J' ai inspecté manuellement toutes ces violations et j'ai confirmé que leurs faux positifs c'est un outil a été capable d'évaluer correctement une violation de contraste de couleur réelle. Il répertorie les couleurs de premier plan et d'arrière-plan ainsi qu'un rapport non conforme qu' ils ont produit. J' ai quelques éléments que je veux mentionner au sujet des outils d'évaluation. Le plus important, c'est qu'ils ne sont absolument pas parfaits. Les problèmes les plus courants que ces outils signalaient automatiquement une situation de contraste de couleur lorsque l'outil n'était pas en mesure d'évaluer correctement une couleur de premier plan ou d'arrière-plan au lieu de les marquer comme des éléments nécessitant une révision plus poussée. Ils semblent violations Israël, qui peut grandement gonfler les résultats de l'évaluation et sont confus les clients lorsque vous vous assurez que leurs faux positifs, mais sont toujours énumérés dans les résultats. J' ai également vu un drapeau d'outils, balisage de zone approprié et non des situations de drapeau qui l'exigent. Et enfin, j'ai vu plusieurs éléments flags violations qui ne sont en fait pas basés sur une réelle lignes directrices d' accessibilité, mais ne sont que des recommandations du créateur de l' outil d'évaluation. Nous devons toujours utiliser les outils d'évaluation de l'accessibilité avec prudence, et c'est pourquoi les tests humains sont toujours numéro un. En conclusion. Je tiens à mentionner que si un client remet en question l'accessibilité de son site Web complet, c'est une excellente idée de lui faire acheter un produit d'accessibilité volontaire, modèle ou un V pat. A v Pat est un document auto-divulguant créé par le cender tiers qui décrit les succès et les échecs en ce qui concerne l'accessibilité du site Web. Le client peut alors l'utiliser comme un dieu et cartographie de la route toutes les mises à jour nécessaires du site Web pour atteindre les exigences d'accessibilité qui complètent notre évaluation de l'accessibilité. Ensuite, nous allons jeter un bref regard en arrière et tout ce que nous avons appris dans cette classe. 9. Examen d'accessibilité: félicitations pour avoir terminé le cours. Prenons maintenant une minute pour résumer les points clés que nous apprenons dans cette classe. Les lignes directrices que nous devons suivre lors de la construction d'une page Web ou de l'article 50 attendent dans les lignes directrices sur l'accessibilité du contenu Web, il y a des liens directs vers ces lignes directrices fournis dans la description de la classe. En outre, les personnes handicapées qui naviguent sur le Web ont utilisé des technologies d'assistance comme les lecteurs d'écran et l'agrandissement de l'écran, ainsi que des stratégies d'adaptation comme l'augmentation de la taille du texte et ajustement de l'alimentation de la souris. Le balisage HTML sémantique est extrêmement important pour l'accessibilité. Il fournit une interface riche que la technologie d'assistance peut plus facilement accéder aux informations et les transmettre à l'utilisateur. Il y a beaucoup de choses qui sont réalisées pour l'accessibilité, avec le balisage HTML sémantique seul. De plus, construction d'éléments dans un ordre prévisible est essentielle pour les liens de navigation et les images ou éléments qui me semblent souvent problématiques pour l'accessibilité. Nous avons regardé quelques exemples d'images avec simples toutes les images Texas Wells qui sont accompagnées d'une légende qui tient vide tous les attributs, nous avons également regardé quelques exemples de liens qui s'ouvrent dans une nouvelle fenêtre et comment gérer ces Le texte du lien descriptif ainsi que l'indication appropriée des liens sont également très importants à garder à l'esprit. Les attributs de zone sont utilisés pour améliorer l'interface utilisateur et les composants Web lorsque HTML, CSS et JavaScript tombent. Les attributs de zone courte sont un ensemble prédéfini de rôles, propriétés et d'états. Les valeurs de rôle ne changent jamais dans le cycle de vie d'une application. Les valeurs de propriété peuvent changer, mais sont peu fréquentes dans les valeurs d'état changent, souvent en raison de l'interaction de l'utilisateur. Ces attributs sont interprétés par la technologie d'assistance afin d'approuver l' expérience globale de l'utilisateur . Il y a quelques choses qui devraient faire partie de chaque page Web qui est construit comprend l' attribut HTML Lang un saut au lien de contenu principal, un indicateur de focus cohérent et permettant à l'utilisateur de zoomer sur au moins 200% sans perdre contenu pour la fonctionnalité. L' attribut couché indique au navigateur et à la technologie d'assistance dans quelle langue la page Web ou le contenu doit être interprété. Passer au contenu principal Le lien est important pour fournir une navigation efficace aux utilisateurs du clavier. Il leur permet d'ignorer les blocs de contenu répétés tels que les structures de navigation et les éléments d'en-tête afin qu'ils puissent accéder directement à la zone de contenu principale. Enfin, un indicateur de mise au point cohérent et proéminent aide l'utilisateur à savoir quel élément a le focus du clavier  ? contraste de couleur adéquat est important pour que le texte soit lu par les personnes ayant une vision modérément faible . Les directives relatives à l'accessibilité du contenu Web indiquent qu'une couleur de premier plan, ainsi que la couleur d'arrière-plan, doit produire un rapport de contraste minimal de 4,5 à 1 pour le texte normal dans un rapport de 3 à 1. Pour un texte volumineux. Il existe de nombreux outils qui peuvent aider à construire un schéma de couleurs conforme, et mon préféré est le vérificateur de contraste de couleur de mariage. Nous avons pu examiner certaines situations de couleur simples ainsi que certaines situations de couleur complexes et comment évaluer ces situations pour s'assurer de leur conformité. L' évaluation de l'accessibilité est très importante pour s'assurer qu'une page Web conforme aux directives d'accessibilité utilisant un clavier et un lecteur d'écran pour naviguer sur toute la page est la forme numéro un de test d'accessibilité. Des outils d'évaluation comme la vague et les actes pourraient être utilisés comme une mesure secondaire pour être complètement sûr que vous n'avez pas manqué aucune violation. également de Assurez-vouségalement devérifier la structure de la page et de marquer avec un bon ordre de page et une navigation prévisible . Donc tu as eu la chance de voir mon projet. De nombreuses leçons de cette catégorie ont également été jointes à la description du projet pour examen plus approfondi. Si vous avez besoin maintenant, il est temps de créer votre page Web basée sur tout ce que vous apprenez dans cette page Web Bill de classe basé sur votre passe-temps préféré et montré dans la galerie de projets. Assurez-vous de lire la description du projet pour plus de détails. Bonne chance, et j'ai hâte de voir ce qu'on en arrive.