Construire un site Web accessible : Accessibilité et conception inclusive

1. Introduction: bienvenue à ce cours sur l'accessibilité de la conception Web. C' est un sujet merveilleux pour être impliqué, parce que ce faisant, non seulement nous faisons de l'Internet unendroit meilleur et plus juste, endroit meilleur et plus juste, mais nous offrons également une tonne d'avantages, comme l'ouverture de nos sites Web à l'ensemble de nouveaux marchés et de nouveaux clients sur l' amélioration de l' expérience pour tout le monde. Nos taux de conversion améliorent notre facilité d'utilisation. Donc, que vous regardiez ce résultat ou que vous cherchiez à trouver une compétence vraiment précieuse pour votre CV, c'est aussi important, parce que aussi important, les employés de nos jours ils veulent savoir que les ingénieurs logiciels peuvent rendre les choses accessibles parce qu'ils savent à quel point c'est important. Et ils cherchent ça. Et ils le demandent dans les interviews. Je suis Chris Je suis consultant en logiciel sur Does Not for 10 15 ans maintenant travaillé pour beaucoup de marques internationales, les aidant à rendre leurs sites Web plus accessibles. Et je suis aussi un psychologue qualifié. Ça pourrait penser que c'est un peu une combinaison de tête de tête. Mais j'aime comprendre comment fonctionnent les ordinateurs, j'aime comprendre comment les humains travaillent rassembler tout ça comme c'est vraiment excitant, donc j'ai hâte de vous apprendre tout le matériel qui va récupérer dans ce cours. N' oubliez pas de télécharger le manuel des coûts afin que vous puissiez lire en même temps que les leçons vidéo sur . Je te verrai à l'intérieur de la première leçon. 2. Guide de démarrage rapide: Regardons quelques-unes des façons dont vous pouvez commencer très rapidement avec l'accessibilité sur le premier est juste d'activer un lecteur d'écran et commencer à essayer d'utiliser votre site Web sur. Lorsque vous faites cela, beaucoup de temps, vous repérez vraiment rapidement les problèmes qu'ils sont. Donc, si vous êtes sur Windows, vous pouvez utiliser Jaws, qui est Ah, morceau de logiciel payant. Mais vous pouvez obtenir un essai gratuit, ou vous pouvez utiliser le peu moins populaire, certainement gagner en popularité. Enviez le A, qui est complètement gratuit. Et si vous êtes sur la nouvelle version de Windows, il est maintenant livré avec un lecteur d'écran intégré appelé Narrateur. Si vous êtes sur Mac, alors cela a un lecteur d'écran intégré appelé Voice Over You sur Lenox Areas Walker et Lennon Screen Reader. Et si vous voulez Android, il y a un lecteur d'écran intégré appelé Rate appelé Talk Back. Donc, ces vraiment faciles à mettre dans le prochain module vont aller sur une plongée profonde dans certains d'entre eux et comment ils fonctionnent. Mais vous pouvez les télécharger, les installer et juste commencer à jouer avec eux ou certains d'entre eux dans juste intégré, donc c'est un excellent moyen de commencer. Deuxièmement, vous pouvez également faire une chose similaire avec un tas d'outils en ligne, y compris vague, ce qui vous permet juste de mettre dans un site Web que vous êtes l sur. Il vous montrera alors ce site Web sur toutes les choses que les choses pourraient potentiellement être un problème. Et donc vraiment, sans que Teoh apprenne tout sur l'accessibilité, vous pouvez juste commencer à réparer des choses parce que je vais vous dire ce qui va venir ont aussi fait une liste rapide de choses que je vois beaucoup qui pourraient faire avec l'amélioration, Donc ça allait être un top pour l'espoir. Mais il y en a certainement six. Le numéro un est la hiérarchie d'en-tête. Vous voulez qu'une cible déteste en haut de la page et ensuite elle veut en cascade vers le bas. Vous pouvez avoir plusieurs accrochages, mais alors vous voulez détester libre et détester sur tout ça. Vous voulez avoir des réunions sémantiques ira dans tous ces détails dans le module de conception inclusive . Mais juste pour vous donner un aperçu rapide de vos en-têtes une cascade vers le bas joliment contraste de couleur insuffisant entre votre premier plan dans votre arrière-plan, rendant le texte difficile à lire les problèmes de focus chaque fois qu'il y a un motile ou un élément interactif. Si vous utilisez un lecteur d'écran ou naviguez sur le site Web au moyen du clavier plutôt que de la souris, pouvez-vous entrer et sortir de ces modèles ? numéro quatre est des entrées de formulaire sur les étiquettes, même si vous les avez masquées. Il est vraiment important d'avoir cette étiquette d'air pour dire aux gens ce qui se passe, parce que cela pourrait être évident si d'un contexte visuel, mais ce n'est pas évident si vous ne pouvez pas voir. Il est donc très important d'avoir ces étiquettes dans leurs boutons numéro cinq trop rapprochés . Nous considérons souvent l'accessibilité comme un problème de personnes qui ne peuvent pas voir parce que les lecteurs d'écran de la façon prédominante que nous rendons les ordinateurs plus accessibles. Mais il y a aussi des déficiences motrices ou tout simplement en général, les gens avec de gros doigts essayant de taper pour des appareils mobiles. Donc, nous devons rendre ces zones cliquables belles et grandes, sorte que si vous n'avez pas de motricité parfaite, vous pouvez toujours appuyer sur ces boutons sans frapper celui à côté de lui. Enfin, numéro six est du contenu vidéo sans légende. . Idéalement, chaque fois que nous fournissons du contenu vidéo, nous voulons le sous-titrer pour les personnes qui ont des difficultés auditives sur des choses comme des podcasts ou simplement des flux audio pourrait également avoir une transcription afin que les personnes qui ne peuvent pas entendre ou les gens qui ne veulent pas entendre peuvent simplement lire la transcription à la place. Et nous allons entrer plus en détail dans tous ces sujets dans le module de conception inclusive. Mais il y a quelques idées pour commencer. 3. Outils d'accessibilité: dans ce module examinera certains des outils que vous pouvez utiliser pour vous aider à identifier les problèmes d'accessibilité sur vos conceptions plus accessibles. Nous commençons par cela parce que cela vous aidera vraiment à commencer rapidement. Si vous obtenez ces outils, ils commenceront à vous montrer comment réparer les choses immédiatement afin que vous puissiez commencer à améliorer votre site Web aujourd'hui. 4. Phare: se penchera sur Life House, qui est un outil intégré dans le navigateur Web Google Chrome. Commençons par naviguer vers un site Web que nous voulons commander et les nœuds pour y accéder . Nous devons ouvrir les outils de développement de Chrome pour ce faire. Nous ne pouvons même pas écrire lécher hit spect ou si nous ajustons juste F 12 sur le clavier et puis probablement commencer cette tablette éléments et devenir ainsi. Mais si on passe à l'ordre, c'est là. Il fera apparaître ce cri d'audit d'une petite maison lumineuse, et nous pouvons choisir où nous voulons le commander comme un appareil mobile ou de bureau. Nous pouvons choisir ce que nous voulons commander et comment nous voulons que la connexion soit simulée . Donc dans ce cas, nous pouvons le simuler jusqu'à un téléphone de G, et quand nous aurons Pete de toutes ses options, nous pouvons juste frapper cet ordre de ruban. C' est un bouton, et ce n'est pas spécifiquement pour l'accessibilité. Est également Performance et ASIO et nous donne plein d'informations vraiment utiles. Jets prend une minute pour courir pendant qu'il simule diverses connexions différentes, puis il vous donnera un score sur 100 pour chacun de ces éléments. Donc, la performance pas si bonne, mais l'accessibilité fto va vraiment bien. Alors faisons défiler vers le bas et voir ce que le rapport Saiz. Ici, nous sommes en excès de capacité, donc il est signalé ce problème en particulier. C' est dire que nous n'avons pas assez de contraste entre le premier plan et l'arrière-plan, et si nous ouvrons cela, il va même prendre les éléments et nous dire ici que c'est le numéro de téléphone. Donc, ce sera en bas au bas de la page ici où il dit qu'il y avait assez contraste. Juste assez juste, vous retournez à l'ordre il et il donne également une liste de toutes les choses qu'il a regardé passé. Par exemple, la zone attribue le rôle, les attributs, idées étant uniques, nous pouvons voir toutes les bonnes choses que nous avons faites, et aussi toutes les fonctionnalités sont simplement accessibles, non pertinentes pour ce site parce qu'il n'y a tout simplement pas sur cette page affichée ici aussi. Donc, c'est un enfant vraiment utile pour obtenir un aperçu rapide de tous les problèmes, et il vous emmènera aux problèmes aussi bien, et il vous donne également que des conseils de performance si nous sommes arrivés à la performance, nous donne tous ces conseils sur la façon dont orteil augmenter les performances aussi. C' est donc un outil très utile. Il donne juste des tas d'informations. Content vite. 5. Voix off: dans cette leçon, nous allons examiner comment utiliser la voix off, qui est le intégré au Reiter fourni avec Mac OS. Andi. Il parle avec beaucoup, dit. Il pourrait y avoir des discussions pendant que je parle et vice sur les pourparlers. Mais pour commencer, nous avons juste besoin d'appuyer sur commande. Cinq sur la voix alternative de sur voix off sur chrome Nouvel onglet, Google Chrome fenêtre Adresse et barre de recherche Modifier le texte a le focus du clavier, puis nous pouvons dire Lincoln Adresse accédé. Le plomb a coulé. City Clinic Co. Royaume-Uni n'a pas de contenu Web et de ne jamais se déplacer, nous devons utiliser la voix d'une modification des touches par défaut, leur option de contrôle. Alors on les maintient, puis on fait ce qu'on veut. Parfois, nous devons nous déplacer ici aussi. Ce n'est pas comme si les salaires de JoJo baissaient de haut en bas. Il y a beaucoup de clés à tenir. Mais pour commencer, nous pouvons simplement tenir la voix de modifier les touches, puis faire défiler Chris quota conduit, clinique d' anxiété, thérapie privée et l s un où le contenu que vous êtes actuellement sur. Que le déplacement comique est allé à la zone Web. Appuyez sur l'option de contrôle. Déplacer vers le bas. Flèche voix off est assez bon, comme vous pouvez le voir que pour vous donner la direction des choses dont vous avez besoin sur maintenant, nous avons chuté dans le contenu Web, et nous avons transmis à travers la page mène Anxiety clinique Crume a Nouvelle fenêtre Less is skip contenu principal, un certain nombre mal à l'aise sur le lien pour cliquer sur ce lien. Appuyez sur l'espace d'option de contrôle que vous pouvez voir les sites Web faire est qu'ils ont un saut caché vers lien de contenu principal près de la partie supérieure. Le seul apparaît lorsque vous lui donnez le focus de sorte que lorsque vous faites défiler à l'aide du clavier ou d'un lecteur d'écran, il apparaît tout de suite. Mais les utilisations citées n'ont pas besoin de ce lien. Je ne le dirai pas. Lien appelé un livre un rendez-vous. Vous naviguez actuellement. Vous êtes un livre de lien visité en ligne visité, lié, visité, visité, lien notre thérapie et ce qui est actuellement sur le lien Pour cliquer sur ce lien Cliquez sur l'option de contrôle Appuyez l'espace A obtenir l'exemple où vous seriez mise en page sémantiquement, mais vous pourriez le faire visuellement regarder différence. Un livre en ligne qui probablement l'appel principal à l'action de cette page, sorte que vient en fait premier dans la navigation sur les liens ci-dessus viennent après que maintenant quand ils crient à passer par la page. Logiquement, il voit un livre en ligne que, même si visuellement, nous l'avons présenté pour être l'éviter autour. Donc c'était une blague à ça. visitant mon livre de lien en ligne, vous appuyez sur le prénom visité Modifier le texte principal personnaliser et contrôler. Google Chrome Update est disponible. Vous êtes actuellement sur un bouton pour cliquer sur ce bouton appuyez sur l'espace de l'option de contrôle. Et avec la voix off, il est assez facile de faire des fermes. Pourriez-vous aller tout droit ? H n Crume a un nouveau client de fenêtre. Chris Button. Vous êtes actuellement chromebook en ligne conduit anxiété Clinique visité Lien Lien Passer au contenu principal a actuellement mis l'accent. Passer au contenu principal. Titre niveau un livre en ligne. Tu es Johnson. Insérez le téléphone pour l'e-mail. Un doux contient complémentaire. Vous souhaitez lier le niveau de fin de fin d'en-tête à l'en-tête de lien de clic de lien Titre. Il est devenu faible mais visité. Lien visité presse lien foire aux questions, Leads, anxiété, contenu Web clinique, compromis et contrôle. mise à jour Google Chrome est disponible. Vous êtes actuellement sur un bouton pour cliquer sur ce bouton. Appuyez sur l'espace d'option de contrôle. Assez facile de tester comment les orbes aiment sont accessibles en activant la voix off. Si vous avez un Mac, Andi, commencez à faire un coup pour votre site Web et voyez si vous pouvez faire les choses que vous voulez faire. Si ce n'est pas le cas, il est peut-être temps de repenser la façon dont vous l'avez conçu. Voix off. 6. JAWS: sur cet ordinateur portable, nous avons Jaws installé, qui est le lecteur d'écran le plus populaire pour Windows. Alors jetons un coup d'oeil. Arrête de l'ouvrir, John pour Windows, BBC. C' est à la maison. C' est brutal. Crow BBC C'est à la maison. Typiquement, cela va changer le schéma de couleurs. Infuse dans les schémas de couleurs avancés sur j'ai déjà une page Web chargée ici sur la principale façon dont vous naviguez dans Jaws est juste en utilisant les flèches haut et bas visités lien sur niveau de titre de jeu de page à l'accessibilité liste de location de deux éléments. même lien de page. Passer au contenu comme beaucoup de sites Web à BBC. Mettez des liens d'accessibilité cachés là-dedans. Si nous voulons sauter directement vers le bas au contenu principal bénéficie, nous pouvons appuyer sur Q, qui à partir des touches de choc et de nouveau continuer à descendre. Au niveau de la direction pour accueillir à la BBC dimanche 2 février. Contrairement à la voix off qui met un indicateur visuel de l'endroit où vous êtes à l'écran, George ne le fait pas, ce qui n'est évidemment pas un problème si vous êtes aveugle, potentiellement un problème pour les personnes partielles, excitées, mais les retours des emplois généralement bon, donc vous n'en avez probablement pas besoin si vous utilisez un lecteur d'écran. C' est plus si vous testez en tant que personne voyante que vous pourriez vouloir ce genre de style de voix off. Indicateur. Maillots blancs niveau trois lien Australian Open masculin dans le lien de tennis blanc petting niveau trois lien de rugby union sont maintenant. Si nous voulons le décomposer un peu plus loin, nous pouvons utiliser les flèches gauche et droite, et cela va lire les caractères individuels O r. Et il y a une tonne de rôle d'horloge. Profitez du vôtre afin que vous puissiez l'obtenir à lire au niveau de la phrase et l'obtenir à lire sur un niveau de ligne . Vous pouvez l'obtenir à manger au niveau du personnage. Il y a un tas de chocolats différents pour ceux qui naviguent sur la page. Typiquement, vous voulez le faire par des en-têtes, espérons-le les en-têtes ou donc correctement sur le site Web que vous recherchez. Donc, par exemple, si je veux aller à pour les titres de niveau 2, je peux juste frapper les deux histoires clés ou top niveau de titre jusqu'à ce que les titres de nouvelles se dirigent au niveau titres de sport en direct au niveau de Lick ce week-end Sports cap niveau deux trois choses que nous aimons aujourd'hui, cap niveau deux sur Si vous voulez passer à travers les titres sans haine à nouveau. Il suffit d'utiliser les couleurs de texte de gâteau gratuit Capture culture de jungle sémantique niveau 3. Ancien navire Reconstruire le plus grand niveau de tête de trois D de son monde. Le 400 National Security, qui a inspiré les légendes de niveau 3 Lien. C' est une démonstration rapide de la navigation de base. Maintenant, regardons faire quelque chose, et cela nous donnera une chance de voir Jaws est pour les modes aussi. Donc c'est charger ce site pour l'anxiété de plomb là-bas. Nous allons juste obtenir la page d'accueil redémarrer contre Anxiety Clinic Léché feuilles Anxiety Clinic visité. Live Page a quatre maux de tête d'état de la région et 22 pistes les moins importantes. Clinique d'anxiété National Rifle thérapie Vous savez que c'est un conduit de jambe visité et le désir laisse anxiété visité Lien feuilles, Anxiety Cliff. Même page Lien Passer à nouveau au contenu principal. Un lien d'accessibilité en haut qui emmènera les gens ne le font pas appelé un livre et rendez-vous lien 0113 vers la région de navigation. Bon usage des étiquettes de l'ALENA qui relient le livre Godlike. allons frapper ce livre en ligne donc nous sommes sur le lien Spaceflight pour sélectionner Godlike national a décidé la clinique Dash Google Crow Book up comme manger national et a décidé la clinique slash Google corbeau. Mais Dieu, comme les mange nationaux et le désir, la clinique reste. Région Article Région Prénom Modifier Nouvelles John People is old Les jeux sont de lire le script du formulaire de réservation de texte. Étape une des trois types de formulaires de texte. Votez. Vous avez peut-être entendu ce petit coup d'œil pendant que nous avons chargé la page, et c'est pour indiquer que George est passé en mode formulaires où il vous a permis de remplir les choses . Il a effectivement dit le mode formulaires dans ce cas aussi. C' est sur un très pour les deux réglages, alors essayons de remplir quelque chose. Notre week-end I in Jaws juste appuyez sur Entrée pour soumettre le formulaire. Il y a beaucoup plus bas, mais voyons ce qui se passe si on le frappe maintenant. Alerte Air Hollow Square Bullet, s'il te plaît. Après votre numéro de téléphone, fermez cette alerte. Prénom Modifier Nouvelles John Keep Lessel Joues sont de lire le script de texte Chris formulaire de réservation Étape un des trois types de texte. Donc pas parfait notre manipulation ici, mais il a lu l'alerte, donc c'est génial. Nous aussi comme dans un arcs réguliers, affaiblir le robinet à travers le texte de type d'élément interactif. Vous pouvez aussi le faire. Apprécie quoi ? Trois. Quoi ? Quoi, quoi ? Quoi ? Quoi ? Quoi ? Devis le contenu. Tu cries ? Quoi ? Boîte combo Jeter. Veuillez choisir, il vous plaît envoyer un courriel. Hé avec vous, faites défiler vers le haut et vers le bas dans l'affaire. Façon de soumettre un peu comme ça. Étape à qui laisse et le désir de la clinique que Google corbeau Mais Dieu comme cette étape pour les pistes nationales et le désir de la clinique que Google chrome continuer bouton. C' est donc un rapide coup d'œil à la façon d'utiliser le lecteur d'écran Jaws. C' est des feuilles de triche milligrammes là-bas qui vous donnent une ventilation complète de toutes les différentes commandes disponibles, donc je recommande de vérifier cela. 7. VAVE: dans cette leçon se penchera sur l'évaluation de l'accessibilité du Web pour également connu cette vague et cela est fourni par objectif Web. Donc, si nous obtenons le site Web objectif et nous voulons trouver la vague aussi. Une fois que nous sommes arrivés ici, nous ne pouvons pas entrer le site Web. Dans ce cas, nous sommes habitués à l'être. Nous le voyons partir et cela va charger le site Web de la BBC d'un côté et nous donner ce rapport. Ça a l'air plutôt bien. Quelques erreurs de contraste, pas de flèches majeures, beaucoup d'alertes. Et si nous allons voir les détails de votre saucisse, il est en cliquant sur l'onglet Détails. Cela nous mènera à travers chacun des éléments. Ainsi, par exemple, très faible contraste, nous pouvons simplement cliquer. Ceux-ci qu'il faudra est à la pièce de texte spécifique. Cela va dans beaucoup plus de détails que le phare. Donc, par exemple, nous avons une alerte de texte suspect parce que ici nous avons plus de lien et ici nous avons lu plus lien qui ne fournit pas vraiment de contexte. Donc, si vous imaginez passer par Screen Reader et il vient de lire mawr, pas un lien très utile, nous pouvons passer par des choses comme le Texas, par exemple, trop petit pour lire nous emmène également à travers toutes les bonnes choses et chacun des éléments structurels. Donc, les aides d'orteil mers imaginer comment naviguer page comme un séquoia cri, où vous étiez en train de passer par les titres. Ça marque chacun de ces assistants. Comprendre ? Par exemple, voici un H 2 et voici le gel haineux en dessous afin que nous puissions vérifier. On a tout en ordre. Et si nous n'avions pas de titres hiérarchiques que la vague, jusqu'à ce que serait signalé cela et il induit aussi est l'utilisation de tous. La région en apprendra plus sur notre domaine plus tard, mais c'est une façon d'aider à donner un contexte supplémentaire aux lecteurs d'écran. Et vous pouvez obtenir plus d'informations, y compris un outil de contraste intégré, et nous reviendrons sur le contraste plus tard également. Mais encore une fois, ce rapport est assez détaillé sur notre site Web, sorte que vous pouvez mettre votre U R L dans la barre d'adresse sur. Il générera ce rapport détaillé sur toutes les choses qui sont bonnes à propos de votre site Web et les choses que vous pourriez améliorer ainsi 8. Validateur W3C: dans cette leçon se penchera sur la validation W trois c à laquelle est un outil qui valide nos détestes à Mel. Maintenant, ce n'est pas vraiment directement lié à l'accessibilité. Mais l'une des choses les plus importantes que nous pouvons faire pour rendre notre site Web accessible est utilisé html sémantique et ceux valident html de sorte que le navigateur composite correctement dit tous lecteurs d' écran composite correctement sur nous n'avons pas de problèmes majeurs comme ça. Il y a des autoroutes que cet outil peut fonctionner. Vous pouvez simplement mettre le u R L dans ou si vous êtes toujours en développement local, vous pouvez télécharger un fichier de haine plat féminin si vous en aviez un, ou vous pouvez simplement copier et coller des détestes pour envoyer ici et frapper. Consultez cet exemple que nous allons valider. Basé sur ce que vous êtes dehors. Donc, nous allons simplement utiliser le site Web de la BBC. Je vais vérifier Dhere. On a le rapport. Donc, il a trouvé une erreur usée sur beaucoup d'avertissements pour ne pas avoir l'air qu'il y a quelque chose de mal ici, veut que mal ici, nous déplacions une balise méta plus haut sur beaucoup de choses de la vieille école. Ainsi, par exemple, nous avions l'habitude d'un attribut qui était tapé du texte. Jarvis crypto permettent des ressources JavaScript qui n'est plus nécessaire à partir de html cinq. Mettez beaucoup de code l'a encore dedans. En fait, nous avons d'autres erreurs ici aussi. C' est un outil vraiment sympa parce que nous pensons tous beaucoup de temps que nous écrivons un grand html mais en fait un changement absurde. Ou peut-être qu'on fait une erreur. Peut-être que les choses ne sont tout simplement pas aussi bonnes que nous le pensons, et donc nous pouvons aller au validateur, vérifier, corriger les erreurs et la meilleure qualité déteste demain nous pouvons produire, alors moins il est probable qu'un navigateur ou lecteur d'écran va devenir confus quand il regarde quelque chose que vous ne comprenez pas. 9. Disabilities: dans ce module va examiner la gamme des problèmes d'accessibilité que les utilisateurs de votre site Web peuvent être confrontés, sorte que quand il s'agit de la conception, affaiblir, va faire tout un éventail de conditions différentes et assurez-vous que nous 're la restauration pour autant que possible. 10. Vue de la vue: dans cette leçon se penchera sur le site. Le Royal National Institute for Blind People suggère que deux millions de personnes au Royaume-Uni vivent avec une perte de vue, ce qui est assez important pour avoir un impact sur leur vie quotidienne. Donc ça ne doit pas être complètement mais assez pour être classé comme un handicap, ce qui représente environ 3% de la population Maintenant, beaucoup hors pays, ils vont avoir le même genre. Et en fait, si les pays ont un système de santé moins développé, le Royaume-Uni pourrait même être plus élevé que cela. Donc, nous avons affaire à une quantité importante de la population, et cela est réparti sur un large éventail de conditions sur la gravité, sorte que quelqu'un ne pourrait pas avoir tout de site. Dans ce cas, il va généralement utiliser Screen Reader parce que c'est la seule option moins qu'ils utilisent une sorte de système Braille. Donc, généralement sur le bureau, cela peut être mâchoires ou envie D A ou voix off. Si vous êtes sur un Mac et aussi sur un appareil mobile, revenez sur Android des deux. Donc, l'iPhone étaient très populaires aussi bien, autant plus que les mobiles ont tendance à venir intégré dans le logiciel alors ainsi que d'être complètement aveugle. Nous pourrions aussi avoir des personnes malvoyantes, donc elles ont juste une déficience visuelle et elles sont faibles. Le temps utilise également des lecteurs d'écran parce qu'il le rend juste plus facile. Mais ils peuvent aussi utiliser des choses comme Gypsy zoomant pour agrandir les choses. Il y a beaucoup à construire des tills là-bas. Il y a la fonction de zoom du navigateur, et vous pouvez obtenir un logiciel d'accessibilité tiers, ce qui les aide. Ou ils peuvent simplement lutter. J' ai des amis qui ont une vision partielle sur le Saint Do est juste de coller leur visage juste à côté de l'écran pour qu'ils puissent le voir. Donc, il vaut la peine de considérer que aussi, que les gens majeurs essaient de lutter pour elle. Et donc nous voulons les rendre aussi faciles que possible pour eux. Et cela pourrait être créé par un large éventail de conditions et se concrétisera certains des effets de cela plus tard dans cette leçon. Une autre chose aussi, considérez vraiment son daltonisme. Cela affecte environ 5% des personnes qui veulent 20 sur la quantité de daltonisme qui est variable. Mais il tend à être que les gens ont des capteurs spécifiques dans leurs yeux manquant sur , donc ils ont tendance à être affectés par une combinaison spécifique de couleurs, dont le plus commun est le rouge vert. Mais il y a beaucoup d'exemples différents, et il y a une grande différence de genre dans Colorblind dit Eh bien, les hommes beaucoup plus susceptibles de lutter avec le daltonisme et les femmes. Et il peut aussi être Grady ated. Donc, la façon dont vous êtes aveugle de couleur est également sur une échelle. Donc, même si vous avez un daltonisme rouge vert, il pourrait être très sévère, et vous pourriez être incapable de changer quand les deux ou il pourrait ne pas être, pas sévère la plupart du temps. Si vous faites les choses assez distinctes, les gens seront en mesure de les distinguer est une grande gamme là-bas. Certains des effets que nous constatons sont évidemment de ne pas pouvoir tout voir. Mais aussi les choses pourraient être floues. Ou peut-être que les gens ont des angles morts qui sont assez communs. Et ils peuvent même ne pas être au courant de ces angles morts parce que, à moins , hélas, vous êtes très concentré sur eux. C' est vraiment facile d'oublier parce que nos blagues de vision compensent. Ainsi, par exemple, nous avons tous un angle mort dans chacun de nos yeux où le nerf optique sort. L' arrière du globe oculaire. n'y a pas de capteurs là pour détecter la lumière et dit le point de réserve façon. Si vous fermez un œil, vous le pouvez. C' est juste un endroit dans le dessus. Je ne peux pas voir quoi que ce soit, mais nous ne le voyons jamais parce que notre vision, notre cerveau, juste complique parfaitement Ring remplit le reste du monde parce que ce que nous disons n'est pas une image directe pendant que notre cerveau pense est-il basé sur l'information obtient de mes yeux. Maintenant, nous sommes des sens. Ce que cela signifie, c'est que nous avons tous des angles morts et que nous ne les remarquons pas. Donc, même si vous avez une condition qui crée taches aveugles plus importantes, les chances que je votre cerveau sera gitane remplir les choses dans les angles morts vraiment importants. En outre, les gens peuvent simplement voir un rapport qu'une petite partie de l'écran à la fois. S' ils zooment ou qu'ils doivent vraiment appuyer leur visage contre l'écran, alors ils ne seront pas en mesure de prendre tout ça en même temps. Nous voulons donc considérer cela et comment les choses évoluent dans nos conceptions. En outre, les gens peuvent ne pas être en mesure de distinguer la couleur, donc nous voulons nous assurer que lorsqu' il est moyen, il utilise la couleur comme indicateur 11. Audition: dans cette leçon, nous allons parler de l'audition. L' audience n'est jamais évaluée condition. Certaines personnes n'ont aucune ouïe du tout. Certaines personnes ont une audition limitée. Sur une autre condition commune est acouphènes, où vous avez ah, son constamment aller dans vos oreilles, typiquement sonnant ou bourdonnant quelque chose comme ça, ce qui rend encore plus difficile à entendre. Andi peut être assez mal à l'aise à vivre avec en termes de conception Web Teoh pertinente. C' est une liste assez courte car ici, nous parlons de contenu audio et vidéo aussi longtemps que vous y prenez en compte. C' est le principal sujet de préoccupation, et nous examinons comment le faire plus tard dans ce cours. 12. Moteur: dans cette leçon se penchera sur les déficiences motrices, sorte que certains utilisateurs ont de la difficulté à contrôler la souris sur. Ils peuvent utiliser une clé pour ne jamais obtenir à la place, ou ils peuvent simplement utiliser la souris, mais trouver vraiment difficile de cliquer sur les choses, donc ils peuvent avoir deux mains qui peuvent avoir une main sur elles peuvent ne pas avoir la main sur. Ils peuvent utiliser une gamme de dispositifs d'accessibilité différents. Certaines personnes doivent contrôler l'ordinateur avec leur bouche parce qu'elles n'ont pas de corruption jusqu'à la fin moins sévère où peut-être quelqu'un a quelque chose comme la maladie de Parkinson , où ils ont vraiment du mal à bouger leur bouche vers où ils le voulaient. Theo et cliquer sur de petites cibles est vraiment difficile, ou ils peuvent utiliser la commande vocale pour contrôler cet ordinateur. Donc, les effets signifient que si vous, par exemple, avez beaucoup de liens ou de boutons rapprochés, certains utilisateurs peuvent vraiment avoir du mal. Ou si vous avez une liste massive de liens et que quelqu'un utilise le clavier, faites défiler la page, alors ça va être vraiment irritant parce qu'il leur faudra des âges pour passer à travers cette liste. Et donc nous voulons prendre le clavier, navigation et la navigation autour de la page avec quelque chose de plus qu'une souris en considération sur. Nous voulons également tenir compte de la taille de n'importe laquelle de nos cibles tactiles ou de nos liens, et nous le verrons dans le module de conception inclusive. 13. Cognitive: dans cette leçon se penchera sur les contraintes cognitives. Non, tous les handicaps sont physiques, et les gens peuvent également avoir des difficultés d'apprentissage et des problèmes spécifiques avec leur mémoire. Leur attention. Ça pourrait être sur le spectre autistique. Ils pourraient avoir de la dyslexie ou des distractions ici, ce qui est l'équivalent mathématique de la dyslexie. Donc, il y a toutes les choses. Même si le corps physique des gens fonctionne bien, ils pourraient avoir des difficultés à utiliser les choses que nous concevons. Et il est important que, pour être inclusif, nous tenons compte de ceux qui sont dans une houle, et généralement cela implique la simplification. Nous voulons donc nous assurer d'utiliser un langage simple et accessible sur. Nous voulons le présenter d'une manière très lisible. Cela signifie donc regarder des choses comme l'espacement des lignes et s'assurer avec les informations de bloc . Donc, nous ne donnons pas aux gens d'énormes paragraphes illisibles. Nous voulons que le conçu soit clair sur l'appel à l'action, ce que vous voulez qu'ils fassent. Cliquer sur un bouton, remplir des formulaires, lire sur l'article, tout ce qu'il est est vraiment clair. Nous voulons un look et une sensation cohérents, donc si nous avons un jeu de couleurs dans un certain bouton pour l'action à faire ensuite, nous voulons nous assurer que cela est cohérent sur tout le site afin que cela soit vraiment évident pour quelqu'un qui essaie d'interagir avec notre dessins, ce qui se passe. Et bien sûr, toutes ces choses rendent notre site web meilleur pour tout le monde. C' est la bonne chose à propos du design inclusif, c'est quand vous le faites mieux pour quelqu'un qui a du mal, que vous le faites aussi mieux pour les personnes qui n'ont aucune déficience physique ou cognitive, et que vous avez des taux de conversion sont susceptibles d'être plus élevé pour tout le monde, pas seulement pour les gens. Nous avons des problèmes spécifiques que vous essayez de résoudre. 14. Design inclusif: dans ce module sera technique, va aller dans le déteste lui, et regarder comment nous pouvons structurer nos sites Web pour les rendre accessibles à tout le monde, entrer directement dans les détails et travailler sur le contenu Web. Les lignes directrices en matière d'accessibilité nous fournissent beaucoup de conseils sur la façon de procéder et le niveau de conformité que vous souhaitez atteindre dépend de vous. La plupart des entreprises commerciales ont tendance à opter pour le Double A, ce qui est un grand niveau d'accessibilité et vous donne toujours la flexibilité nécessaire pour le faire. Joli travail de conception amusant Si vous voulez être très strict, par exemple, vous êtes un organisme gouvernemental, ont été un mandat pour atteindre tout le monde dans la population et pas trop ennuyé de s'amuser. Sparky Designs commercialement basés. Ensuite, vous pouvez opter pour le Triple A, ce qui est un standard très difficile à atteindre. Pour en profiter. Vos sites Web sont super accessibles Comme nous allons, fruits vont les toucher et nous allons aller pour chaque zone hors ont été conçus pour voir ce que nous pouvons faire. Quelle est la meilleure pratique 15. HTML sémantique: dans cette leçon se penchera sur la sémantique. Html. Espérons que vous êtes déjà familier avec le terme, mais si ce n'est pas le cas, alors il se réfère à la signification des balises. Donc, dans Hates Tomorrow quatre, nous avons eu tendance à tout envelopper dans DIV. Sur les balises de span et les ceci n'ont presque aucune signification de. Et puis que par défaut, on bloque. Quand il y a un élément en ligne, ils ne nous disent rien sur Page. Donc, quand un ordinateur traite le HTML, il ne sait pas ce qu'est quelque chose quand il est une travée de devora et puis déteste lui ou cinq sont venus sur voulu résoudre ce problème et répondre à des réservoirs plus significatifs. Donc maintenant, nous avons des choses comme le réservoir d'en-tête et de pied de page que nous avons dans l'article principal Tank the aside. Étiquette pour gagner. Pour obtenir la barre latérale, nous avons des chiffres à insérer des graphiques et des graphiques. Nous avons des knaves pour mettre la navigation dans Andi. Maintenant, si vous regardez un écrit payé et l'espoir à mes cinq, il est juste beaucoup plus logique parce qu'il est très facile pour un ordinateur de voir Quel est l' en-tête ? Quelle est la navigation ? Où sont les articles ? Qu' est-ce qu'il y a dans le pied de page ? Et tout cela a beaucoup plus de sens maintenant c'est vraiment important parce que ce ne sont pas seulement les navigateurs et les moteurs de recherche qui doivent être en mesure de comprendre cela. Mais quand un lecteur d'écran vient regarder ce qui se trouve dans une page de 60 miles, il doit comprendre la page afin qu'elle puisse aider l'utilisateur. Maintenant, oublie. Si un utilisateur veut accéder à la barre de menu à la navigation, où est-ce que s'il veut passer au-delà de tous les liens dans la tête et accéder au contenu principal  ? Comment ? C' est facile pour quelqu'un qui est juste visuellement excité de le faire parce qu'il peut faire défiler vers le bas. Mais si votre lecteur d'écran veut le faire, alors comment obtenez-vous ce loup qui travaille ? Nous utilisons des balises sémantiques. Nous pouvons obtenir la plupart de cela gratuitement parce que nous disons instantanément au lecteur d'écran comment fonctionne la page au fur et à mesure que nous traversons. Le reste de ce module examinera cela plus en profondeur, mais il y a tellement d'informations sémantiques disponibles si nous utilisons les cinq réservoirs de légumes, mais aussi si nous utilisons les trucs qui ont été intégrés pour le haïr l des premiers jours. Ainsi, par exemple, lorsque nous utilisons des formulaires, assurant que les entrées des types corrects, en nous assurant qu'ils ont des étiquettes sur eux. Toutes les choses comme ça qui disent à un ordinateur qui disent au navigateur comment la page fonctionne super utile pour les lecteurs d'écran parce qu'il les a aidés à travailler et présenter l' information d'une manière vraiment cohérente sur les laboratoires utilise pour naviguer autour de notre conçoit beaucoup plus facile. 16. Texte: dans cette leçon va regarder le texte Yusof dans les conceptions, et l'une des grandes préoccupations ici est les en-têtes utilisant CSS. On peut faire en sorte que les rubriques ressemblent à ce qu'on veut, pour qu'on ait une chaleur très petite. On peut avoir une haine six qui est énorme et qui domine la page sur DSO. Ce que nous voulons faire est d'utiliser la balise correcte pour la signification sémantique et tout le reste est fait via CSS. Donc, nous ne voulons pas penser que Tags représente un look ou un style spécifique. Mettez les bonnes balises pour avoir un sens sémantique à la page. Ensuite, nous allons simplement les coiffer comme nous le voulons. Donc, ce que cela signifie, c'est que chaque braconnier a porté et blague la haine usée. Une balise sur ceci est votre titre pour la page. Donc, c'est une chose que vous lisez, et il vous dit ce que cette page entière est au sujet ci-dessous, que nous pouvons avoir plusieurs détestes aux balises. Donc, s'il y a plusieurs sujets importants sur la page, chacun peut avoir son propre âge et ensuite en dessous, nous aurions chacun hors de la balise inférieure . Donc, si vous avez une sous-section à l'intérieur, c'est là que vous commencerez à utiliser la haine et la haine quatre et tout ce qu'il contient devrait être hiérarchique sur. On ne saute rien, donc on ne veut pas aller pour ma haine à un énorme quatre. Parce que si c'était arrivé et que vous utilisiez un lecteur d'écran faisant défiler les en-têtes , vous pourriez penser que vous avez gâché l'arbre de haine. Ou quand il sera lu, en direction de quelque chose, vous allez penser que vous avez raté la haine libre. Et en fait, si ce n'était tout simplement pas sur le design que super confus donc typiquement vous pourriez avoir dit, détestez l'un des premiers de la page. Et puis, si vous avez Siris d'articles qui seraient de la haine deux ou si c'est une page d'article elle-même, la haine pourrait être le nom de l'article, puis le corps en dessous. Et si vous avez des choses comme des barres latérales ou des pieds de page qui ont aussi besoin de se diriger, alors votre mieux faire ceux que je déteste à une houle et ensuite les sous-titres ci-dessous que cette partie de la panne de cet enseignement va ensuite descendre à la haine libre dans l'attelage. La mise en page de quatre textes est également importante, donc nous voulons avoir un fort contraste de couleurs dans la leçon sur la couleur parlera de quoi , exactement est un niveau de contraste accessible. Mais comme nous l'avons dit plus tôt, vous pouvez utiliser des outils pour mesurer le contraste pour vous assurer qu'il est suffisant. Nous voulons que le texte soit beau et grand pour le rendre lisible. Nous voulons utiliser à nouveau les balises de paragraphe, ce qui fait que ce HMR sémantique fonctionne vers l'avant. Et au lieu des balises de saut de ligne, nous voulons tout. Ce paragraphe, il veut être à l'intérieur d'un réservoir de paragraphe sur. Nous voulons également considérer l'espacement des lignes et les choix de polices. Donc, traditionnellement, les polices serif, celles avec les petites décorations, ont leur plus facile à lire pour la plupart des gens. Mais il n'y a pas grand-chose dedans. Et il y a des preuves que si vous avez des affections comme l'autisme, c'est en fait plus difficile à lire. Donc les polices San Serif sont un excellent choix et peut-être sauver les téléphones Sarah quatre titres. Regardons un exemple sur un dos bien disposé du texte contre et pas si bien disposé Livre de taxé. Donc, ici, nous avons quelques exemples où à gauche, tout est mis dans un paragraphe géant ne serait pas beaucoup d'espacement de ligne entre eux sur la droite, nous avons deux paragraphes sur beaucoup d'espacement de ligne sur. Je pense que la plupart d'entre nous conviendraient que le texte de droite est plus lisible que le taxé sur la gauche et encore une fois juste en faisant ces améliorations ont aidé tout le monde. C' est un design inclusif. Ce n'est pas seulement pour des conditions spécifiques, mais en fait notre site Web s'améliore pour tout le monde sur ce que nous voulons. 17. Liens: dans cette leçon va examiner les liens. Donc, l'une des choses que nous voulons faire est de nous assurer que nous utilisons les liens hypertexte de balises et les boutons pour leur usage prévu est de sorte qu'un lien devrait vous conduire à une page Web différente d'un bulletin devrait faire une sorte de fonctionnalité. Donc, nous voulons éviter cette idée où il prend une balise de lien et détournement. C' était une sorte d'événement sur clic pour faire quelque chose alors qu'en fait il n'a jamais été conçu pour être un lien. Donc, nous avons eu le A, Tag dit envoie les utilisateurs à d'autres pages Web. Donc on ne veut pas de ces faux Buehrle où on vient de mettre un peu de hachage là-dedans, puis on le détourne avec le clic. Dans de tels cas, nous voulons nous assurer d'utiliser un bouton. De même, le chemin au-dessus Ah, bouton ne devrait pas nous conduire à une autre page Web. Il devrait effectuer une sorte d'action sur si nous avons besoin de prendre l'utilisé à une page Web différente que nous devrions utiliser un lien. En termes de style, nous pouvons utiliser CSS pour les faire ressembler comme nous le voulons. Donc, ce que cela signifie est que vous pouvez faire une balise de lien ressembler à un bouton, vous pouvez faire un bouton ressemblant à un lien, Alors pensez sémantiquement d'abord. Qu' est-ce qu'il fait et qu'il utilise le réservoir approprié ? Et puis vous pouvez style de puissance que vous voulez maintenant en termes de faire les liens. Comme nous l'avons discuté plus tôt, nous ne devrions jamais simplement utiliser la couleur pour indiquer quelque chose. Donc, nous voulons un autre indicateur , c'est pourquoi traditionnellement, les liens ont bean en bleu et souligné pour y indiquer un lien. Mais il y a d'autres choses que nous pouvons faire, mais c'est tout. Bonne stratégie, parce que c'est traditionnellement ce qui a été utilisé sur les déteste Jemele. Andi est ce qui continue d'être utilisé par beaucoup de sites, il est donc très compréhensible si nous pouvons rendre les liens visités légèrement différents dans un lecteur d' écran. Ils auront tendance à être lus lien a été visité de toute façon, donc vous pouvez juste vouloir fournir cette information aux utilisateurs voyants. Donc là, au moins obtenir autant d'informations est un lecteur d'écran de blancs. Un lecteur d'écran en quelque sorte obtient un avantage. Peut-être que c'est bien qu'ils ne courent pas toujours derrière, et nous voulons aussi penser au texte descriptif. Donc, nous voulons éviter cela. Cliquez ici pour voir un article disant Le clic ici est le lien. difficulté avec cela est dans une section readapt lecteur d'écran à la fois, donc nous allons simplement dire Lien. Cliquez ici, et cela ne vous donne pas vraiment d'informations sur le sujet du lien. Donc, si vous pensez, imaginez quand le lecteur d'écran lit la taxe qui est un Lincoln, il dit Lien. Et puis il lit. Le taxé qui taxé devrait dire à l'utilisateur marcher. Le lien est à cause des alliés. Tout ce que nous obtenons, c'est un tas de choses qui disent Cliquez ici, cliquez ici. Cliquez ici sur. Cela n'a pas de sens à des fins de référencement, car il ne dit pas aux moteurs de recherche de quoi le lien est à propos. Sur le même problème, ce sont des lecteurs d'écran. Ils peuvent voir que c'est un lien, mais ils ne savent pas vraiment de quoi il s'agit. Donc, s'assurer que nous avons taxé descriptif dans nos liens ajoute beaucoup de contexte 18. Couleur: dans cette leçon se penchera sur le rôle que la couleur joue dans notre conception. Sur l'une des choses les plus importantes est de s'assurer qu'il ya suffisamment de contraste entre le premier plan sur l'arrière-plan, parce que si nous mettons du texte sur, disons, fond blanc, taxe noire, super facile à lire. Mais beaucoup de temps pour populaire à mettre, disons, disons, taxe sur les images sur il n'y a pas toujours autant de contraste dans les attaques MX vraiment difficile à lire. Donc, en ce qui concerne les lignes directrices en matière d'accessibilité qui constituent des normes claires de contraste, il faut parvenir à ce que ce texte soit lisible. Donc, un conforme, qui est ce que la plupart des entreprises commerciales rechercheraient un texte normal veut être de 4.5 à 1 sur les grandes attaques parce qu'il est facile à lire, peut avoir un peu moins de contraste. C' est si agréable d'être libre d'en avoir un. Si vous êtes, disons, un ministère gouvernemental ou quelqu'un qui est une organisation qui a des normes d'accessibilité très élevées , vous voulez probablement donner la conformité Triple A, ce qui signifie que votre taxe normale veut avoir un contraste de 7 à 1 sur votre grande taxe veut avoir un contraste de 4,5 à 1. Comment savez-vous combien de contraste est ? Eh bien, vous pouvez utiliser un des nombreux outils de contraste. Ainsi, exemple, celui-ci est fourni par Web Aim, et vous prenez les valeurs hexadécimales de vos couleurs et vous les poinçons, et il vous dira quel est votre taux de contraste. Il y a aussi une variété d'outils survolés. Un tel plug ins de navigateur qui le fera pour vous, peut-être même la section de pipette sur vous dire quel contraste est là pour le rendre beaucoup plus facile . Cedar doivent retirer les valeurs de couleur et pris à un outil indépendant. Dans cet exemple, nous utilisons, ah, fond blanc, joli texte bleu, et cela crée un grand contraste de couleur adapté à tout. Mais disons, si nous faisions une sorte de rouge taxé que si ce n'était pas assez fort, disons encore ici que nous avons utilisé un rouge moyen sur un fond blanc qui ne serait pas nécessairement atteindre les directives d'accessibilité, parce que si vous Regardez, disons, le texte normal là-bas, c'est beaucoup plus difficile à lire dans le texte noir. Maintenant, lorsque nous passons à un texte volumineux, alors il est un peu plus facile à lire qui atteindrait alors le double a parce que vous n'avez pas besoin d' autant de contraste sur le grand taxé. Mais il n'atteindrait toujours pas les normes du voyage parce que vous avez vraiment besoin d'un contraste fort pour le rendre facile à lire. Je déteste juste regarder l'exemple et comparer cela pour dire, le titre de la diapositive. Il y a une différence évidente dans la facilité de lecture. L' autre chose à considérer est que la couleur ne doit pas être utilisée comme indicateur. Donc, nous en avons parlé dans les liens. Vous ne pouvez pas simplement faire des liens une couleur différente. Ils veulent avoir un peu de surindicateur parce que si l'utilisateur est aveugle de couleur, ils ne vont pas nécessairement être en mesure de voir. Ainsi, par exemple, beaucoup de messages de succès de temps seront en vert et les messages d'erreur seront en rouge ou boutons et les liens indiqueront les choses bien. n'y a rien de mal à avoir un message de réussite vert et un message de flèche rouge, car pour la plupart des gens, ces couleurs indiquent le chemin heureux sur une erreur. Mais nous ne pouvons pas seulement l'utiliser, parce que si nous faisions cela pour ces utilisateurs sont incolores, ils ne seraient pas en mesure de dire ce qui se passe. Alors regardons un exemple à ce sujet sur un vrai site Web. Donc, sur l'anxiété Leeds clink pour finale si l'exemple haut d'un message d'erreur qui ne serait pas très accessible, parce que si vous êtes rouge, vert colorblind, vous pourriez ne pas être en mesure de voir ce rouge. Et cela ne vous indiquerait pas nécessairement que c'était une erreur. Alors que dans l'exemple du bas, nous avons ensuite ajouté dans un petit triangle d'erreur avec la taxe de sortie appropriée pour informer l'utilisateur leur lecteur d'écran là dans un domaine aérien afin que quand ils l'utilisent, voit cela, ils peuvent Regardez la couleur. Ils peuvent regarder la petite icône qui peut regarder le descriptif, taxé dans l'icône sur toutes ces différentes fonctionnalités. Dis-leur que c'est une erreur. Donc, s'ils sont aux prises avec l'une de ces choses, que beaucoup d'informations pour leur donner le contexte, faites-leur savoir qu'il s'agit d'une erreur. Nous ne comptons pas seulement sur leur vision parfaite des couleurs pour être en mesure d'arranger ça. Cela le rend aussi plus sémantique parce que nous supposons que les gens savent que le rouge signifie époque. Mais cela pourrait être une chose culturelle sur, donc juste leur donner un contexte beaucoup et il y a beaucoup de sens sémantique que possible le rend plus clair 19. Images: dans cette leçon va examiner l'utilisation des images hors, et cela commence par les attributs out. Il s'agit d'une description alternative qui donne aux lecteurs d'écran un contexte sur ce dont il s' agit . Donc, vous collez votre image dans, puis dans la balise de sortie, vous décrivez ce qu'il y a dans l'image. Donc, si vous utilisez un lecteur d'écran, vous savez ce qui se passe. Et nous avons seulement besoin d'utiliser les attributs out quand il y a quelque chose à décrire. Donc quelque chose est purement décoratif alors on n'a pas besoin là-dedans. Ce que nous voulons est une balise vide, par exemple, sur ces boutons ici, nous avons une petite icône de newsletter pour dire Rejoignez notre newsletter icône Personne pour demander un rappel qui, évident à partir du texte du lien. Que se passe-t-il là dans les chiffres des icônes ? Décoratif pour ajouter plus de sens. Donc, dans ce cas, plutôt que de décrire l'image parce que cela ne donnerait aucune valeur à quelqu'un utilisant un lecteur d' écran, nous incluions toujours l'attribut out. Mais ce serait juste vide et quelqu'un pour l'inclure de sorte qu'un écran que nous avons fait sait qu' il est censé être vide, parce que si vous laissez juste dehors, le lecteur d'écran va lire sur l'image étiquetée, alors que si nous venons de mettre un balisage vierge que le lecteur d'écran sait simplement ignorer cela parce que c'est décoratif. Andi, moins que tu ne le regardes, tu es cité. Tu n'as pas besoin de voir quoi que ce soit à ce sujet. Nous devons également considérer taxés dans les images. Et en général, nous voulons éviter cela si possible. Comme les lecteurs d'écran ne peuvent rien faire à ce sujet et certains outils d'accessibilité qui peuvent modifier le texte d'une santé, par exemple, ils peuvent ajouter plus de contraste à celui-ci. Ou ils pourraient bien changer la taille de la police. Ils ne peuvent pas vraiment faire quoi que ce soit si elle est intégrée dans une image afin qu'ils ne puissent pas travailler dessus . Mais si vous devez l'utiliser, assurez-vous qu'il est conforme à l'accessibilité. Standard cela signifie avoir un contraste d'au moins libre vers, même s'il s'agit d'un texte volumineux. Et même si vous ne faites que doubler une conformité si vous optez pour Triple A ou son corps normal plus petit que le contraste veut être encore plus élevé pour donner aux gens les meilleures chances de pouvoir le lire 20. Audio et vidéo: dans cette leçon portera sur l'utilisation du multimédia dans nos conceptions. Pour la production vidéo, un bon point de départ est d'éviter les images clignotantes. Cela provoque de vrais problèmes. Des gens. Nous avons des conditions comme l'épilepsie, mais aussi les choses sont des alternatives bien sur. Pour être honnête et clignotant, Andrea est juste ennuyeux à travers le tableau. Beaucoup de gens trouvent ennuyeux, et donc, si nous pouvons l'éviter, c' est un bon début. Envisagez de faire une description audio de ce qui se passe. Faites cela pendant que vous filmez la vidéo parce qu'il est vraiment difficile de revenir en arrière et de le faire plus tard , puis est allé éditer les vidéos. Si vous devez utiliser taxé. Idéalement, on ne veut pas. Mais là où, là où nous devons l'utiliser, allons simplement nous assurer qu'il est conforme aux lignes directrices en matière d'accessibilité. Donc, nous voulons beaucoup de contraste élevé sur leur sur. Nous voulons un bon texte. Lorsque nous prenons ensuite cela et le mettre dans une page Web. Nous voulons utiliser les balises natives de possible pour lui donner ce contrôle sémantique de sorte que la vidéo et les balises audio, plutôt que les lecteurs flash old school et des choses comme ça, si nous pouvons beaucoup mieux donner les fleurs de contrôle sur parce que, encore une fois, c'est quelque chose qu'un outil d'accessibilité peut entrer. Peut inspecter les espoirs que TML peut comprendre ce qui se passe et donner à l'utilisateur le contrôle sur ces malheurs. Si nous utilisons un système propriétaire, ils n'auront pas forcément accès à ça à nouveau. Éviter le jeu automatique est génial, les gens ne trouvent pas vraiment ennuyeux à nouveau. Ce n'est pas quelque chose seulement pour les problèmes d'accessibilité spécifiques, dont il est un guide d'accessibilité à ne pas utiliser en fin de compte, mais aussi tout le monde vous remerciera parce que presque tout le monde trouve jeu automatique ennuyeux ainsi sur. Nous voulons nous assurer que ces commandes vidéo sont accessibles. Donc, pour la mise en œuvre de contrôles personnalisés que nous voulons tester ceux avec la navigation au clavier assurer qu'ils fonctionnent bien et que vous pouvez les parcourir. Nous avons dit lecteur d'écran ou sans utiliser de souris, juste pour s'assurer que tout le monde peut accéder à ces contrôles lorsque cela est possible, nous voulons toujours fournir une transcription de ce qui se passe Andi à nouveau. C' est juste quelque chose qui le rend meilleur pour tout le monde, parce que même les personnes sans handicap préfèrent souvent lire la transcription, par exemple, vous êtes sur les transports publics. Peut-être que vous avez oublié votre casque ou que vous aimez lire avec la vidéo. Je connais beaucoup les cours FedEx. Ils ont mis la vidéo d'un côté de l'écran, et ils ont mis la transcription de l'autre côté de l'écran afin que vous puissiez littéralement écouter la vidéo et lire sur son évidemment génial si vous avez l'ouïe et les parents. Mais beaucoup de gens qui peuvent entendre bien aiment le faire aussi. Donc, encore une fois rend juste mieux pour tout le monde sur. Vous pouvez facilement obtenir ces transcriptions et légendes faites par les fournisseurs afin que vous puissiez aller embaucher quelqu'un sur un service comme cinq ans. Vous pouvez aller aux services de transcription comme Rev sur l'Egypte. Donnez-leur votre audio dans votre vidéo et ils se battent avec des légendes ou des transcriptions ou tout ce que vous voulez à nouveau. Les légendes semblables à une transcription se transcription deviennent une version écrite et polie. sous-titres sont les sous-titres. Il sera effectivement dans la vidéo allumée à nouveau. On peut se juter facilement. Allez les obtenir fabriqués à partir d'outils tels que rev ou fiver. Nous pouvons également télécharger vos vidéos sur YouTube, et YouTube va maintenant créer automatiquement des légendes pour vous, ou nous pouvons les créer manuellement en utilisant un logiciel comme sous-s Factory, qui aura eu ces sous-titres dans. Ça dépend de ce que vous travaillez. Si vous voulez garder les choses rentables, alors vous pouvez faire vous-même avec la sous-usine. Si vous voulez juste le faire, vous pouvez nous amener quelque part comme Rev on. Payez quelqu'un d'autre pour le faire pour vous. Et puis on pourrait juste les coller sur la vidéo, même si vous ne pouvez pas entendre, vous pouvez lire avec ce qui se passe. 21. Formulaires: dans cette leçon se penchera sur l'utilisation de formulaires dans nos conceptions. C' est l'une des fonctionnalités les plus puissantes que nous puissions utiliser. Voici l'étiquette. Chaque entrée doit être préparée avec l'étiquette de sorte que lorsqu'un écran arrive vraiment à champ de formulaire, il puisse identifier ce qui est censé être entré dans ce champ en lisant l'étiquette à l'utilisateur. Donc, chaque fois que vous allez sur la saisie, ils devraient être inappropriés étiquette indiquant à l'utilisateur ce qui se passait est devenu une pratique assez courante d'utiliser les attributs d'espace réservé sur les champs aussi. Cela n'est pas recommandé car cela est beaucoup mieux servi comme un indice supplémentaire plutôt que de présenter les mêmes informations qu'une étiquette. si Par exemple, vous aviez un champ de date de naissance, vous voudriez que l'étiquette indique la date de naissance. Vous ne mettrez pas la date de naissance dans l'espace réservé parce que ce serait la duplication des informations. Au lieu de cela, vous voulez fournir un format masqué, par exemple, que vous souhaitez que la date soit mise à la fois, par exemple, données une barre oblique d'une année similaire. Elle voulait dans ce format qui serait sur la chose appropriée à mettre dans le détenteur de place. Ou vous pouvez également simplement éviter d'utiliser des espaces réservés parce qu'ils ont tendance à être déroutants. Une des choses que j'ai regardé quand je faisais ma thèse de maîtrise et des guerres de psychologie, juste quel effet l'espace réservé avait sur la plupart du temps. Il a confondu les gens parce que même si c'est génial dans le navigateur, ce n'est pas clair, surtout si votre vision n'est pas génial, comme il semble qu'il est en quelque sorte d'être terminé. Andi. Donc, parfois, les gens ignorent simplement l'entrée tous ensemble, pensant que j'ai déjà la valeur ou ne savais pas pourquoi cette valeur était là dedans. Ainsi, les espaces réservés peuvent être utiles pour fournir des conseils. Mais les sauter tous ensemble est souvent une meilleure option. Nous désactivons souvent les boutons, surtout lorsque nous voulons que le formulaire soit dans un état valide. Mais encore une fois, nous vous recommandons d'éviter de désactiver. Les livres étaient possibles parce que lorsque vous faites cela, il prend l'index de tabulation. Donc, l'onglet index où si vous sautez à travers la page en appuyant sur Tamp, il vous mènera à toute l'action. Quels éléments sur la page, tels que les liens, les importations, les boutons et lorsque vous désactivez un bouton, il en sort. Donc encore une fois, si vous utilisez un lecteur d'écran et votre tabulation à travers la page, vous ne verrez pas ce bouton, et vous allez être confus et vous demander où il est. Donc, une meilleure option est de permettre à l'utilisateur de soumettre le formulaire dans un état valide en allant sur le bouton et en cliquant dessus, puis en lui disant ce qu'il a mal fait sur ce qu' il doit corriger avant de pouvoir le soumettre et de continuer lorsque le les parties les plus difficiles ou de rendre les formulaires accessibles est de faire face aux erreurs Si possible, alors nous voulons les amener à la source de l'époque. Mais ce qui est le plus important est qu'il est vraiment clair que le formulaire est invalide et, plus important encore, ce dont ils ont besoin pour corriger les champs qui sont cassés. Donc, beaucoup de temps vous soumettez le formulaire, et il dit juste, s'il vous plaît remplir tous les champs de formulaire. Certains d'entre eux sont facultatifs, certains d'entre eux et non vous ne savez pas lesquels vraiment ennuyeux. Par conséquent, nous voulons dire clairement à l'utilisateur quels champs sont à l'origine du problème, et ce que nous avons besoin de corriger un excellent moyen est de les prendre à l'erreur, mais aussi de fournir un peu chaque description sur nous pouvons utiliser la zone décrite par toe identifier un message d'erreur pour ce champ parlera un peu plus de la zone plus tard. Mais dans cet exemple, par exemple, nous avons passé l'entrée d'adresse e-mail. Andi, peut-être qu'ils l'utilisent n'ont rien importé là-dedans. Donc, nous signalons le MANERA dans ce cas que l'adresse e-mail est déjà tisserands enregistrés . Nous avons donc l'étiquette décrivant ce qu'est l'entrée. Mais nous avons également cette zone décrite par qui est leur dire que les robes e-mail déjà enregistrés et donc signifie à mal se connecter ou utiliser une adresse e-mail différente. 22. ARIA: dans cette leçon parlera de la région et nous commencerons par une introduction. C' est donc beaucoup pour les applications Internet accessibles et riches. Et cela est venu parce que nous commençons à construire sur ce Web cool pour des choses où nous étions en train d'implémenter des fonctionnalités de style ordinateur de bureau dans un navigateur. Onda Amour. Le temps est vraiment difficile de transmettre le sens sémantique au navigateur à la technologie d'assistance . Et donc le W Free See est parti sur le Kim de la zone incorporée dans qui html sur elle nous permet de faire toute cette fonctionnalité cool qui construisaient dans Ces choses sont juste où pages leurs applications, pour transmettre ce sens à la dans le navigateur afin que tout le monde puisse travailler sur ce qui se passe. Notre premier arrêt rappelé du secteur en utilisant le HTML sémantique. Donc quand on peut utiliser ça, on fait Onda. Nous avons seulement une sorte de retour à la zone quand nous ne parvenons pas à communiquer le sens que nous voulons dans vanille déteste e-mail, mais il y a des moments où vous pourriez vouloir l'utiliser, mais plus proactivement. Par exemple, dans les formulaires moins non, nous avons parlé de la façon dont nous ne voulons pas désactiver le bouton de soumission, par exemple, parce que cela va sortir de l'index de tabulation. Maintenant, il est bon de rendre l'aspect inférieur désactivé, donc nous pourrions utiliser CSS pour le styliser de sorte qu'il soit superbe et ait une petite hache sur le curseur. Quelqu' un survole, mais nous ne voulons pas réellement utiliser une vue désactivée parce que cela le rend invisible pour les technologies d'assistance. Donc, de la même manière que nous pouvons tout simplement génial avec CSS et faire croire qu'il est désactivé , nous pourrions également utiliser quelque chose comme les attributs de zone désactivée pour dire aux lecteurs d'écran ce qu'ils verraient comme une personne excitée visuelle verrait. Il verrait un grand bouton de sortie de la même manière que le lecteur d'écran serait toujours en mesure de taper dessus. Mais il verrait cette zone désactivée. L' un des attributs que nous pouvons utiliser les rôles Harris. Andi Rolls racontent à la technologie d'assistance quel type de noms d'éléments. Ainsi, par exemple, si vous plantez un menu personnalisé, vous pouvez lui donner un rouleau de navigation Eh bien, par exemple, si vous stylisez des cases à cocher sur, la seule façon de faire est avec une série de travées imbriquées assez commun. Si vous faites des formulaires fantaisie, alors vous voudriez donner à l'élément cliquable là une case à cocher pour que la technologie d'assistance comprenne que cela empêche une implémentation d'une case à cocher qui n' utilise pas le type d'entrée. Vérifiez ce que le modèle standard et aussi le texte roulé, ce qui est un peu controversé parce qu'il ne fait pas partie de la norme officielle ou spécifications. Mais beaucoup de navigateurs l'ont implémenté. Donc, si vous avez quelque chose où un lecteur d'écran est à cause de toutes les balises incorporées Aaron qui le divise en phrases très bizarres, vous pourriez mettre du texte rouleau sur l'élément parent la plupart du temps Cela obtiendrait l'écran lecteur pour le lire. , Non, tous accès à Billy Consultant comme ça. Beaucoup de gens aiment s'en tenir à la norme, et je peux complètement comprendre que je suis un peu pragmatiste, et je veux la meilleure expérience possible pour quelqu'un qui utilise un lecteur d'écran, donc cela ne me dérange pas de l'utiliser. Je pense que parfois ça peut résoudre le problème. C' est une décision pour vous et à quel point vous trouvez un problème. Ce dont nous n'avons pas besoin, ce sont des rouleaux redondants Par exemple, si vous utilisez la balise « now of » pour indiquer la navigation, vous n'avez pas besoin d'ajouter le rôle de navigation parce que c'est déjà implicite par l' ALENA AG et la parcourir il peut déjà compris. Ce n'est que si nous faisons un remplacement en utilisant différents réservoirs que nous avons besoin d'avoir cette signification supplémentaire. Un bon exemple de ceci est du W trois C, où ils construisent quelques onglets sur. Ils ont cette liste d'onglets, qui est les en-têtes supérieurs, et à l'intérieur ils ont des boutons, chacun qui avait des vœux un rouleau de tabulation. Et il utilise la zone sélectionnée pour indiquer si ce bouton est sélectionné ou non. Sur aussi ce qu'il contrôle sont ci-dessous. On a les onglets, qui ont fait des dibs parce qu'il n'y a pas d'étiquette de tamp sur. Ils vont mettre les étiquettes appropriées sur. Ils utilisent un index de tabulation de zéro. Donc normalement, si nous utilisions un nombre positif qui indiquerait le droit du navigateur, ce devrait être le cinquième élément que nous lui donnons. Tabin a l'air de cinq quand ils tombent à travers ça pour toi zéro. Cela met dans l'index de tabulation mais baisse dans le flux normal de la page de sorte que les Browns ont compris, et il y a aussi moins un, ce qui signifie qu'il ne serait pas normalement dans l'index de baignoire. Mais nous pouvons l'assigner manuellement en utilisant JavaScript comme ce qui se passe là-bas avec l' index TAM. Donc, ici, nous pouvons juste voir des tas de bons exemples ou où vous utiliseriez toutes les balises de zone et comment les utiliser. Nous utilisons également des étiquettes Teoh Add contexte. Donc, par exemple, si vous faites une petite icône de hamburger, ce qui pourrait être évident pour un utilisateur voyageant, comment communiquerons-nous cela sans se terminer ? On pourrait ajouter une taxe cachée. Mais nous pouvons aussi simplement utiliser l'étiquette de la zone et juste dire que c'est dans le bouton de menu. Et puis nous avons une zone cachée, c'est là que nous voulons retirer tout ce qui est purement présentatif. Donc, tout ce qui est important que le navigateur doit savoir, nous ne cacherions pas. Mais par exemple, dans cet exemple que j'ai ici, nous avons un article et c'est juste une image dans un titre, puis vous cliquez sur l'histoire principale. Eh bien, l'image enregistre exactement la même chose est le titre. Donc, si vous faisiez défiler la page sur, vous utilisiez un lecteur d'écran que vous ne pouviez pas voir. Vous n'auriez pas besoin de savoir que cette image était là parce qu'elle jute, communique la même information était en tête. Vous n'obtenez plus de valeur si vous ne pouvez pas voir l'image elle-même. Et donc nous pourrions juste cacher cela, bien que dans ce cas, il vaut la peine de noter que nous pourrions simplement utiliser un réservoir vide. Mais vous pouvez également envelopper cette image dans une balise de lien, auquel cas vous pouvez simplement masquer le lien entier parce que vous avez encore une fois l'information et titre en dessous en termes de formulaires hors formulaire. Alors on veut utiliser Teoh. Les étiquettes étiquetées par établissent un lien entre un élément et des étiquettes. Donc, si vous n'utilisez pas seulement les étiquettes standard, vous pouvez faire la même chose par la zone étiquetée par prop. Et puis nous avons un tas de fonctionnalités, par exemple, pour recréer des cases à cocher dont nous avons parlé. Vous pouvez utiliser une plage et vous ne pouvez pas des choses comme la zone cochée pour l'indiquer sur Aria désactivée lorsque vous faites les fonds que vous ne voulez pas retirer l'onglet dans la prochaine. Mais vous voulez indiquer aux utilisateurs qu'il ne devrait pas soumettre ce formulaire un instant parce qu' il est cassé. Donc, nous allons également regarder un exemple de la façon dont nous pourrions utiliser cela. Donc, ici, nous avons un petit qui est une case à cocher sur. Nous allons indiquer que cette case à cocher sur l'inscription à une newsletter. Nous allons donc utiliser la zone étiquetée par et lui donner l'I D de l'élément que nous voulons. Mais aussi, disons que nous voulons ajouter un peu plus d'informations, disons un petit texte en dessous. Ensuite, nous pouvons utiliser la zone décrite par sur le chemin de penser à deux. Est la zone étiquetée par Il sera lu dès le début quand il explique ce que l' entrée est à propos et vraiment décrit par vient plus tard, il économise jusqu'à la fin. C' est comme des informations supplémentaires. Ce n'est pas si important que nous pouvons attendre plus tard qui veut aller dans la zone décrite par Enfin, nous avons des régions vivantes. Donc amoureux, Web 2 faisait des mises à jour dynamiques sur la page. Andi, si tu pars de la page, tu ne regardes pas la page. Vous utilisez un lecteur d'écran. Vous n'allez pas nécessairement savoir que certains contenus en haut ont été mis à jour. Si vous êtes plus bas de la page, donc pour dire à l'utilisateur ce qui se passe ici, nous pouvons utiliser Ari vivant sur ce, dit au lecteur d'écran de lire. Tous les changements sont en cours. Il y a deux sortes. Donc, il y a le réglage poli, ce qui signifie qu'un lecteur d'écran lisera quand il aura le temps. Donc, s'il lit quelque chose d'autre, il le lira d'abord et ensuite l'annoncera peut-être plus tard. Assertive signifie que vous devriez annoncer ces changements dès qu'ils se produisent maintenant pour Evers et Alertes, alors nous avons déjà un raccourci pour vivre région que nous pouvons utiliser et lui demander dans un rôle d'alerte et qui dira au lecteur d'écran de lire l'alerte sur le chemin droit aussi.