Accessibilité Web : apprendre les meilleures pratiques pour créer des sites Web tout inclusifs

1. Introduction: Dans ce cours, je vais vous enseigner les principes fondamentaux de l'accessibilité web. Ce que c'est, pourquoi c'est important et comment mettre en œuvre les différentes bonnes pratiques dans vos projets web. site Web doit toujours être développé afin qu'ils puissent être consultés et interactifs par tout le monde, quelle que soit la capacité de l'utilisateur. Où l'accessibilité est un aspect fondamental du développement web dont chaque développeur doit être conscient. Et je vais vous montrer comment faire des plages de sites tout compris. Vous utiliserez ensuite cette nouvelle égalité reconnue Cray, votre propre site Web d'une seule page utilisant diverses techniques d'accessibilité qui amélioreront l'expérience utilisateur pour tous. Je suis David et je suis un développeur web front-end de Northridge en Angleterre. J' ai de nombreuses années d'expérience dans la création applications numériques pour une variété de clients internationaux. J' aime aider les développeurs de bien échec comme vous à améliorer leurs compétences, ce qui va les aider à plus de bactéries et finalement les aider à devenir le meilleur développeur de laine couru qu'ils peuvent être. Cette classe s'adresse aux étudiants qui ont des connaissances de base en HTML et CSS, mais qui aimeraient en apprendre davantage sur l'importance de l'accessibilité Web et comment implémenter ces fonctionnalités à travers éléments HTML communs créeront dans chaque classe est votre IDE préféré. Le code Vs sera mon éditeur de code de choix, et je l'utiliserai tout au long de la classe. Mais tous les autres que vous connaissez et que vous utilisez à l'aise sont absolument bien. Vous hébergerez votre projet de site Web sur GitHub Pages. Et ne vous inquiétez pas si c'est complètement nouveau pour vous. Je vais vous montrer à quel point c'est facile à faire. Et tout est totalement gratuit. Avec les compétences que vous gagnerez grâce à cette classe, vous serez en mesure d'offrir beaucoup plus en tant que développeur web, vous soyez indépendant ou que vous travailliez pour une entreprise. Vous serez en mesure d'expliquer non seulement l'importance de l'accessibilité du Web, mais aussi nous avons dû démontrer comment mettre en œuvre des fonctionnalités accessibles à n'importe quelle construction de site Web. Une autre façon d'appliquer nos nouvelles connaissances en matière d'accessibilité est bien avant le début du développement du projet. Ainsi, vous pourriez transmettre vos connaissances au stade de la planification ou d'un projet et conseiller créateurs de projet ou les concepteurs UX sur la meilleure approche et la création d'un site tout compris. Donc, à la fin de cette classe, vous serez confiant que toutes les fonctionnalités Web. Donc je projets que vous construirez sera accessible à tous. Donc, sans plus tarder, commençons. 2. Le projet de cours: Le projet que vous allez créer sera un site Web d'une seule page, qui comprendra au moins une navigation dans l'image, du texte, un formulaire et un pied de page. Maintenant, l'important ici est que ces éléments seront créés avec des fonctionnalités d'accessibilité en place. Donc j'aimerais que vous fassiez un site web d'une seule page avec quelques informations amusantes sur un héros personnel, que ce soit un héros musical et acteur, une actrice que vous admirez, ou quelqu'un d'important pour vous. Donc, je veux dire, tu pourrais même en faire une page sur ton animal préféré. Encore une fois, les composants accessibles que vous construirez seront la chose la plus importante. Ne passez donc pas trop de temps à trop penser à votre contenu. Donc, ce projet est un moyen parfait pour vous d'appliquer vos nouvelles compétences d'accessibilité trouvées à un site Web réel avec des comparateurs réels qui pourraient bénéficier de certaines fonctionnalités inclusives pour un projet réussi et recevoir cinq étoiles d'or à la fin de cette classe, vous devriez inclure des concepts qui sont couverts dans les leçons. Une fois terminé, vous devrez le tester pour vous assurer qu'il réussit tous les tests d'audit dans les embauches légères, assurant qu'il est entièrement accessible. Bien sûr, je vais vous montrer comment utiliser Lighthouse et comment tester au mieux votre travail et comment faire les correctifs nécessaires. Les élèves devraient utiliser leur IDE favori pour construire leur projet de classe. J' utiliserai du code VS, mais n'importe quel éditeur d'ID ou de code fonctionnera aussi bien. Et je vous encourage à partager votre travail sur Skillshare. Et pour ce faire, je recommande de déployer votre projet final pour obtenir des pages du hub. Donc, un compte GitHub est requis pour le faire. Mais ne vous inquiétez pas, je vais vous montrer à quel point il est facile de mettre en place et pousser votre travail sur une page web en direct pour tous. Mais tout d'abord, apprenons ce qu'est réellement l'accessibilité, pourquoi elle est importante, et les principes fondamentaux de la façon de l'implémenter dans votre site Web. 3. Qu'est-ce que l'accessibilité du web ?: Le pouvoir du web est dans son universalité. L' accès de tous, indépendamment de leur handicap, est un aspect essentiel. C' est une citation de TBL, l'inventeur et le parrain du World Wide Web et notre Seigneur et Sauveur bien sûr. Il n'y a pas plus d'un milliard de personnes ayant des handicaps variables. Et cela vient de l'Organisation mondiale de la Santé. C' est donc 15 à 20 pour cent de la population. Dans cet esprit, il est de notre responsabilité, en tant que développeurs, de produire des sites Web accessibles à tous. C' est un droit humain fondamental que tout le monde est traité de la même manière et pic avec n'importe quel handicap peut accéder au web de manière égale. Et c'est essentiellement ce qu'est la pratique de l'accessibilité web. Veiller à ce que vos sites Web soient utilisables par le plus grand nombre possible de personnes. Pour que cela soit possible, il existe certaines règles et règlements que vous pouvez suivre. Le plus remarquable est le WCAG, qui est le Web Content Accessibility Guidelines. Maintenant, ce n'est pas exactement une courte lecture par quelque moyen que ce soit, et je ne vous demande malheureusement pas de le lire mot pour mot, mais il est utile de comprendre les principaux concepts décrits dans ce document. Il y a aussi différents niveaux, qui mesurent les critères de réussite. Donc c'est un double a et le plus strict est aaah. Maintenant, vous devriez toujours viser à se conformer au moins un niveau unique est également utile de connaître votre pays peut avoir son propre ensemble de lois régissant l'accessibilité Web. Vous devez à votre entreprise pourrait avoir des problèmes juridiques si quelqu'un devait se plaindre du fait que votre site Web n'est pas accessible. entreprises ont été poursuivies dans le passé pour avoir ignoré ces mesures. Ce n'est pas quelque chose pour vous de vous en inquiéter. Parce que si vous suivez avec moi dans ce cours et que vous faites de l'accessibilité une partie de votre futur processus de développement web. Tu iras bien. Peut-être considéré comme l'ajout de fonctionnalités d'accessibilité dans votre projet web sera exhaustif dans le temps. Cela peut être légèrement vrai si vous essayez d'ajouter des fonctionnalités d' accessibilité dans un projet déjà construit. Mais je veux vous enseigner diverses techniques que vous pouvez mettre en œuvre lorsque vous planifiez et construisez un site Web. Et de cette façon, quand cela deviendra la norme pour vous de le faire, cela fera simplement partie de votre processus de développement sans prendre beaucoup de temps supplémentaire. Et pour être honnête, parce que c'est une partie essentielle du développement web, il ne devrait pas être considéré comme un temps supplémentaire du tout. Et parce que je sais que vous êtes un être humain génial, vous voulez bien sûr faire ce qui est juste et vous vous souciez de tous les humains également. Donc il n'y a pas de discrimination ici, non ? 4. Qu'est-ce que vous devez considérer: Alors, quel type de handicap avez-vous besoin de prendre en compte lors de la construction de votre prochain projet web ? Parlons d'abord des déficiences visuelles. Donc, cela pourrait être quelqu'un avec une faible vision avec une cécité complète ou un daltonisme. Ainsi, les utilisateurs ayant une cécité faible ou complète utiliseraient quelque chose appelé un lecteur d'écran pour naviguer à travers un site Web pour lire à l'écran est essentiellement un logiciel qui lit le texte numérique à haute voix. Et il y a quelques options payantes. Et les bijoux les plus célèbres et les dauphins, il y a aussi des options gratuites. Ainsi, le Mac Apple a la voix off intégrée. Et vous pouvez également télécharger ChromeVox à partir du magasin d'extension Google Chrome. Donc, ces personnes avec un mot de cécité faible ou complète comptent sur un clavier pour naviguer autour du site Web afin qu'elles ne puissent pas voir le pointeur de la souris, par exemple, appuyer sur l'espace de contrôle. Ok, donc voici un exemple d'utilisation de VoiceOver sur Mac. Vous pouvez donc voir une petite boîte de dialogue ici. Et aussi êtes-vous, hey, comme je l'onglet le long de la navigation, ce qui se passe et comment il lit. Lien à propos de la liste de trois éléments. Vous couplage galerie. Vous êtes actuellement sur un lien pour cliquer sur ce lien, appuyez sur Contrôle, vente aux enchères, espace. Lien, blog. Vous êtes actuellement sur un lien. Lien. Lire plus de noms2 requis menu contextuel de données non valides, modifier le texte avec le menu de remplissage automatique entré un chrome a une nouvelle fenêtre. Jeton être le menu de remplissage automatique, appuyez sur la flèche vers le haut, flèche vers le bas D, puis appuyez sur le retour en raison de l'entrer dans le formulaire. Vous êtes actuellement sur un champ de texte pour entrer du texte dans cette heure de champ. Donc ça peut être automatique. Ils vous demanderont d'appuyer sur la flèche vers le haut D, puis d'appuyer sur la touche Retour pour l'entrer dans le formulaire. Donc gardez à l'esprit que vous ne seriez pas, en fait, si vous êtes aveugle, vous serez vu tout cela. C' est littéralement juste la description audio qui est lue par la voix off. Donc, c'est pourquoi il est si important de s'assurer que tout votre HTML et votre balisage sont correctement sémantiques, écrits correctement afin qu'ils puissent être décrits et lus comme prévu. Maintenant, la typographie est vraiment important aussi d'être avec une faible visibilité serait affectée par certaines familles de polices qui sont utilisées et aussi la taille de la police ainsi. Et cela peut également affecter les utilisateurs plus âgés. Voyez en vieillissant, votre vision peut se détériorer. Donc, la topographie est également une chose importante à considérer pour les utilisateurs plus anciens du site Web. Maintenant, quand il s'agit de la cécité des couleurs, contraste est vraiment important. C' est donc l'utilisation de la couleur, du texte. Et les arrière-plans. Donc, si la couleur du texte est similaire à celle d'un arrière-plan , certaines personnes ne seront pas en mesure de lire le texte du tout. En outre, une autre chose à considérer est la façon dont vous utilisez la couleur pour différents changements d'état. Par exemple, sur un état de vol stationnaire, si vous modifiez simplement la couleur. Cela peut également ne pas être vu par certains utilisateurs. Le contraste est également important pour l'éblouissement de l'écran. Donc, il vaut la peine de considérer que quelqu'un peut regarder votre site Web sur un téléphone mobile ou une tablette à l'extérieur ou sur la boîte, ou quelque part où il y aurait des accrochages d'écran. Donc, vous n'êtes peut-être pas la personne qui conçoit réellement le site Web, mais vous pourriez avoir une certaine influence sur la façon dont le site Web est conçu. Ce sont donc des choses qui valent la peine d'être connues. Ainsi, vous pouvez vous impliquer dans ces conversations dès le début du processus de développement. Certaines personnes ou certains utilisateurs peuvent avoir un handicap auditif. Donc, cela a à voir avec la surdité. Et des choses à considérer. Voici toutes les vidéos ou la musique qui sont sur votre site Web où les légendes seraient vraiment utiles dans ces situations. Et aussi, s'il ya des actions qui se produisent sur votre site Web sont indiqués par le son seulement de voir ces personnes ne serait pas en mesure de reconnaître ces actions. Certains utilisateurs peuvent avoir des déficiences cognitives ou neurologiques. Et c'est comme les troubles d'apprentissage, le TDAH ou la SP, ou les troubles convulsifs tels que l'épilepsie. Donc, les choses dont vous avez besoin, considérez l'utilisation d'animations. Donc, vous ne voulez pas être trop haut avec vos animations qui peuvent être distrayantes et causer des problèmes pour certains utilisateurs. Il est également intéressant de noter que ces utilisateurs peuvent réduire le mouvement sur les sites Web. Donc, je peux aller dans les paramètres, puis cliquer sur réduire le mouvement. Et tant que le développeur nous a pris en considération, cela devrait réduire ou supprimer complètement toutes les animations des sites Web. Et je vais vous montrer comment faire ça dans une future leçon. Donc handicap physique, cela pourrait être quelque chose comme dystrophie musculaire ou quelqu'un avec une dextérité réduite. Et encore une fois, ces personnes qui peuvent ne pas être en mesure d'utiliser la souris, donc ils dépendent du clavier pour naviguer. Il est possible que les utilisateurs tiennent quelque chose dans leur bouche pour pousser les clés, et cela est embauché, je naviguerais autour d'un site Web. Une accessibilité à 100 % est quelque chose qui est vraiment difficile à réaliser, surtout sur les grands projets. Alors ne vous battez pas en ne pouvant pas y arriver à chaque fois. Souvent, ce seront des cas de bord. Alors faites du mieux que vous pouvez. Je vous conseille si quelqu'un ne vous avertit pas que votre site a un problème d'accessibilité, commencez un dialogue avec eux, soyez empathique, bien sûr, et prenez simplement des mesures raisonnables pour essayer de résoudre le problème. 5. Comment tester: Alors, comment pouvez-vous tester un site Web pour une bonne accessibilité ? Eh bien, je vais vous montrer le processus que je traverse quand je fais une telle chose. Donc, d'abord quand nous arrivons sur le site Web, j'ai essayé de naviguer dans tout le site en utilisant mon clavier seul. Donc, en utilisant principalement la touche Tab pour tabuler le long pour voir si je peux accéder à toutes les ancres et boutons et entrées. Maintenant, il est bon de savoir que tout contenu hors écran ne devrait pas être tappable. Imaginez donc un menu qui s'ouvre en cliquant sur une ancre de menu ou une icône de hamburger. Et vous ne verrez pas les éléments de navigation tant que vous n'avez pas cliqué sur ce bouton Ouvrir et Fermer. Donc, en gardant cela à l'esprit, lorsque vous tabulez à travers, vous ne devriez pas être en mesure de taper ou vous ne devriez pas être en mesure de taper dans ce menu caché. Vous ne pouvez taper sur ces éléments ou sur ces éléments que lorsque le menu est actif et ouvert. Donc ça vaut la peine d'être vérifié. Et vous devriez être en mesure de tabuler jusqu'au bas de la page, y compris le pied de page. Maintenant, un exemple de mauvaise accessibilité est sur un, disons une page de liste de blog Listes, des charges de différents messages de blog. Et il a un défilement infini, ce qui signifie que vous, quand vous utiliseriez votre souris, vous allez faire défiler vers le bas et plus de messages se chargeraient, et vous faites défiler plus loin vers le bas et d'autres messages se chargeraient. Maintenant, cela pourrait être une fonctionnalité cool pour moi, un nouveau livre pour quelqu'un qui est aveugle et a besoin de tabuler pour ne jamais être en mesure d'atteindre le pied de page jusqu'à ce que tous les messages soient chargés. Et c'est vraiment déroutant pour eux. Assurez-vous donc que vous pouvez tabuler jusqu'au pied de page et n'utilisez pas le défilement infini. Et je me concentre les anneaux devraient être présents sur les ancres, les entrées de boutons, tout ce qui est sélectionné. Maintenant, j'ai travaillé avec des créatifs dans le passé qui ont dit qu'ils n'aimaient pas l'apparence du contour bleu et qu'il devrait être supprimé. Mais il ne devrait jamais être retiré et il ne devrait pas être plus subtil non plus. Ainsi, l'anneau de mise au point peut être remodelé. Mais assurez-vous simplement qu'il ne soit pas supprimé car il est important pour les gens de voir ce qui est actuellement dans Focus sur la page. Donc, je dirais qu'il est de votre responsabilité en tant que développeur d'éduquer le désir créatif ou l'UX sur la raison pour laquelle il est important de garder dans ces anneaux de focus. Quand il s'agit de survoler les états sur une ancre ou un bouton ou tout ce qui est cliquable. Cela devrait, l'état du vol stationnaire lui-même ne doit pas être indiqué par la couleur seule. Parce que quelqu'un qui a une cécité aux couleurs ou une cécité partielle, nous ne pouvons pas voir la différence. Vous pouvez donc changer la couleur sur le vol stationnaire, mais inclut également quelque chose de physique, peut-être comme un soulignement ou une bordure. Maintenant, je suis allé à remarquer une animation sur une page vaut la peine de vérifier pour voir si elle peut être supprimée lorsque vous sélectionnez réduire le mouvement. Donc, dans vos paramètres pour votre MacBook, votre PC ou n'importe quel ordinateur que vous utilisez. Cela devrait être une option dans vos paramètres d'accessibilité pour activer le mouvement réduit. Et puis lorsque vous revenez sur le site Web, vous pouvez voir si le développeur a inclus ceci à leçon ou supprimer complètement toutes les animations qui sont dans le site Web. Comme mentionné précédemment, les animations distrayantes peuvent être un problème pour tout le monde, a eu des problèmes cognitifs. Maintenant, voici quelques conseils pratiques pour tester l'accessibilité à l'avant. Jetons un coup d'oeil à quelques outils utiles que nous allons creuser plus profondément dans le code lui-même. 6. Outils d'essai utiles: Regardons quelques outils utiles qui vous aideront lors des tests pour une bonne accessibilité. Donc, le premier que je veux vous montrer est dans Google Chrome. Donc, si nous inspectons simplement la page qui ouvre nos DevTools, sur la droite ici. Il devrait y avoir une liste déroulante avec un peu de pneus légers inclus ici. Maintenant, si vous ne voyez pas ça, vérifiez d'abord. Et puis si elle n'est pas là, allez dans le magasin d'extension Google Chrome, téléchargez-le parce que vous ne pouvez pas l'ajouter à divers autres navigateurs si vous le téléchargez comme une extension. Il suffit de cliquer sur le phare. Ok, et nous avons quelques options ici, y compris les meilleures pratiques en matière de performance, référencement, et ce qui nous intéresse, c'est l'accessibilité. Vous pouvez également tester les appareils mobiles et de bureau pour voir comment cela fonctionne sur des appareils plus petits. Donc, je vais laisser quelques-uns de ces sélectionnés et je vais juste cliquer sur Générer un rapport. Maintenant, après quelques secondes, selon la rapidité de votre ordinateur et de votre connexion, cela devrait nous donner un rapport pratique et certaines écoles sont au sommet. Ok, et nous allons arriver ici en fait trois de ces verts et l'école est sur une centaine, qui est un peu ce que nous visons. L' accessibilité ici est un ambre, donc 87. Donc idéalement, vous voudriez que ce soit vert. Donc je dirais viser 90 à 100. Parfois, il est très difficile d'obtenir l'accessibilité à 100, mais essayez de l'obtenir 90 ou plus si vous le pouvez. Nous allons donc ignorer les meilleures pratiques en matière de performance, et le référencement, ils sont tous beaux. Mais l'accessibilité, il semble qu'il peut y avoir certaines choses que nous pouvons améliorer les cheveux. Donc, si nous faisons défiler vers le bas, nous pouvons voir l'accessibilité ici. Et puis cela nous donne quelques questions que nous devrions examiner en ce moment. Donc le premier est le contraste. Maintenant, il dit ici, la description ici pour le phare sont très utiles donc il vaut la peine de lire. Donc ça dit contraste. Ce sont des occasions d'améliorer la lisibilité de votre contenu. Ainsi, comme on l'a vu ici, que les couleurs de fond et de premier plan n'ont pas un rapport de contraste suffisant. Donc si on ouvre ça, on peut voir qu'il y a trois éléments défaillants. Et si je passe au-dessus d'eux, vous verrez que la barre de navigation en haut est en cours de surbrillance. Donc, il est dit ici, textes à faible contraste, difficile ou impossible pour de nombreux utilisateurs à lire. Maintenant, nous savons que ce sont les éléments de navigation en haut ici qui doivent être changés. Laisse-moi juste monter mon code ici. On peut voir ça. Maintenant, regardons notre navigation, qui est ici. Donc je vais faire ça et une sorte de gris. Faites-les tous un noir solide, comme ça, et ils sont mis à jour. D' accord. Suivant sur la liste dit, ok, les éléments d'en-tête de navigation ne sont pas dans un ordre décroissant séquentiel. Donc l'élément défaillant est h4. Donc, nous ne pouvons utiliser H4, la page si H1, H2 et H3 précède cela sur la page, mais il n'y a qu'un seul en-tête ici. Alors vérifions ce que c'est. Donc, vous pouvez voir ici est un H1, qui signifie que cela doit être un H2 parce que c'est l'en-tête suivant dans la ligne. Rappelez-vous que la tête et le numéro n'indiquent pas la taille de celui-ci, mais il indique l'importance et ils doivent être dans l'ordre séquentiel. Donc, là où il est dit Cinq de plus, il ne devrait pas y avoir un H4, ils devraient en fait l'être. Et H2. Donc, si gros. Ok, retournons au phare. Était ensuite, les éléments de formulaire n'ont pas d'étiquettes associées. Donc, il ouvre ça. Cela me dit que le nom d'entrée et l'e-mail n'ont pas d'étiquettes. Alors frapper, ils ont des espaces réservés, mais ce n'est pas suffisant. Ces entrées doivent comporter des étiquettes. Alors ajoutons-les. Ok, c'est notre nom. Ajoutons une étiquette. Label for est l'identifiant du nom et du nom et un astérisque car il est requis. Et puis nous ferons la même chose pour l'e-mail, pour l'ID de l'e-mail. Et puis nous écrirons un email ici. D' accord ? Et vous pouvez voir les étiquettes qui y apparaissent. Maintenant, cela a toutes les choses qui ont été signalées pour l'accessibilité. Donc, je ne vais pas faire est ce phare clair et puis est de générer un rapport une deuxième fois. Et j'espère que nous devrions être dans le vert. On y va. L' accessibilité est 100 et dans le vert, parfait. L' outil suivant que j'aime vous montrer est refroidi site améliorer vérificateur d'accessibilité. Et il est par le site de l'entreprise améliorer. Et vous pouvez le télécharger depuis le Chrome Web Store ici. Ok, et ça plonge plus loin que les étoiles de location légère. C' est donc vraiment utile si vous avez vraiment besoin de vous assurer que votre site Web est accessible pour doubler ou même tripler un standard. Le service est un outil d'accessibilité vraiment approfondi. Maintenant, d'abord, j'aime juste vous montrer les filtres ici. Donc, vous pouvez juste vérifier les différents niveaux, un débat pour l'avion. Vérifions tous. Vous pouvez également spécifier votre travail. Donc nous sommes des développeurs, alors gardons ça. D' autres s'appliqueraient aux fournisseurs de contenu, par exemple. Donc ce serait utile pour eux. Mais on veut juste vérifier le code. Et pour le moment, je viens d'obtenir des erreurs sélectionnées pour juste fermer les filtres. Il n'y a pas de zones, donc c'est vraiment bon. Mais que diriez-vous si nous ajoutons juste quelques matins et des commentaires juste pour nous assurer que nous avons tout couvert. Je vais aussi sélectionner tous les titres de poste, juste deux, juste pour qu'on puisse tout vérifier. Nous savons donc que nous n'avons pas d'erreurs, mais il y a des choses qui valent la peine d'être vérifiées. Donc, nous ouvrons ceci pour les interrelations, est-ce que la petite balise est correctement utilisée ? Il est écrit ici, Cliquons sur ça. Vous verrez que l'outil fait défiler automatiquement vers le bas jusqu'à l'instance de cela et met en surbrillance en rouge qui est ici. Donc tout cela me dit est de vérifier que j'utilise correctement la petite balise. N' utilisez pas la petite balise pour modifier la taille du texte. C' est très bien. Je n'utilise pas tout ça à la taille. Je l'utilise juste pour la déclaration de copyright ici dans le pied de page. Ok, bien sûr qu'on vérifie. Un autre. Images de texte. L' image est-elle libre de texte. Maintenant, cela a à voir avec le logo ici, qui est mis en évidence en grande partie sur le côté ici. Et je me dis que vous ne devriez pas utiliser d'images qui ont du texte à l'intérieur. Cependant, si les images de texte ne peuvent pas être évitées comme si elles figuraient dans un logo d'entreprise , par exemple, la balise alt doit contenir le même texte que l'image. Donc, le texte alternatif le dit ici, ne contient pas le même texte. Donc nous sommes tous bons. Il y a donc quelques outils utiles à utiliser. Je recommande que si vous allez coder avec moi quand nous commençons le projet que vous utilisez Lighthouse pour tester au fur et à mesure que vous allez, car il signalera les problèmes utiles que vous pouvez modifier. Si vous voulez vraiment aller plus loin que Siteimprove va vraiment dans beaucoup plus de profondeur d'accessibilité. Donc deux options là. 7. Markup sémantique: Maintenant, regardons dans la maquette sémantique et pourquoi est important pour l'accessibilité. Donc, ici, nous pouvons voir une mise en page typique du site Web et remarquer les différents éléments et les différentes balises HTML utilisées. Monsieur, nous avons un NAB qui est à l'intérieur de l'en-tête. Nous avons un pied de page en bas, nous avons un côté. Et puis dans le centre où le contenu principal est, est une balise principale avec la section. Et cette section a une balise d'en-tête 1. Et puis dans la section est un article. Donc, ce n'est qu'un exemple des différentes balises de mise en page que je voulais vous montrer. Et je voulais également souligner que vous ne pouvez pas voir div unique. Donc, ce que j'essaie de traverser ici, c'est de ne pas utiliser un div ou moins. y a littéralement pas d'autres balises que vous pouvez utiliser pour cette situation. Voici donc quelques divs, et c'est pour un composant de navigation ou un menu de navigation. Et puis il y a juste des conteneurs diff et dans les développeurs, des divs individuels pour chaque élément de menu. C' est une mauvaise façon de le faire. Ainsi, comme mentionné sur la diapositive précédente, n'utilisez pas de divs et comme vous devez le faire. Donc, un meilleur exemple est l'utilisation d'une balise nav pour le conteneur. Et puis nous avons une liste non ordonnée. Dans la liste non ordonnée, nos articles de liste individuels. Donc encore une fois, il suffit d'essayer d'utiliser les réservoirs qu'il est beaucoup plus clair pour les lecteurs d'écran pour indiquer quelle partie du site que sur, si vous utilisez des balises sémantiques est facile de distinguer entre les différents types de données. Et aussi vraiment bon pour les moteurs de recherche tels que Google pour naviguer à travers votre page. Donc, HTML sémantique est tout au sujet de l'utilisation des balises correctes pour chaque élément. Qu' est-ce que cela signifie pour les lecteurs d'écran ? Jetons un coup d'oeil à la façon dont un lecteur d'écran lirait ces deux exemples. Jetons d'abord un coup d'oeil à la façon dont le lecteur d'écran lit cette navigation sur la page, alors que nous l'avons codé avec seulement divs. Donc pas de la meilleure manière sémantique. Vous êtes actuellement sur une nouvelle fenêtre. Vous êtes actuellement sur un lien. Vous êtes actuellement sur un lien. Pour cliquer sur ce lien, contrôle de l'herbe, espace de vente aux enchères. la musique. Ok, donc il lit comme un lien et il lit le nom du lien. Mais cela pourrait être plus descriptif. Il n'y a aucun moyen de savoir. Il s'agit d'un menu de navigation. On dirait juste que c'est une sélection ou des liens aléatoires, qui pourraient être n'importe où sur la page. Voyons maintenant comment le lecteur d'écran lit cette navigation lorsque nous utilisons les éléments HTML de navigation corrects. Ok, Maintenant ces trois éléments sont dans une liste correcte dans le HTML. Voyons comment le lecteur d'écran le lit comme un onglet à travers l'élément de la page à propos. Les éléments de liste ont une nouvelle fenêtre. D' accord. Donc, il est effectivement dit qu'il y a une liste de trois éléments parce qu'il sait que ces éléments sont dans une liste de, bien trois éléments, puis pas dans certaines balises div aléatoires. Donc, juste ce petit peu d'informations supplémentaires indique à l'utilisateur qu'il s'agit d'une liste de trois éléments. Donc légèrement cela va être un menu d'une description. Jetons maintenant un coup d'oeil à certaines balises HTML que vous ne connaissez peut-être pas. Donc ce ne sont pas forcément si communs. Et assez souvent, au lieu d'utiliser ces balises correctes, divs peuvent être utilisés ou des balises de paragraphe peuvent être utilisées alors qu'il y en a tellement que vous pouvez choisir. Voici donc un bon exemple d'utilisation d'une balise temporelle pour représenter ce jour du 20 mai ici. Et que diriez-vous de la liste de description ? Vous avez donc peut-être entendu parler d'une liste ordonnée ou d'une liste non ordonnée. Eh bien, cette liste de description contient le terme de description, puis le détail de la description. Et ce détail est pour le terme ci-dessus. Donc c'est une sorte de résumé du point ci-dessus. Donc, c'est différent genre de liste qui vaut la peine de savoir. Que diriez-vous de la balise d'adresse ? Ainsi, dans les balises d'adresse, vous pouvez contenir une adresse physique, contenir un numéro de téléphone et un e-mail, même des points de carte ou de longitude et de latitude. Vous pouvez même inclure des poignées Twitter et d'autres URL de médias sociaux. Que diriez-vous de la petite étiquette ? Ceci est souvent utilisé pour les droits d'auteur que je partage dans cet exemple. Donc va vraiment aider à l'accessibilité si vous utilisez les balises sémantiques correctes et couches vos sites Web de la meilleure façon que vous pouvez utiliser toutes les balises disponibles pour vous. Maintenant est de regarder de près quelques éléments HTML plus communs et comment ils peuvent être utilisés de la bonne manière accessible. 8. Éléments HTML: Examinons en profondeur certains éléments HTML plus courants et la meilleure façon de les utiliser pour une accessibilité optimale. Donc, avec les en-têtes communs, vous êtes susceptible de voir H1, H2, H3, et ainsi de suite dans, jusqu'à ce que nous atteignions H6. Et j'ai vu beaucoup de développeurs les utiliser de cette façon pour modifier la taille de la rubrique et c'est faux. Ils représentent le niveau d'importance et non la taille. C' est donc une chose importante à retenir quand il s' agit d'utiliser correctement ces balises d'en-tête. Maintenant, ils doivent suivre un ordre séquentiel sur la page. Donc tu ne peux pas juste tomber et H4. Si, par exemple, il n'y a pas de H1, H2, H3 le poursuivant sur la page. Et il est utile de savoir que certains lecteurs d'écran peuvent passer d'un en-tête à l'autre. Monsieur, tout ce qui fournit une sorte d'importance qui peut venir avant l'en-tête peut être manqué. Maintenant, laissez-moi vous donner un exemple de ce que je veux dire par là, excusez le style très fade ici. Mais vous pouvez voir divers articles de blog ou petits articles présentés de cette façon avec une date de publication et le titre texte Anson. Maintenant, le problème ici est, comme mentionné, certains lecteurs d'écran peuvent sauter entre les en-têtes pour naviguer autour de la page. Plus facile. Mais cela signifie qu'une fois que vous passez à cet en-tête ici, allez complètement manquer quelque chose au-dessus dans ce conteneur. Donc, cette date ne sera pas retirée. Alors s'il vous plaît ne pas exposer vos messages comme ça. La meilleure façon serait de les échanger et de garder toutes vos informations importantes sous l'en-tête. Les images doivent toujours inclure une balise alt descriptive. Et la seule fois où vous laisseriez les vieilles étiquettes vides si l'image est purement présentationnelle. Quand il s'agit d'utiliser des images qui contiennent des mots, par exemple, les logos contiennent souvent des mots. L' ancienne balise doit inclure les mots exacts utilisés. Maintenant, regardons rapidement quelques exemples d'images. Donc, quand il s'agit d'images, lorsque vous ajoutez une balise alt à votre balise image, assurez-vous qu'elle est descriptive et décrit ce qui se trouve dans l'image. Maintenant, ce n'est pas chose évidente d'indiquer le prix des BBs comme le minimum plus élevé, certains vieux chars sont scène en direct. Donc, avec cette image, cette belle image de ce chat, l'étiquette alt est un chat gris portant une couronne. Donc oui, décrit exactement ce qu'il y a dans l'image. J' ai donc mentionné des images de présentation. Les seuls moments où vous laissez l'ancienne balise vide. Donc, cela pourrait inclure comme un diviseur comme celui-ci est. Donc, il n'ajoute pas vraiment d'informations à l'écran, si vous le souhaitez, est purement pour la présentation. Donc, dans cet exemple, la balise alt est vide. Et pour aider les lecteurs d'écran plus loin, j'ai ajouté un rôle égal à la présentation ici à la balise image. Maintenant, quand il s'agit de logos comme celui-ci que j'ai utilisé tout au long du cours. Il contient du texte dans le logo. Généralement, vous voulez éviter d'utiliser du texte à l'intérieur d'une image, mais bien sûr, certains logos d'entreprise ont du texte. Donc, dans cet exemple, l'ancienne balise devrait dire exactement ce que sont les mots, et il le fait ici. Maintenant, quand il s'agit d'ancres et de boutons, assurez-vous qu'ils ont tous un état de vol stationnaire et aussi un contour de mise au point. Maintenant, il peut être tentant de supprimer le contour du focus si vous pensez qu'il a l'air moche, mais ne le supprimez pas, vous pouvez le remodeler. Mais il suffit de ne pas le supprimer complètement est important qu' un contour Fergus reste à des fins d'accessibilité. En ce qui concerne les liens externes, ils devraient indiquer qu'ils sont réellement externes et ils ouvriront un nouvel onglet ou une nouvelle fenêtre. Donc, vous pouvez le faire avec du texte qui l'accompagne, dit s'ouvre dans une nouvelle fenêtre. Vous pouvez également inclure une icône qui représente qui s'ouvre dans une nouvelle fenêtre. Assurez-vous que votre ancre et le texte du bouton sont descriptifs. Donc, les boutons qui peuvent avoir quelque chose comme lire plus ou cliquer ici par eux-mêmes ne sont tout simplement pas suffisants. Donc, pour inclure plus d'informations sans réellement l'ajouter au texte, vous pouvez utiliser des attributs aria, où vous pouvez inclure du texte hors écran. Jetons un coup d'oeil à quelques exemples de cela. Donc, comme mentionné, s'il vous plaît assurez-vous que vos ancres ou boutons cliquables, avez-vous un état de survol et un état de mise au point ? Donc, si j'accède à ce premier bouton, vous verrez le contour bleu. Si je survole avec la souris, a une date de récolte avec l'ombre. Et en ce qui concerne les dates de récolte, s'il vous plaît ne changez pas simplement la couleur du texte parce que les personnes ayant une faible visibilité ou un daltonisme ne pourraient pas voir la différence. Alors assurez-vous que quelque chose change physiquement. Et avec des liens externes, veuillez indiquer qu'il s'agit d'un lien externe. Donc, soit avec une icône, soit mieux avoir un texte descriptif qui indique littéralement qu'il s'ouvrira dans une nouvelle fenêtre. Et s'il vous plaît soyez descriptif. Donc, vous allez souvent utiliser des boutons ou des enfants ioniques qui disent simplement lire plus ou cliquer ici ou quelque chose dans ces lignes. Mais pour quelqu'un avec une faible visibilité, vous, vous ne pouvez pas obtenir tout le contexte de la page ou du contenu. Nous avons besoin de plus d'informations. Alors, qu'est-ce qu'ils lisent ? Mohr buret. Donc, c'est juste inspecter ce bouton Lire la suite. Et vous verrez que j'ai ajouté une étiquette d'aria avec une description de lire plus sur le fait d'être descriptif. Donc, au moins quand un lecteur d'écran vient à cela, mais avoir plus d'informations sur le contexte de ce bouton. Je tiens à souligner cette étiquette RA tiret. Les mots à l'intérieur ne sont pas traduisibles à 100 pour cent. Donc, cela signifie qu'il n'y a pas 100% accessible. Une meilleure solution serait là. Et pour inclure un texte descriptif qui n'est pas visiblement vu mais qui sera repris par les lecteurs d'écran. Donc, dans un intervalle, j'ai inclus ce texte ici. Nous le ferions plus en étant descriptifs. J' ai ajouté une classe de SR ou de lien, qui est le tiret de lecteur d'écran tôt. Et puis si nous pouvons voir les styles ici, maintenant je n'ajoute pas d'affichage à cela parce que cela manquera et le lecteur d'écran ne le lira pas. Donc, à la place, vous pouvez ajouter les styles, en supprimant les bordures, en donnant une hauteur et une largeur d'un seul pixel. Positionnement absolu, puis lui donner une marge de moins 1 débordement caché et le remplissage de 0 supprime fondamentalement complètement de l'écran. Donc ce n'est pas visible pour toi. Et j'achète un sera visible pour les lecteurs d'écran. Et avec des entrées de formulaire similaires aux boutons et aux ancres, ils devraient toujours avoir un contour de mise au point. Vous pouvez donc voir quel champ est dans Focus. Les champs de formulaire doivent également comporter des étiquettes. S' il vous plaît ne pas les retirer et placer les détenteurs seuls ne sont pas suffisants. Vous devriez donc inclure une étiquette. Les lecteurs d'écran lisent le niveau associé même lorsque le champ est mis au point. Donc c'est bon à savoir. Et vous pouvez également ajouter le focus à l'entrée simplement en cliquant sur l'étiquette pour que la zone de frappe soit plus grande. Et cela s'applique également aux appareils à écran tactile tels que les téléphones mobiles. Espérons que vous avez trouvé ces conseils utiles et que vous serez en mesure de commencer à les implémenter dès que vous commencez à suivre avec le projet de classe à venir bientôt. 9. Attributs de ARIA: Regardons maintenant les attributs de l'aria et comment ils peuvent aider à l'accessibilité. Donc sont-ils utiles documents MDM état où Accessible, Rich Internet Applications, qui est ce que R est synonyme, est un ensemble d'attributs qui trouve des moyens de faire du contenu Web et des applications Web, en particulier tout au long avec JavaScript, plus accessible aux personnes handicapées. Ils peuvent donc ajouter une sémantique d'accessibilité à des composants personnalisés où ils n'existeraient normalement que sur des éléments natifs. Dans les deux leçons précédentes, j'ai expliqué embaucher de nombreux éléments HTML natifs ont déjà des fonctionnalités accessibles pour vous d'utiliser. Mais il peut y avoir des situations et des occasions où vous devez créer quelque chose de plus personnalisé. Jetons donc un coup d'oeil à la façon dont nous pouvons vous aider avec cela. Maintenant, voici une situation courante où les icônes d'ancrage, sorte que vous pourriez trouver cela dans une liste d'icônes sociales ou un téléphone mobile compact de navigation spéciale et où vous pourriez ne pas obtenir de texte du tout, mais vous avez juste des icônes pour représenter un élément cliquable. Le problème est qu'il n'y a pas de texte associé à ces icônes. Lecteur d'écran vient à eux. Ils ne savent pas ce qu'ils représentent. Ils ne peuvent pas voir le style de cette icône, donc ils n'auraient aucune idée qu'il s'agit d'Instagram et de Twitter, parler de l'endroit où cela cliquerait. Donc, dans notre code, il y a un moyen que nous pouvons résoudre cela. Donc, sur notre ancre juste à l'intérieur de Chrome DevTools ici, je vais juste ajouter un attribut. Et ça va être Aria, Dash Label. Et puis dans cette étiquette, nous pouvons écrire du texte descriptif. Donc, nous pouvons dire ouvre le compte Instagram de moi. Et puis les crochets s'ouvrent dans une nouvelle fenêtre. Droit ? Et puis quand un lecteur d'écran viendra à cela, il sera en mesure de lire cette étiquette d'aria, qui décrit exactement ce que cette icône cliquable vous mènera à ce qui s'ouvre et ce qu'elle représente. Faisons la même chose pour Twitter en tant qu'attribut, aria, étiquette. Et c'est pour ça que j'ouvre l'interrupteur. Courant. Moi à nouveau entre parenthèses, s'ouvre dans une nouvelle fenêtre. Donc, quand il n'y a pas de textes à lire, une étiquette d'aria en fait bon usage. Et je dirais que c'est comme l'exemple le plus basique d'un cas d'attribut aria. Je veux vous montrer deux exemples d'un ensemble de cases à cocher et comment le lecteur d'écran les lit. Nous allons d'abord regarder les cases à cocher natives. Donc, en utilisant les balises de case à cocher HTML d'entrée normale. Et puis ci-dessous est un ensemble de cases à cocher personnalisées que je me suis fait juste en utilisant des travées et des étiquettes, mais pas en utilisant les balises de case à cocher d'entrée native. Allons donc allumer le lecteur d'écran voiceoff et voir comment retaper les cases à cocher natives. cocher, fenêtre Google Chrome, La case à cocher Parrain a le focus du clavier. Vous êtes actuellement sur une case à cocher pour sélectionner ou désélectionner cette case à cocher, appuyez sur l'espace des options de contrôle. Allons taper l'ellipse maintenant, je dis une case à cocher. Vous êtes actuellement sur une case à cocher, la case sauvage. Vous êtes actuellement la case à cocher sauvage. D' accord. Donc c'est assez clair. Il a reconnu qu'il s'agissait de cases à cocher, reconnu qu'elles faisaient partie d'un groupe de cases à cocher et également reconnues lorsqu'elles étaient cochées et non étiquetées. Tellement utile. Cependant, que se passe-t-il si vous voulez styliser certaines cases personnalisées de z ? Ce design est terrible. Je ne vais pas obtenir de marques pour un bon design ici, mais ce n'est pas le but de cette leçon. Je veux juste vous montrer que ce qui se passe si nous créons des designs et des cases à cocher personnalisées où nous ne pouvons pas utiliser l'équivalent HTML. Comment le lecteur d'écran va les lire, et ce que nous devons faire pour utiliser l'aria pour s'assurer qu'ils sont accessibles. Laissez-moi allumer VoiceOver et nous verrons comment il lit actuellement cette liste de cases à cocher. Voix off sur les cases à cocher Chrome aria, fenêtre Google Chrome. Vous êtes actuellement sur un élément de texte à l'intérieur du contenu Web pour quitter ce groupe de contrôle de pression de zone humide. Vous êtes actuellement sur un élément de texte à l'intérieur d'un groupe de contenu Web. Vous êtes actuellement sur un élément de texte à l'intérieur du contenu Web pour quitter cette zone humide appuyez sur l'option Contrôle. Vous êtes actuellement sur un texte jusqu'à VoiceOver désactivé. Ok, donc pas très utile du tout. Il pense que c'est juste l'élément texte. Il ne sait pas que c'est une case à cocher, ne sait pas si c'est cochez ou décochez. Il est fondamentalement très vide et pas utile pour quiconque utilise un lecteur d'écran. Alors, comment pouvons-nous changer ça ? Donc, sur la plage, qui est la case à cocher elle-même, j'ai déjà ajouté un index de tabulation de 0 sur chacun d'entre eux afin que je puisse au moins les tabler. Sinon, je ne serais même pas en mesure d'utiliser un clavier pour les sélectionner. Donc, pour ces quatre, nous devons dire aux lecteurs d'écran que le rôle réel de ces cases à cocher personnalisées sont en effet des cases à cocher. Donc, un rôle est égal à case à cocher. C' est donc la première étape. Ensuite, nous devons indiquer si cela, ceux-ci sont vérifiés ou non cochés. Donc, nous pouvons utiliser une étiquette aria de tiret aria vérifié. Et nous mettrons le parrain à vrai. Et puis pour ces trois ci-dessous, nous allons ajouter un aria, vérifié égal à faux. Ok, sauve ça. Ok, et j'ai déjà stylé, donc le chèque a une petite croix dedans. Cela ne suffit pas non plus. Ces étiquettes doivent donc être liées à ces cases à cocher personnalisées. Maintenant, semblable au type d'entrée natif de la case à cocher est l'endroit où il y a une étiquette en dessous qui dit quatre. Et puis la valeur à l'intérieur des liens complets vers l'ID de l'entrée. Nous devons répliquer cela avec nos cases à cocher personnalisées. Donc, pour ce faire, nous pouvons utiliser une étiquette d'aria nother appelée Aria Dash, étiquetée par. Et cela doit être égal à l'ID de l'étiquette. Donc c'est ici. Et je vais juste ajouter rapidement le même aria étiqueté par pour les cases à cocher suivantes. Avec ces rôles et attributs d'aria ajoutés à nos cases à cocher personnalisées. Voyons comment le lecteur d'écran les lit. Agissez maintenant. Voix off sur Chrome, cases à cocher aria, fenêtre Google Chrome. La case à cocher Parrain a le focus du clavier. Vous êtes actuellement sur une case à cocher à l'intérieur lorsque contenu pour sélectionner ou désélectionner cette case à cocher, Apocalypse. Maintenant je suis Jake pour cocher la case. Vous êtes actuellement désactivé. Cochez la case. Vous êtes sur le front de mer pour cocher la case. Vous êtes actuellement sur une case à cocher à l'intérieur lorsque CMS n'est pas désactivé VoiceOver. Ok, c'est génial. Donc, avec l'utilisation de l'aria, nous avons réussi à nous assurer que nos cases à cocher personnalisées ont détails sémantiques accessibles qui aideront avec les lecteurs d'écran. Maintenant, veuillez garder à l'esprit que, encore une fois, le document MDS indique que la première règle d'aria est si un élément HTML natif ou un attribut a la sémantique et le comportement que vous avez besoin, utilisez-le au lieu de réaffecter un élément et d'ajouter un état de rôle aria ou une propriété pour le rendre accessible, n'utilisez que des rôles aria lorsqu'il n'y a pas d'équivalent HTML pour atteindre la même chose. De nombreux éléments HTML ont déjà tellement de fonctionnalités d'accessibilité exceptionnelles déjà intégrées. Donc, ce ne devrait être qu'une situation unique où vous devez créer quelque chose d'unique. Et si vous avez besoin de rester accessible, ce qui bien sûr vous devriez faire, alors c'est quand l'aria entre en jeu. 10. Projet de cours - Configuration: Maintenant, c'est la partie du cours où je vais construire un mini-projet, juste un seul pager, qui a divers éléments d'accessibilité à elle. Donc, je vous exhorte vraiment à suivre avec moi et construire vous-même un site web d'une seule page similaire aussi bien. Je vais vous montrer dans les prochaines leçons et essayer d'inclure autant de fonctionnalités d' accessibilité que vous avez enseignées tout au long de ce cours. Donc, je vais utiliser VS Code ici. Et si vous voulez suivre et copier mon projet de cours, eh bien, vous aurez besoin d'un index.html pour votre maquette, un style.css pour vos styles. Alors ce que j'aimerais que vous fassiez, c'est penser à votre acteur ou musicien préféré, ou à quelqu'un qui est un héros pour vous et peut-être écrire une page à leur sujet. Et puis on utilise Marlon Brando parce que je pense que c'est un grand acteur ou qu'il y a des murs ? Donc on utilise un portrait de lui. Et j'ai également créé ce logo que nous allons utiliser dans l'en-tête. Donc, créez ceci moi-même. Nous n'avons pas eu accès à quelque chose pour vous créer un logo. Il suffit de trouver une image appropriée en ligne. Et la meilleure façon d'apprendre est de mettre en pratique vos nouvelles connaissances trouvées. Continuons donc à héberger votre projet sur une page pour que tout le monde puisse voir. Et moi et d'autres pouvons vous donner des commentaires. Je vais vous montrer comment héberger votre projet sur GitHub Pages est complètement gratuit et c'est facile à faire. Si vous n'avez pas encore de compte GitHub, rendez-vous sur github.com et inscrivez-vous. J' ai déjà un compte, donc je ne vais pas passer par tout le processus, mais suivez simplement les instructions à l'écran et vous serez réglé. Le moyen le plus simple de pousser votre travail jusqu'à GitHub est de télécharger et d'utiliser le bureau GitHub. Vous pouvez télécharger ce point de bureau github.com. Et puis à la fin, nous aurons tout votre travail prêt à héberger sur GitHub Pages. Maintenant, lorsque vous avez téléchargé GitHub Desktop va regarder quelque chose de similaire à cela. Maintenant, nous n'aurons pas besoin de pousser le travail jusqu'à ce que vous ayez terminé votre projet soit entièrement testé et que vous soyez prêt à l'héberger. Je vais vous montrer ce processus à la fin de la leçon du projet. Mais lorsque vous avez le bureau GitHub, assurez-vous simplement que vous êtes connecté à GitHub. Et vous pouvez le faire en allant dans le menu principal, en cliquant sur les préférences. Je peux voir que je suis connecté à GitHub ici. Comme je l'ai dit, ne vous inquiétez pas de pousser tout travail jusqu'à la fin. 11. Projet de cours - HTML 1ère Partie: Jetons un coup d'oeil à un mini-projet, n'est-ce pas ? Donc je vais construire un site web d'une seule page sur mon jeu ici, moi, Marlon Brando. Ce serait cool si vous pouviez me suivre. Alors allez-y et ouvrez votre éditeur de code. Maintenant, pourquoi n'avez-vous pas fait une page sur votre héros personnel, qu' il s'agisse d'un acteur ou d'une actrice, un musicien, d'un membre génial de la famille, ou même d'un animal de compagnie. L' important ici est de ne pas passer trop de temps à s'inquiéter du contenu lui-même, car l'accent sur ce mini-projet est de rendre les composants accessibles. Alors s'il vous plaît, suivez-moi avec moi. Parent parfait, c'est des points. Peut-être regarder à l'aide de certaines balises HTML accessibles ne vous montre pas dans les leçons précédentes. Et aussi vous n'avez pas à copier l'ordre exact de mes composants peut être échangé le vôtre un peu. Essayez d'expérimenter si vous le pouvez, mais si nous ne nous sentons pas à l'aise, vous pouvez bien sûr suivre ce que je fais. Et je vais expliquer les fonctionnalités accessibles comme notre encodage. J' espère que c'est clair. Alors commençons. Eh bien, je vais vous montrer dans cette leçon est la maquette HTML. Donc, tout ce dont vous aurez besoin pour le moment est un fichier index.html. Donc, je vais utiliser l'extension appelée emmet, ce qui me permet d'utiliser des extraits de code comme ceci, graphiques à onglets de points d' exclamation. Et il a fait un modèle HTML, ok ? Et si vous n'avez pas Emmett, vous pouvez regarder dans les extensions et la rechercher. En fin de compte, vous devriez trouver Emmett dans la liste des extensions que je crois qu'il est livré avec du code VS sorti de la boîte. D' accord. Arrêtez de construire des éléments accessibles. Donc, d'abord, je vais ajuster le titre, ce qui peut provoquer Marlon Brando page info. D' abord à l'intérieur du corps, je vais faire un en-tête. Et à l'intérieur de l'en-tête, je vais faire un rap. Et quand nous commencerons à regarder les styles, je vais ajuster la rampe pour qu'elle soit une largeur maximale. Donc tout notre contenu est bien au centre. À l'intérieur de l'en-tête, je veux inclure une balise d'image. Je vais lui donner une classe de logo d'en-tête. Maintenant, je vais utiliser ce logo ici. Maintenant, je l'ai créé moi-même à l'intérieur d'un paquet graphique. Donc si tu ne peux pas faire la même chose, brillant. Si vous n'avez pas accès à quelque chose comme ça, vous ne pouvez pas simplement utiliser n'importe quel logo que vous trouverez sur Internet pour le moment. Mais même si vous ne voulez pas utiliser une image pour votre logo, vous ne pouvez pas simplement utiliser un en-tête comme un H1 en haut de votre tête, une ligne qui peut représenter le titre de votre page. Mais quoi que vous fassiez, assurez-vous qu'il est accessible. Monsieur. J'utiliserai ce logo, qui est ici. Et notre première partie importante de l'accessibilité est d'ajouter une ancienne balise, désolé, parce que c'est le cas. Un logo avec du texte dans il est important d'écrire les mots sont à l'intérieur de l'image. Désolé, c'est littéralement Marlon Brando. Jetons maintenant un coup d'oeil à la construction d'une liste de navigation. Désolé, je vais utiliser quelques balises sémantiques S ou n'utilise pas de devs, ai essayé d'utiliser ce qui est disponible pour vous, sir nav. Et puis une liste non ordonnée. À l'intérieur, il y aura trois éléments de liste qui contiennent des ancres. Maintenant, ce ne sera pas un NAV fonctionnel. Donc, ils n'étaient en fait aucun lien nulle part. Mais disons qu'il peut y avoir une page, disons peut-être une galerie. Et disons une page de blog. Ok, comme notre en-tête. Maintenant, regardons le corps principal du travail. Ainsi, la balise principale est utilisée pour contenir tous les éléments visibles à l'intérieur du corps principal de votre page. Désolé, sans inclure l'en-tête, sans inclure le pied de page, mais le contenu entre les deux. Donc, à l'intérieur de la main, je vais faire usage de la balise section. Je vais lui donner une classe d'introduction, car ce sera notre introduction. Ok, et ensuite on utilisera la classe rap pour la garantie de div. Vous utilisez une autre classe cool appelée colonne rap. Et je vais envoyer à mon travail. Donc je vais créer un autre cours appelé centre de rap. Donc, ces classes deviendront toutes claires dans la prochaine leçon quand nous regardons le CSS, les styles réels eux-mêmes. Et puis cette section aura son propre en-tête. Et à l'intérieur de l'en-tête sera un H1. Maintenant, ce titre est important. Ce sera le très rapide et le titre principal de la page. Et je ne dois jamais être qu'un H1 par page et par section. Je vais donc vous souhaiter la bienvenue sur la page d'information de la marque. K en dehors de l'en-tête. Moins inclure une balise d'image avec une image inter de classe. J' utiliserai ce portrait de l'homme lui-même. Et puis jetons un coup d'oeil à cette image afin que nous sachions ce qu'il faut inclure pour l'ol tag était photo d'art noir de lui dans ses plus jeunes jours. Donc, l'étiquette alt devrait être quelque chose dans le sens d' un portrait d'un jeune Marlon Brando. Et en fait, c'est un portrait noir et blanc d'un jeune Marlon Brando. Ok, c'est cool. Laisse-moi fermer les ions de cette palette latérale pour qu'il y ait plus de place. Ok, alors, et puis nous allons avoir un petit paragraphe avec un texte d'introduction. Donc, je vais ajouter une classe d'inter text. Et écrivons quelque chose sur Marlon Brando. Mono, marque est considérée comme l'un des meilleurs acteurs de tous. Temps, il a gagné deux Oscars. Et son estimé Corée pour le front de mer. Et quelle année a-t-il gagné ça ? Laisse-moi essayer de me souvenir des choses. 1954. Et tu devrais avoir 4 et 4 ans, le Parrain. D'accord ? Donc, si vous suivez avec moi et que vous avez créé votre propre page, peut-être pensez à un bon intertexte sur votre personnel ici et écrivez-le là. Ne passez pas trop de temps à vous inquiéter du contenu. Assurez-vous simplement qu'il est accessible en utilisant les balises HTML correctes comme nous le faisons ici. OK, puis la section suivante. Donnons à ça une classe de découvrir Mu. Maintenant, cela devrait avoir un en-tête. Maintenant, nous avons déjà utilisé un H1, donc il ne devrait pas y avoir un second sur la page, donc il devrait être H2. En savoir plus. Prenons un texte pour en savoir plus sur Marlin Breuer et sur sa page de la BDIM, veuillez cliquer sur le lien ci-dessous. Et j'ajouterai aussi un lien. Donc, cette ANCA, je vais lui donner une classe d'ancre de texte pour que je puisse le styliser. Donc la référence H, je vais diriger les gens vers son profil sur IMDB. Laissez-moi juste mettre ces attributs sur leur propre ligne pour qu'il soit plus facile à lire. Maintenant, ayez une cible. Je veux une certaine personne Nin dans une nouvelle fenêtre ou nouveaux onglets ou cible devrait être soulignement vide, ce que nous allons faire. Et puis le texte intérieur ou le texte à l'ancre. En savoir plus. Maintenant, pour rendre cela accessible. Et puis j'écris s'ouvre dans une nouvelle fenêtre. Il est donc très clair que c'est ce qui va arriver. Et puis pour rendre cela encore plus descriptif parce que lire plus ne suffit pas vraiment, je vais ajouter une étiquette aria ici, qui dit, lire plus sur Marlon Brando sur sa page IMDB. Parce que, ou il dit s'ouvrir dans une nouvelle fenêtre, je ne l'écrivais pas dans l'étiquette Aria. Cela devrait être assez de mots descriptifs pour l'ANC. Déplaçons ça pour que vous puissiez le voir un peu plus clair. Maintenant, la section suivante va ajouter un formulaire de contact. Donc, je vais ajouter mon rap et je vais ajouter la colonne rap aussi. Ainsi, les éléments à l'intérieur s'empileront lorsque nous arriverons au style dans la leçon suivante. Donc, l'en-tête suivant doit être un H3. Nous avons déjà utilisé H1 et H2. Maintenant, vous pouvez avoir plusieurs h deux sur une page, généralement comme deux ou trois et pas plus que cela. Donc ça pourrait être un H2, mais ça ne peut pas être un H1. Nous avons déjà épuisé leur économie et H4 parce que nous avons utilisé H1 et H2. Donc nos options ici, H2 ou H3, H3 parce que c'est séquentiel. Et je vais sauter l'ancien titre de me contacter. K, puis dans un paragraphe. Très bien, si vous souhaitez me chatter directement par Marlon Brando, s'il vous plaît remplir le formulaire ci-dessous. Sauvegardez ça. Et on y va. Il y a notre maquette initiale n'a pas fini avec le contact pour moi. Je voulais juste voir comment ça est tracé. 12. Projet de cours - HTML 2e Partie: Ok, alors regardons notre formulaire à l'intérieur d'une étiquette de formulaire. Maintenant, ce ne sera pas vraiment une forme de travail. Il ne va pas cliquer n'importe où par nous aimerions utiliser certains champs de formulaire comme un exemple de la meilleure façon de les utiliser d'une manière accessible. Ok, donc je vais avoir quelques champs obligatoires. Cela empêchera l'utilisateur de soumettre le formulaire sans remplir les champs requis. Donc, pour que cela soit clair pour tout le monde à l'intérieur d'une balise de paragraphe, j'écrirai tous les champs marqués d'astérix sont requis, donc c'est clair pour tout le monde. D' accord ? Et je vais regrouper les champs dans un groupe de forme refroidi div comme ceci. Maintenant mettons une entrée, une entrée de texte. Et la pièce d'identité devrait être le nom, et nous lui donnerons un nom d'entrée. Sauvons ça. Vous pouvez voir en bas ici entrer le nom et il dit juste là. Cependant, juste avoir un détenteur de place, cette touche Entrée nom ne suffit pas. Il devrait y avoir une étiquette. Alors incluons l'étiquette. L' étiquette de est pour cet ID ici, qui est le nom et l'étiquette du nom. Et ce sera un champ obligatoire. Alors mettons un astérix juste là et on peut voir l'astérix en bas ici. Maintenant sont également d'aider avec les lecteurs d'écran en s'assurant qu'ils savent qu'il s'agit d'un champ obligatoire. Je vais ajouter un attribut sur le champ de acquis. Et je voudrais juste souligner que l'utilisation d'Emmet dans le code VS, cela nous donne quelques recommandations IntelliSense très utiles, Hey, quand vous commencez à taper, si nécessaire sont nécessaires. Cela aide donc à inclure des attributs d'accessibilité comme celui-ci. Très pratique. Ok, ça a l'air bien, a toutes les bonnes étiquettes accessibles, y compris les informations à ce sujet étant requis. Donc on a l'air bien. Ok, notre prochain groupe de formulaires peut l'épeler correctement. Inclure une entrée pour une adresse e-mail. Donc, en vous assurant d'utiliser les balises HTML correctes disponibles pour vous, j'utiliserai le type d'entrée d'e-mail. Dites que l'ID doit être un e-mail. N' oublions pas l'étiquette pour l'e-mail. Et assurez-vous qu'il est écrit e-mail et que cela ne sera pas nécessaire. Donc, je ne vais pas inclure un astérix ou une balise obligatoire. Alors quel est le prochain pour notre formulaire, nous pouvons ajouter un autre div. Forme-groupe. Et ce que nous allons utiliser ici, ce sont peut-être des cases à cocher. Pensez donc au formulaire que vous allez inclure dans votre projet et au champ que vous pouvez inclure. Peu importe si vous ne copiez pas exactement ce que je fais. Comme je l'ai dit, assurez-vous juste que ce que vous faites est entièrement accessible. Et nous allons tester cela à la fin de cette leçon et juste à la fin du projet. D'accord ? Donc parce qu'il y aura quelques cases à cocher, mais elles vont toutes faire partie du même groupe. Nous pouvons les regrouper en utilisant un jeu de champs. Et cela les gardera ensemble. Et un ensemble de champs devrait avoir une légende, qui est fondamentalement l'en-tête de l'ensemble de champs. Et cet article va être de nature à enquêter. Ok, super. Donc, il y a des cases à cocher dans un div, chacun nous pouvons faire une case à cocher de type d'entrée. Assurez-vous donc d'utiliser les balises HTML correctes. Et puis le nom va être enquête. Et puis jetons un coup d'oeil à l'étiquette que je vais mettre en dessous. Et ce label est une enquête sur ses films, disons. Donnez donc à l'entrée une identification de ses films et l'étiquette pour les besoins qui correspondent à cela. Juste là. C'est copier et coller cette case à cocher suivante. Donc ses informations sur sa vie disent que ça a changé le RD et le 4. Maintenant, remarquez comment nous gardons le même nom ici d'enquête. C' est parce que les cases à cocher font partie de la même question. Donc, nous allons en faire une de plus par toute autre information. Donc, l'ID devrait être autre, étiquette pour, devrait être autre, et le nom restera est la requête car il correspond à la même question. Et tout cela est très important pour les lecteurs d'écran parce que c'est le genre d'information qui sera lu à l'utilisateur. Sauvegardez que K Saqqara cases fonctionnent parfaitement bien. Ok, ensuite, nous allons avoir un, peut-être un champ de texte comme un champ de texte libre où vous pouvez écrire tout ce qu'ils veulent. Depuis que j'ai fait div form-group, je vais utiliser une zone de texte. Et donnons-lui une rangée de disons huit. Ne vous inquiétez pas pour les colonnes. Donnez-lui un ID de message. Et puis l'étiquette doit avoir plein de message. Et nous allons juste écrire un message pour l'étiquette k. Et puis nous avons besoin d'un moyen de soumettre le formulaire comme si c'était un téléphone qui fonctionne. Ce n'est pas le cas. Mais nous allons construire le marqueur et les styles comme s'il s'agissait d'une forme de travail. Donc, nous devons soumettre le bouton, donc nous allons faire le bouton Soumettre. Ok, donc type de soumission, bonnes choses, et ensuite on écrira soumettre. Ici. Il y a un bouton en bas. Donc c'est tout pour notre section principale et l'en-tête ci-dessus. Donc tout ce qu'il nous faut maintenant, c'est un pied de page. La balise de pied de page. Mettez-le dans mon cours de rap. Et puis je vais utiliser une déclaration de copyright ici. Donc, pour utiliser le symbole de copyright, faites un point-virgule de copie esperluette, et regardez comment le VS Code IntelliSense reconnaît ce bon truc. Droit d'auteur, mon nom et l'année. Et ce qui serait mieux pour rendre cela encore plus sémantique et plus accessible, c'est d'utiliser la bonne étiquette pour ce copyright. Donc, je vais utiliser petit. Ou petit est très utile pour des choses comme, Eh bien, termes et conditions ou déclaration de copyright. On survole ça. La référence MDM ci-dessus indique que le petit élément représente les commentaires latéraux tels que les petits caractères. Et c'est de petits caractères. N' utilisez pas la petite étiquette juste à mes textes taupe. C' est la mauvaise façon de l'utiliser. Utilisez-le pour, eh bien, pour quelque chose comme un copyright, alors assurez-vous qu'il est sémantique. Ok, et c'est à peu près le labo HTML que je vais utiliser. Donc, comme je l'ai dit, vous pouvez copier exactement ce que je fais, mais vous obtiendrez des points bonus pour déplacer vos concurrents autour. Donc peut-être ne pas les avoir dans le même ordre que je les fais ou utiliser des composants différents complètement. Peut-être penser à différents champs de formulaire que vous pouvez utiliser. Cela fait juste en sorte qu'il soit accessible. Ce que nous pouvons faire est peut-être de tester cette embauche de lumière intérieure pour qu'il n'y ait pas encore de styles et nous n'avons certainement pas encore fini avec le travail. Mais au fur et à mesure que la maquette est faite, allons cliquer sur Light ruches et voir quel score cela nous donne. Donc l'accessibilité est vérifier la, générer le rapport et voir quel score nous obtenons. Accessibilité 100. Donc c'est très, très bien. Si on fait défiler vers le bas, il n'y a rien à travailler ici. Il nous donne des raisons pour lesquelles il a été adopté. Et les boutons ont un nom accessible. C' est bien. Nous avons inclus l'élément titre. La page contient un titre. Nos identifiants sont uniques. Les éléments de formulaire ont des étiquettes. Ok, c'est bien. Peut-être que lorsque nous commencerons à travailler avec les styles, cela peut nous donner quelques suggestions, mais nous verrons quand nous arriverons à cette section, qui est à venir. 13. Projet de cours - CSS 1ère Partie: Maintenant, votre maquette est en place. Pensons à coiffer la page. Et quand tu ne décroches ta page. Peut-être fait copier exactement les styles et les couleurs que je vais partager vous peut-être penser à quelque chose de votre propre. Mais comme je continuerai de le dire, pensez à l'accessibilité. Sont les couleurs que vous allez choisir, va être vu par tout le monde. Le contraste est-il bon ? Le texte lisible ou les animations trop distrayantes ? Ce ne sont là que quelques-unes des choses que vous devez penser dans cette leçon. La première chose que je vais faire est que je vais ajouter des styles de police personnalisés. Donc, je vais juste aller à Google Fonts. Alors peut-être choisir dans la liste sur les polices Google et choisir quelque chose, un style de police que vous avez attrapé comme l'alotta. Donc, vous pouvez voir que c'est assez lisible. C' est très clair à lire. Donc ça va être pour moi. Mais que diriez-vous si je vous montrais un exemple de quelque chose qui n'est pas si facile à lire ? Donc, ce ballet polices il suffit de cliquer sur ce. Rendons ça plus grand. Je ne sais pas pour toi, mais c' est difficile à lire et j'ai une très bonne vision. Pensez à quelqu'un avec une faible vision lisant ceci, si c'est la famille de polices chiffon de la jeunesse, va être très difficile pour cette personne de lire le contenu sur votre page. Les scénarios peut-être uniques où cela est applicable. Mais si vous essayez d'obtenir des informations sur votre page Web, la police, les familles comme celle-ci ne vont tout simplement pas convenir à tout le monde. Donc je vais m'en tenir à mon choix d'un tas de choses. Et lorsque vous trouvez la police que vous souhaitez utiliser, nous pouvons sélectionner le style, puis il vous donnera un lien que vous pouvez mettre dans l'en-tête de votre page. Maintenant, j'ai déjà ce lien prêt à partir de Google Fonts, et nous pouvons simplement coller ceci au-dessus de notre titre sur notre page index.html afin que la police soit prête à l'emploi. Alors les styles commencent ensuite. Et c'est un astérix pour tout sélectionner et il fait une boîte de taille de border-box. Donc, toutes nos dimensions sont en place et fonctionnent comme prévu. Maintenant, ajoutons la police personnalisée. Donc sur le corps, je vais ajouter une famille de polices d'antenne en fait. Donc ce que je vais faire, c'est perdre du plaisir. Les arguments de polices Google que je vais utiliser juste pour la tête est le texte principal va être Arial. La seconde allait être Helvetica, puis sans serif. Ok, et puis quelques autres styles de réinitialisation sur le corps, sur l'UL et les Alliés. Il suffit de supprimer toute la marge et le remplissage et la marge 0, padding, 0 en-têtes. J' utilise un H1, H2, H3, et sur nos chevilles aussi. Je veux utiliser mon beaucoup de police, actualise la page et les styles sur le travail parce que bien sûr, n'oubliez pas de lier votre feuille de style. Donc au-dessus du titre. On y va. Liens vers style.css. Et votre feuille de style doit être dans le même dossier que votre HTML. Sauvegardez ça. Et puis nous pouvons voir notre police changer là-bas. J' ai fait un cours de rap pour tous nos composants. Alors fléchissons-les, affichage flex. Et puis je voudrais aligner le centre des éléments. Justifions le contenu, l'espace entre. Faisons en sorte qu'ils soient au centre. Donc la marge auto est de donner au représentant, largeur maximale de, disons, un, feux et pixels. Passer le rembourrage rapide de 0, haut et bas, 25 gauche et droite. Et nous allons nous assurer que la largeur est de 100%. Ok, voyez à quoi ressemble notre pellicule. D' accord. J'ai l'air bien jusqu'à présent, mais il y a plus que nous devons ajouter. Monsieur, j'ai aussi inclus une classe de colonne d'emballage sur certains composants. Non, je dois faire une direction flexible de colonne pour qu'ils soient assis l'un au-dessus de l'autre. Et puis nous allons aligner les éléments pour être au début. Donc, point de tableau de bord flexible, génial, de sorte que vous pouvez voir changer là-bas. Et puis j'ai aussi fait une classe de centre d'emballage. Et je vais aligner le centre des objets, la rigueur. Donc, pour une classe d'en-tête, que j'aurais dû inclure sur l'en-tête principal, ce que je n'ai pas fait. Alors ajoutez-le ici. Classe d'en-tête. C' est donc notre en-tête qui contient le nav et le logo en haut. Allons afficher flex. Les articles. Doit aligner les éléments pour qu'ils soient centrés. Justifier que le contenu soit espacé entre. Et donnons-lui un peu de rembourrage de 10 pixels, haut et bas, 25 pixels, gauche et droite. K se rapproche. Ok, comme vous pouvez le voir, le logo d'en-tête est énorme. Donc, le logo d'en-tête de brochette de hauteur peut être automatique ou modifier, et la largeur fera un 100 pixels. C' est plus lisible, ok, Water par ce nav. Donc, nous allons cibler le nav et ensuite nous allons cibler l'UL, qui est l'enfant direct de nav. Et puis nous ciblerons les alliés, qui sont tous les enfants de l'URL. Donc, comme nous supprimons les points de puces, list-style, none, et tous leur donnent toute la marge gauche de 20 pixels. En fait, nous voulons qu'ils soient plus inquiets. Donc ce que je vais faire, c'est vous dire le NAV et ensuite l'UL. Bien sûr, le flex d'affichage. Alors dans une rangée. Comme ça, de bonnes choses et puis justifier l'espace de contenu entre. Maintenant, il ressemble plus à un en-tête normal. Maintenant, regardons les ancres elles-mêmes. Donc nous allons enlever le bleu, peut-être une couleur différente. Donc nav UL, LI, puis ancres donneront une couleur de noir. Et ce qu'on va faire, c'est enlever la décoration de texte soulignée, aucune. Maintenant, que diriez-vous des survols pour ces éléments de navigation ? Maintenant, je vais juste copier cette ligne ici, puis ajouter hover ici. Donc, ce qu'on pourrait faire en vol stationnaire, c'est peut-être ajouter une belle couleur dorée. Afb 61, c'est à dire. Si on survole ça. Maintenant, il semble assez bon pour moi savait, mais je dirais que quiconque a la cécité des couleurs pourrait ne pas être en mesure de voir cet or sur le fond blanc et aussi des changements de couleur. Eh bien, ils pourraient voir de toute façon. Donc, vraiment ce que je dois faire est aussi changé quelque chose physiquement sur ces ancres que vous survolez. Donc, je vais ajouter la décoration de texte de sous-jacent. Donc le soulignement. Maintenant, je ne suis toujours pas sûr du contraste. Alors peut-être que quand on s'occupera du test de phare à la fin, on verra si cette couleur est signalée. Et si c'est le cas, alors on peut le changer. Il va ajouter des styles de base à toutes les sections. Juste un rembourrage, rembourrage en haut et en bas de 50 pixels. Donc, ils sont étalés EIR et un peu plus lisibles. espaces sur votre page Web rendront les choses plus lisibles. Notre H1, alors vous faites cette taille de police de trois rems. Ok, beaucoup plus gros. Si bon. Peut-être que je partirai comme il est pour l'instant. Le H3 Darren ici. Faisons une plus grande taille de police h3 de deux rems. Ok, remarquez comment le H3 est maintenant plus grand que le H2 et c'est bien à faire. Si vous êtes à la recherche de la tête de différentes tailles est. Comme je l'ai mentionné dans le passé, n'utilisez pas H1 et H2 et ainsi de suite, juste pour changer la taille de l'en-tête, ce n'est pas ce pour quoi ils sont utilisés. Ils indiquent l'importance de chaque section. Donc juste parce que c'est plus grand que cet en-tête ici, ne signifie pas qu'ils devraient être H2 et H3. Ce n'est pas ainsi que vous utilisez sémantiquement ces en-têtes. Il en va de même pour le niveau d'importance. Donc, nous allons garder le H3 être légèrement plus grand que le H2 a. Absolument bien à faire. Pensons maintenant à notre section d'introduction. Je vais m'assurer que c'est le flex d'affichage. Et nous allons aligner les arguments pour être au centre k. En fait, nous allons les faire en colonnes de direction flexible sera colonne. Pourtant, c'est bien. Je vais faire du texte une couleur dorée. Faire la valeur hexadécimale de c 6, un 105 être. Ok, vous pouvez voir que ça a changé ici. Maintenant. Rsa, le contraste est joli. Donc, je vais ajouter une couleur de fond de noir. C' est beaucoup plus lisible, c'est bien. K L'image est assez grande à votre image. Donnons-lui une largeur pour peut-être 200 pixels. Ça a l'air bien. Assurez-vous juste que la hauteur est de l'eau, donc elle est réactive. Maintenant, le texte d'introduction, nous allons nous assurer que l'alignement du texte est au centre. Est-ce que ça a l'air bien ? Faisons une marge supérieure de 25 pixels et une largeur maximale de 500 pixels. espacé. Juste remarqué que j'ai couru, il a gagné deux ofs pense de Dieu qui est un prix pour tout le monde. Alors modifions rapidement les fautes de frappe. Et il épelle aussi estimé incorrectement. C' est Philistin. Oui, allons-y avec ça. Espérons que c'est correct. Ok, revenons aux styles. Allons à notre section en savoir plus. Fine art, plus de couleur de fond. Je vais lui donner cette journalisation de couleur d'or en utilisant le jaune semble cool. Pour l'instant. Je laisserai la couleur telle qu'elle est. Je vais faire un test de phare pour voir si c'est acceptable, si le contraste est bon, quand pourrait revenir à cela. Mais j'ai besoin d'ajouter un état de vol stationnaire. C' est important. Tout le monde a besoin de savoir que c'est cliquable. Donc le texte que je suis co-animateur. C' est juste enlever la décoration de texte à la décoration de texte. Aucun. Super. D' accord. 14. Projet de cours - CSS 2e Partie: Ok, jetons un oeil à notre formulaire maintenant. Donc la forme, je vais nous donner une bordure, solide d'un pixel et ensuite Hex de j, k. Faisons légèrement arrondi. Donc border-rayon de cinq pixels, largeur minimale. Donnons ce 500 pixels. Et nous allons nous assurer qu'il y a un rembourrage à l'intérieur de 25 pixels. Ok, ça se forme bien. D' accord ? Et puis j'ai utilisé des bas de divs à l'intérieur pour le groupe de tirets de formulaire, la classe du groupe de pointillés de forme. Et pour tous ces éléments, j'afficherai flex. Et je vais m'assurer que la direction flex comme des colonnes afin qu'ils s'empilent les uns sur les autres. Comme ça. Assurez-vous qu'il y avait un fond de rembourrage ou 25 pixels, donc ils sont étalés. J' avais l'air lisible. Et puis pour toutes nos étiquettes, assurez-vous qu'il y a un peu d'espace entre elles. Et les champs de formulaire sous une marge, en bas. Dix pixels. Ouais, c'est assez d'espace pour aller bien. Et les champs eux-mêmes ? Donc, entrée et aussi la zone de texte. Je vais ajouter un peu de rembourrage de 10 pixels, haut et bas, 25 pixels gauche et droit, ok, et étaler. Je pense que c'est trop de rembourrage. 15 pixels. Ouais, ok, ça a l'air bien. Il suffit de réaliser que l'e-mail est manquant le support de place de bruit. Donc je vais juste ajouter ça ici. L' espace réservé est égal à saisir l'e-mail. Beaucoup mieux. Je vais faire la même chose pour la zone de texte. Message réservé ici. Ok, super. Retour aux styles. Maintenant, ce bouton de soumission de formulaire pourrait sembler un peu mieux. Donc, comme le formulaire direct bouton enfant. Ok, comment allons-nous styler cette couleur de fond ? Faisons ici des zéros, 0000, du noir. Donnons-lui une bordure solide d'un pixel. Et puis c'est la couleur d'or utilisée que j'ai utilisé. Est-ce que la recherche k, nous devons changer la couleur puis à nouveau, nous utilisons le même or. Oui. D' accord. Karina faire ce légèrement arrondi. Disons que nous allons faire border-rayon de cinq pixels. Faisons en sorte que le cancer soit un pointeur. On sait que c'est cliquable comme ça. De bonnes choses. Rembourrage Dix pixels, en haut et en bas, 20 pixels à gauche et à droite. Et ça a l'air plutôt bien. Maintenant, je veux juste vérifier est comment le contour de focus est à la recherche de ce formulaire. Donc oui, pour le nom comme bon email, cases à cocher, message, et puis il va au bouton soumettre. Mais parce que je suis le modèle est noir, ne peux pas vraiment voir la batte aérienne. Désolé, je vais ajouter un peu d'espace entre le bouton et le contour. Ainsi, vous pouvez le faire en utilisant la ligne des yeux, le tiret, le décalage. Ajoutez cinq pixels ici. Tab à nouveau. Ok, ça a l'air bien. Vous pouvez voir le contour assez clairement maintenant. Maintenant, que diriez-vous d'un état de survol pour le bouton ? Donc parce que je suis paresseux, je vais juste copier ça. Et puis je vais ajouter deux-points. Ok, qu'est-ce que j'aimerais changer ? La couleur de fond a changé pour être dorée. Nous changeons la couleur du texte pour qu'il soit noir. Donc, je suis fondamentalement en train d'inverser les couleurs. Comment cela ressemble-t-il pour le moment ? Oui, bien, ou va changer d'ordre. Eh bien, en fait, pour être l'inverse, donc frontière solide d'un pixel, noir. Bien. Parce que je suis fantaisie, je vais augmenter la taille pour transformer l'échelle pour être porté 0,25 K. Et puis je vais m'assurer que l'animation est agréable et lisse. Donc, la propriété de transition, nous changeons la couleur d'arrière-plan. On change la frontière. J' ai lu changer la transformation. Maintenant, j'ai une durée de transition. Faisons cela plus de 0,2 secondes. Et puis voyez la fonction de synchronisation de transition à 0 dans les bras. Ok, j'ai l'air agréable et lisse. Comme je l'ai mentionné dans une leçon précédente, des animations comme celle-ci pourraient être distrayantes pour les personnes ayant des problèmes neurologiques ou cognitifs. Donc, ce que vous voulez vous assurer, c'est que si vous payez contient des animations qui changent assez radicalement. Dis ce bouton. Vous devez donner à l'utilisateur la possibilité de les désactiver ou au moins de réduire le mouvement sur la page. Maintenant, comment faites-vous ça ? Ce que vous devez faire, c'est que je vais mettre ceci en haut de la page parce que cela va s'appliquer à toutes les animations, c'est que vous ajoutez un code de requête multimédia au média. Puis entre parenthèses. Pour les fors, tiret réduit, tiret, mouvement, deux-points réduisent. D' accord. Et tout ici. Contiendra des styles qui s'appliqueront à quelqu'un qui l'a défini sur sa machine. Alors, qu'est-ce qu'on peut faire ? Je vais tout sélectionner. Je vais sélectionner le pseudo élément avec avant et le même pour après. Alors était-ce que je suis en train de choisir là. Eh bien, c'est à peu près tout ce qui existe sur la page. C' est ce que fait cet astérix. Et puis cela signifie que je peux définir la durée de l'animation à 0.0012. Donc, je vais définir cela sur important, donc il remplace tout. Ainsi, les animations seront instantanées. Je ferai de même pour la durée de la transition. Durée de transition 0.0012. Cela va également être important. Maintenant, ceux-ci modifieront ou supprimeront le mouvement entre les deux états de l'animation. Alors, regardez haut. Donc c'est toujours le même. Et c'est parce que je n'ai pas modifié mes réglages de mouvement réduits sur ma machine. Donc, quelqu'un avec des problèmes cognitifs peut aller à ses préférences comme celle-ci. Là, nous allons à l'accessibilité. Et on ira à Display. Et ils cliqueraient sur, utiliseraient le mouvement. Et cela déclenchera toute information qui se trouve à l'intérieur de cette requête multimédia. Alors qu'est-ce que ça veut dire pour notre bouton ? Vous pouvez voir qu'il n'y a pas de transition, est l'animation se produit immédiatement. Mais cette augmentation à grande échelle pourrait encore être distrayant. Donc, je vais aussi spécifier cette transition de mise à l'échelle. Donc, le bouton Form survolent la transformation. Je vais réinitialiser la balance pour qu'elle ne soit qu'une. Je vais m'assurer que c'est important. Maintenant, testons ça. Donc, posséder change la couleur afin qu'il n'y ait plus d'animations distrayantes. Donc, c'est comme ça que vous testez votre utiliseriez des animations de mouvement. Et je vais juste enlever ça. Dit vérifier encore l'animation est de retour. Ok, il reste encore à faire. Eh bien, c'est n'importe quel pied de page juste en bas, si vous pouvez le voir. Donc pied de page. Ajoutons une couleur de fond de noir. 000 000 000. Nous ajoutons une couleur de gris peut-être pour le texte. Affichage. Flex les éléments. Alignons nos articles pour être. Centre. Justifiez que le contenu doit être espacé entre le remplissage, 10 pixels haut et bas, et 25 pixels gauche et droit. Ok, et c'est le droit d'auteur. Donc, comme une page à peu près faite, laissez-moi juste vérifier. Je n'ai pas manqué de cours. De notre maquette. Je peux voir que j'ai un cas dans ces tout à l'intérieur fini plus, assurez-vous est dans notre enveloppe. Et ont également la colonne RAP ajoutée à cela. Jetons un coup d'oeil à nos styles maintenant. Ok, ça a l'air bien. Espérons que vous avez suivi avec moi et peut-être changer les couleurs, peut être changé la mise en page pour correspondre à votre page de héros. Mais nous n'avons pas encore fini. Je peux voir certaines choses ici qui échoueraient à toutes les vérifications d'accessibilité. Alors, comment une barrière ? Nous venons de vérifier et les poils de lumière phare à l'intérieur de Google Chrome il. D'accord. L' accessibilité est cochée comme Générer un rapport. Voyez ce que ça nous donne. D' accord, l'accessibilité 1907 était dans le vert, donc c'est bien et c'est ce que vous devriez viser. Mais voyons si cela nous donne des recommandations. Ok, l'accessibilité, l'arrière-plan et pour les couleurs de base n'avaient pas un rapport de couleur suffisant. Éléments échouants qui doivent voir si je survole celui-ci, Il pointe pour lire plus ici. Ok, c'est bon. Alors réparons ça. Donc c'est à l'intérieur de notre texte ANCA. Donc, je suis un peu sûr que le texte Anchor est clair. Rendons la couleur noire. Donc, 000 000. Ok, ce n'est pas noir. Et puis un autre élément défaillant est petit, qui est le droit d'auteur. Et comme vous pouvez le voir, j'espère que vous pouvez voir que droit en bas, que le gris n'est pas très lisible sur le noir est un. Donc, nous allons mettre à jour le pied de page. Faisons en sorte que les changements de gris soient, diriez-vous de cette couleur d'or que j'ai utilisé ? Et c'est plus lisible. D' accord. Et les audits passés sont tous écologiques, donc ce seront des fonctionnalités accessibles que nous avons utilisées et qui fonctionnent bien. Alors s'il vous plaît exécuter Lighthouse sur votre page et si cela signale des problèmes ou des avertissements, s'il vous plaît travailler à travers eux. Et puis c'est votre page faite avec des fonctionnalités entièrement travaillées et accessibles. Bien joué. 15. Projet de cours - Partager de l'amour: Maintenant, pour partager votre travail sur Skillshare. Pour que moi-même et les autres étudiants puissent voir votre excellent travail. Il suffit d'ouvrir GitHub Desktop, ce que j'ai fait ici. Assurez-vous simplement que vous êtes connecté ou que vous allez sur Préférences et que je suis connecté. Et puis la liste déroulante ici, nous allons créer un nouveau dépôt. D'accord ? Et je vais juste naviguer vers le dossier. Assurez-vous de faire de même pour le dossier racine de votre travail et donnez votre nom de réalimentation et appelez l'accessibilité Skillshare. C' est très bien. Puis cliquez sur Créer un référentiel. K devrait être ouvert. Et assurez-vous juste que vous voyez des fichiers ici à gauche, ce que je ne vois pas. C' est probablement parce qu'il a créé un dossier repo pour moi dans mon répertoire. Donc je vais faire est juste de copier mes fichiers dans ce dossier. Comme ça. Et puis nous pouvons voir nos changements ici. Y a-t-il k prêt à pousser jusqu'à GitHub ? Donc, dans le résumé a échoué, je vais juste écrire une note. Fonctionnalité, page unique, accessibilité, site Web, quelque chose dans ce sens, puis s'engager à main, qui est le nom de la branche. Et puis sur la main droite en haut, je vais publier dans le dépôt. Donc, juste pour confirmer cette valeur jusqu'à GitHub. Et après quelques secondes, une fois qu'il a poussé tout votre travail, nous pouvons vérifier le repo sur GitHub, ce que nous allons faire dans notre et aller sur github.com, assurez-vous que vous êtes connecté. Et sur la gauche devrait être une liste de vos dépôts. Je viens de chercher Skillshare pour se rétrécir à la réparation. Il suffit de cliquer dessus et ça s'ouvrira. Ok, et pour vous assurer que cela est rendu public, afin que vous puissiez le pousser sur GitHub Pages, il suffit d'aller dans Paramètres ici. Et puis tout le long du fond. Vous devez changer la visibilité du repo de privé à public. Et sous les pages GitHub, vous pouvez le voir dit mise à niveau ou rendre ce référentiel public pour activer les pages. Alors changez de visibilité ici. Il est actuellement défini sur privé. Cliquez sur rendre public. Et puis je dirai, S'il vous plaît taper le nom de votre pension pour confirmer. Donc je vais juste copier ça. C' est donc pour des raisons de sécurité. On y va. Je comprends la visibilité du référentiel de changement comme public étroit. Et puis dans GitHub Pages, vous verrez qu'il y a maintenant quelques options que vous pouvez choisir. Assurez-vous donc de choisir la branche principale, qui est l'endroit où vous venez de vous engager. Cliquons sur ça. Nous voulons le répertoire racine, je vais cliquer sur Enregistrer. Et puis une fois que cela se charge, cela devrait nous donner une URL à notre site Web, qui sera un dossier public. Voir ici est donc lorsque votre URL est prête, je vous encourage à le partager car il sera un lien vers votre page comment publié, site Web. Je peut-être par un, par les fonctionnalités d'accessibilité que vous avez ajouté. En ajoutant tout cela à la section de votre projet de la classe. Parce que cela me permettra de vous faire part de vos commentaires et suggestions. Je vous encourage également à interagir avec d'autres étudiants afin que vous puissiez vous offrir un soutien mutuel. Bien sûr, si vous avez des questions ou si vous avez besoin de plus de conseils, alors s'il vous plaît laissez-moi savoir. Je suis heureux de vous aider. 16. Résumé: Bien joué. Vous avez fait un travail formidable familiarisant avec ce cours et en créant votre propre site Web d'une seule page tout compris avec des fonctionnalités d'accessibilité. Vous avez beaucoup appris dans ces leçons tout sur les principes fondamentaux de l'accessibilité Web. Les différents niveaux trouvés dans les directives d'accessibilité, les divers handicaps que vous devez prendre en compte lorsque vous travaillez sur votre prochain projet web. Et comment implémenter les fonctionnalités d'accessibilité HTML et CSS correctes pour créer des sites Web qui sont tous inclusifs et utilisables pour tout le monde. Maintenant, j'ai été développeur et j'ai des connaissances sur l'accessibilité Web, une compétence si importante et nécessaire à avoir quel que soit le niveau auquel vous êtes, que ce soit un niveau junior, intermédiaire ou senior, c'est absolument fondamental que vous faites de l'accessibilité une partie de votre processus de développement web. Pas seulement sur le plan juridique, mais aussi sur papier. Toute discrimination et les produits que vous faites, je vous encourage à prendre vos nouvelles connaissances trouvées. Et si vous travaillez au sein d'une grande équipe de développement ou d'une équipe créative , transmettez vos connaissances en matière d'accessibilité à l'étape de la planification de votre prochain projet et expliquez comment et pourquoi il est important d'inclure ces fonctionnalités. Enfin, je voulais juste vous remercier massivement non seulement de vous être inscrit aux écoles, mais aussi de l'avoir complété. Sans votre soutien, les enseignants comme moi ne seraient pas en mesure de créer de tels contenus. Donc, vraiment merci beaucoup. S' il a apprécié ce cours et j'espère vraiment que vous l'avez fait, cela signifierait tellement pour moi si vous pouviez prendre le temps de laisser un avis, je lis chaque commentaire que je reçois et je prends en compte tous les commentaires que vous pourriez laisser. Donc, je peux continuer à améliorer nos leçons et continuer à faire les objectifs est que vous trouvez utile. Donc, avec cela étant dit, merci encore tellement, vous êtes génial. Maintenant, allez-y. Encourues.