Conseils d'accessibilité essentiels pour HTML et CSS

1. Introduction: Bonjour. Je m'appelle Aga et je suis une conceptrice de codage expérimentée, mais j'aime aussi enseigner. C'est pourquoi je suis l'un des meilleurs professeurs de Skillshare. Tout au long de ma carrière, j'ai partagé mes connaissances lors diverses conférences à travers le monde, de Lisbonne à Singapour et il est grand temps de partager ma passion et mes connaissances avec vous. Dans ce cours intitulé Conseils essentiels pour l'accessibilité en HTML et CSS, vous découvrirez comment vérifier si votre HTML est sémantique. Ce qu'il faut éviter lors de l'écriture de CSS accessibles. Comment exécuter un lecteur d'écran sur votre ordinateur. Pourquoi les animations sont dangereuses et vous devez faire attention à elles. La dernière, comment mettre en œuvre rapidement des conseils d'accessibilité, même si vous ne travaillez pas en tant que codeur dans votre routine quotidienne. tout dans des cours très concis et courts, vous bénéficierez immédiatement votre travail quotidien en tant que designer ou codeur. Nous savons tous que l'accessibilité est un sujet crucial de nos jours et nous pouvons le négliger à la fois en tant que concepteurs et programmeurs. L'accessibilité est un sujet très important. Environ 15 % de la population vit avec certains handicaps. C'est pourquoi, en tant que concepteurs et développeurs, nous devons savoir comment rendre nos produits plus accessibles et vous pouvez commencer à le faire dès maintenant en rejoignant mes cours. Il est grand temps pour vous d' acquérir les connaissances de base et d'en savoir plus sur le HTML et le CSS accessibles. Vous savez probablement que la documentation relative aux directives d'accessibilité des contenus Web est très complexe et difficile à lire. Mais dans mes cours, nous allons nous concentrer sur ce sujet d'une manière très pratique. Bien entendu, comme d'habitude dans mes cours, vous aurez des devoirs à faire et je vous recommande vivement partager vos résultats dans la section des cours du projet. Mais que faire si vous n' avez pas d'expérience en programmation ? Ne t'inquiète pas. J'ai déjà préparé des cours intitulés Code your own portfolio et grâce à eux, vous pourrez acquérir les bases du HTML et du CSS. Après les avoir terminés, vous pouvez accéder directement à ces cours et commencer à apprendre l'accessibilité. Toutefois, si vous êtes déjà habitué à écrire du HTML et du CSS, nous vous invitons vivement à vous lancer dans toute première leçon de ce cours. Ce qui est très important ces cours, c'est que vous mettrez en œuvre les connaissances acquises pour mettre en pratique la théorie en vous confiant une tâche. prime, à toutes les personnes qui réaliseront ce projet de classe, je leur enverrai cette liste de contrôle d'accessibilité que vous pourrez utiliser dans votre travail quotidien. Rendez-vous lors de la première leçon. 2. Pourquoi apprendre l'accessibilité ?: Leçon numéro 1, pourquoi nous devrions nous renseigner sur l'accessibilité. La toute première chose par laquelle je devrais commencer est la définition de l'accessibilité. L'accessibilité consiste à rendre le produit accessible à tous. Bien entendu, dans ces cours, je vais me concentrer sur les produits numériques tels que les sites Web ou les applications. Bien entendu, l'accessibilité ne couvre pas uniquement la sphère numérique, car elle concerne également la vie réelle, par exemple l'architecture et le monde 3D. Pour vous donner un aperçu des raisons pour lesquelles l'accessibilité de l'apprentissage et les raisons pour lesquelles il est si crucial d'en prendre soin, je vais me pencher en profondeur sur les statistiques. Comme l'indique le Pew Center, plus de 15 pour cent de la population totale souffre d'un handicap. Plus de 2,2 millions de personnes souffrent de troubles de la vision. Parmi toutes les personnes handicapées, 11 ont des problèmes cognitifs. Par exemple, mémoriser des informations ou les digérer, donc les traiter ou les concentrer. Plus de 98 % des pages d'accueil ne sont pas entièrement accessibles. Il y a des tonnes de travail à faire, et en tant que concepteurs de codes, codeurs et développeurs, nous pouvons vous aider. certaines catégories de Nous pouvons tomber sur certaines catégories de déficiences et nous devons en tenir compte lors de la conception ou du codage des produits. Tout d'abord, il est auditif, puis cognitif, neurologique, physique, vocal et visuel. Vous pensez peut-être que l'accessibilité ne me concerne pas parce que je ne souffre d'aucune maladie ou que je n'ai aucun problème ou défi. Mais en réalité, des preuves tangibles montrent que l'accessibilité et l'accessibilité des produits permettent à tout le monde d'en tirer parti. Par exemple, imaginez une situation où une mère aimerait utiliser les médias sociaux, regarder des vidéos, des bobines Instagram, mais elle est dans la même pièce que son petit enfant qui a Je viens de m'endormir. Grâce aux légendes, aux sous-titres qui ont été diffusés, pas seulement pour les personnes qui n'entendent pas. Nous couvrons également tous ces cas où les gens peuvent simplement augmenter leur volume. C'est totalement bénéfique. Très souvent, cela se produit aussi dans ma vie réelle. Chaque fois, par exemple, que je suis dans mon propre bus et que j'aimerais regarder quelque chose mais que je n'ai pas mes écouteurs allumés, je le regarde simplement avec le volume baissé. en va de même pour la situation avec des couleurs agressives. Chaque fois que vous êtes fatigué la nuit, vous pouvez utiliser le mode sombre. C'est pourquoi, en tant que concepteurs, nous devons bien réfléchir aux couleurs que nous utilisons sur un site Web et à leurs conséquences. Vous pouvez également imaginer une situation où vous vous retenez de nombreuses personnes vos mains sont occupées et où il est difficile d'utiliser votre téléphone portable, mais où vous devez rapidement répondre à votre mère, et il est difficile pour vous de naviguez parce que la zone cliquable est très petite, vous devez donc vous concentrer dessus. Mais en fait, la situation ne vous le permet pas. Il existe de nombreux autres cas d'utilisation réels des fonctionnalités d'accessibilité. Nous devrions les considérer de manière globale, pas seulement aux personnes âgées ou aux personnes officiellement atteintes de certaines déficiences. Mais tout le monde peut vraiment bénéficier de notre soin apporté à des produits accessibles. L'accessibilité aide à la fois les personnes atteintes de déficiences permanentes et temporaires. N'oubliez pas que l' accessibilité ne concerne pas seulement les personnes qui vieillissent, mais aussi le vieillissement de la société. Tout tourne autour de nous, de nos voisins, nos parents, de notre sœur cadette et des gens du travail. En gros, tout le monde. 3. Comment mesurer et définir l'accessibilité ?: Leçon numéro 2, comment l'accessibilité est mesurée et vérifiée. Au tout début, je vous dois une définition ce que représente réellement le WCAG. Cette abréviation désigne directives d'accessibilité du contenu Web. Ce sont les directives que notre site Web, notre produit numérique, doit respecter pour réussir l'audit d'accessibilité. L' information très importante est que l'accessibilité peut parfois être considérée comme difficile ou ennuyeuse en raison de la documentation très complexe. Franchement, ce n'est pas une lecture facile donc je comprends parfaitement que si vous n'avez pas eu l'occasion de l' approfondir, c' est pourquoi j'ai créé ces cours pour que vous puissiez voir que l'accessibilité est en fait quelque chose que nous pouvons mettre en œuvre dans notre pratique quotidienne, dans notre flux de travail quotidien. Comment devons-nous penser HTML sémantique et comment devrions-nous penser au CSS accessible ? En ce qui concerne les principes contenus dans les WCAG, il existe quatre catégories dont nous devons nous souvenir, qui sont perceptibles, opérables, compréhensibles et robustes. Cela signifie que si nous voulons que nos produits répondent à tous les critères mentionnés dans les WCAG, nous devons permettre à l'utilisateur de percevoir notre produit, de le comprendre La copie est donc également très importante, l'écriture UX. Outre la navigation, leurs utilisateurs devraient être en mesure de naviguer sur le produit et, bien entendu, d'interagir avec celui-ci. Ces quatre catégories principales influent sur toutes les actions de ces utilisateurs. Bien entendu, nous ne pouvons pas oublier terme très important lorsque nous parlons de l'utilisation sites Web par des personnes qui ne peuvent pas voir ou qui ont des difficultés de vision et ce sont des lecteurs d'écran. Les lecteurs d'écran sont des technologies d'assistance qui utilisent la synthèse vocale. Ils lisent le contenu du site Web et s'expriment à haute voix. C'est ce qu'ils ont lu récemment. Ils transforment le texte en parole afin que les personnes qui ne peuvent pas voir, qui ne peuvent pas consommer ce qui se trouve sur un site Web puissent au moins en afficher le contenu. Les utilisateurs de lecteurs d'écran naviguent sur le site Web à l'aide du clavier ou d'un raccourci. Bien entendu, vous pouvez utiliser les lecteurs d' écran et les tester vous-même. Si vous êtes un utilisateur Windows, vous pouvez accéder au logo Windows puis ouvrir les paramètres du Narrateur, activer pour passer sous Utiliser des narrateurs. C'est le petit tutoriel que vous pouvez utiliser. Malheureusement, je n'ai pas fini d'utiliser Windows donc je ne peux pas vous montrer comment le faire étape par étape , mais vous trouverez certainement des tutoriels sur le site Web. En termes de Mac, vous devez accéder aux préférences système, à l'onglet Accessibilité, à la voix off, puis activer cette fonction. Comment le faire ? Je vais vous le montrer dans une seconde. Lancez le lecteur d'écran sur notre Mac. Tout d'abord, j'ouvre les préférences système. Ensuite, je recherche l'accessibilité et j'ouvre l'onglet Voice Off et je clique sur « Activer la voix off ». Adam ne répond pas, fenêtre sans titre, tout texte vide, comme focus du clavier. Votre champ de texte au sein d'un groupe. Désolée. Si vous fermez la fenêtre, la voix off sera désactivée afin que vous puissiez rapidement décider si vous souhaitez l'utiliser ou non et à quels moments et, bien sûr, vous pouvez accéder directement au navigateur Web, est-ce ou non et à quels moments et, bien sûr, vous pouvez accéder directement au navigateur Web. Il existe également quelques plugins Chrome, donc je vais vous le montrer également et ce plugin s'appelle Chrome Fox, si je ne me trompe pas, ou lecteur d'écran. Voyons comment fonctionne le plugin. Je suis en train d'ouvrir le site Wired.com au hasard. L'ensemble du système a démarré à Londres. Illustration en lien de la Tour Eiffel à Paris sur fond jaune. Elément de listes liées, les startups les plus en vogue de Paris, illustration de Berlin sur fond fin. Eléments de listes liés. Je vous recommande de jouer avec ce plugin Chrome et de vérifier comment il fonctionne de votre côté. 4. Code HTML sémantique: Nous savons pourquoi l'accessibilité est si importante. Nous comprenons également comment les lecteurs d'écran ont utilisé un code de notre site Web. Mais le plus important, c'est que la sémantique du HTML signifierait en fait écrire du HTML sémantique. Commençons par un exemple. HTML sémantique. On peut le comparer à raconter une histoire avec des emojis. Si vous voyez cet ensemble de cinq emojis différents, vous ne pouvez probablement pas deviner quelle est l'histoire qui se cache derrière tout cela. Bien sûr, vous pouvez avoir quelques idées, mais en fait, vous n'en serez pas sûr à 100 %. Il en va de même pour l' ordinateur et les navigateurs. Nous devons donner des instructions très appropriées ce qui se passe sur notre site Web, quels types d'informations nous allons présenter ? En fait, quelle est la structure de l'information ? Quelle est la structure du document ? La situation change lorsque je vous donne plus de contexte, par exemple, que j'ai une amie Jane et qu'elle a récemment eu très faim au travail. Elle aime commander de la nourriture chinoise, mais elle doit faire très attention plats épicés car son estomac n'aime pas ça. Si je vous donne ces petites informations, vous interpréterez cette tête d'emoji d'une manière totalement différente. Exactement la même chose se produit avec le navigateur. Si nous voulons raconter l'histoire dans son intégralité, et si nous voulons intégrer à notre contenu des balises HTML pertinentes, le navigateur comprendra immédiatement ce que nous essayons de transmettre à l'utilisateur, le lecteur d'écran aussi. C'est pourquoi il est si important d'utiliser les balises HTML avec soin. Parce que notre HTML est sémantique, il fournit un certain type d' informations, par exemple, que nous avons un lien, un paragraphe, un titre, le niveau de l'en-tête, et peut également donner divers des informations sur la structure du site Web, par exemple, que nous avons l'en-tête, la partie principale et aussi le pied de page, il est très important de les utiliser. C'est pourquoi notre objectif est de fournir du contexte au navigateur. N'oubliez pas que le HTML sémantique est au cœur de l'écriture de code accessible. Le code HTML sémantique comporte deux aspects . Le premier est le contenu. Nous ajoutons du sens ou enveloppons notre contenu avec des balises sémantiques, telles que des titres, des paragraphes, des liens , des listes, des éléments non ordonnés et ordonnés, etc. Mais il y a aussi le deuxième aspect qui est la mise en page. Tout ce qui est connecté, la façon dont les informations sont réellement organisées, qu'elles soient importantes pour figurer tout en haut, ou qu'elles soient moins importantes ou plus détaillées, donc au milieu ou s'il s'agit d' informations que nous conservons habituellement dans les pieds de page, telles que les coordonnées , les e-mails, les liens vers les règles de confidentialité , etc. Si vous vérifiez le code, vous verrez immédiatement que nous avons une structure logique. Nous commençons par la navigation, donc nav-tag, puis nous ajoutons un en-tête, tout en haut du site. Nous avons quelques sections. Chaque section contient également un article. Chaque article possède un titre et un paragraphe appropriés. Si vous regardez tout en haut, vous verrez que dans l'en-tête, nous avons une balise h1, avec laquelle nous commençons généralement notre site Web. Voyons comment notre site Web est rendu. Pour cela, j'utilise le package atom-live-servers starts server. Cela devrait ouvrir mon site Web. Je vais voir la copie du portfolio. Vous verrez que j'ai l'en-tête avec H1 et si je vais en bas, je verrai une section puis une autre. Ces trois sections sont très similaires les unes aux autres. La seule différence réside dans le fait de placer les éléments dans la mise en page. Mais en général, chacun d'eux est un article, contient le titre du deuxième niveau, des textes, qui sont un paragraphe, puis un lien. Ensuite, tout en bas, nous avons le pied de page. maintenir une séquence logique sur notre site Web Il est très important de maintenir une séquence logique sur notre site Web et dans notre code , car nous avons ainsi une expérience plus fluide pour la personne qui ne peut pas voir mais qui souhaite suivre la structure. que nous avons défini. N'oubliez pas de faire attention à la structure de votre contenu, car c'est très important. Merci d'avoir un ordre dans notre hiérarchie et de le maintenir bien dans le code. Nous adressons un message très clair aux utilisateurs de lecteurs d'écran. Il est primordial d' y prêter attention. Comme nous savons déjà ce que signifie le HTML sémantique, nous pouvons approfondir les balises détaillées et découvrir quels balises et attributs sont importants pour rendre notre code plus accessible. 5. Les attributs HTML et les améliorations d'accessibilité - Partie 1: Il est grand temps de passer au code HTML et d'en savoir plus sur les attributs et les taxes , ce qui vous aidera à améliorer votre accessibilité. La toute première balise HTML que je voudrais mentionner est la déclaration DOCTYPE. Il se trouve toujours en haut du document HTML. Pourquoi est-ce si important ? Il indique aux navigateurs quelle version du HTML nous utilisons. Grâce à lui, le navigateur sait comment interpréter toutes les balises. En HTML5, nous pouvons utiliser des balises sémantiques telles que nav, comme l'en-tête, comme le pied de page, donc article et main, etc. Grâce à cette déclaration DOCTYPE le navigateur saura exactement quelles informations sont transmises au lecteur d'écran. La chose la plus importante à propos d'un site Web est sa langue. Grâce à l'attribut lang, le lecteur d'écran saura lire les informations présentées dans le document. Si notre site Web utilise l'anglais, nous devons appliquer l'attribut lang avec en, qui signifie anglais. Cela signifie que l'ensemble du document est écrit en anglais. Le lecteur d'écran lira chaque morceau de texte en anglais. Mais il arrive parfois que nous citons quelque chose dans une autre langue étrangère, par exemple l'espagnol. Nous avons une partie de la citation espagnole, rapidement, je vais juste résumer les lignes de codes pour que vous puissiez la voir plus facilement. J'ai un texte en espagnol, mais les autres paragraphes, la liste, la navigation sont en anglais. Voyons comment les lecteurs d'écran vont gérer ce problème. outils des fenêtres d'accessibilité Vous êtes actuellement sur la barre d'outils audio. Vue d'ensemble. Voix off. Visité, Lien, Contact. Lien, œuvres, lien, expérience, Behance, Lien, Twitter, LinkedIn. Objets de niveau 1 à 2. Bonjour, je suis Jane Doe. Bonjour, je suis Jane Doe. Comme vous pouvez l'entendre, ce n'est pas la meilleure expérience. C'est pourquoi il est si important d'appliquer un langage et des attributs de langue appropriés aux éléments de notre site Web. Dans notre cas, nous devrions avoir l'anglais pour l'ensemble du site Web. Mais pour cette information , nous devrions ajouter un autre attribut lang et ajouter ES, qui signifie espagnol. Voyons comment cela fonctionne. Vous êtes actuellement sur un élément de texte. Chromé. Comme vous avez pu le constater, l' expérience est bien meilleure grâce à cet attribut lang appliqué à l'ensemble du site Web, mais il a également donné un élément différent de l'ensemble du site Web. Le lecteur d'écran saura qu'il doit changer de langue. En résumé, l' attribut lang aide le lecteur d'écran à lire correctement le contenu du site Web, à le prononcer de manière appropriée. Mais il existe également une autre fonctionnalité liée à l'utilisation de l'attribut lang, qui est le service de traduction de Google. Grâce à la définition du site Web, grâce à l'ajout d'une langue appropriée, Google affichera à l'utilisateur une petite fenêtre contextuelle demandant si le contenu du site Web doit être traduit ou non selon les paramètres de l' utilisateur dans le navigateur. 6. HTML : vs <a>vs vs</a> (vs: Parlons de la structure de notre site Web. Si vous consultez ce site Web de portfolio, vous aurez immédiatement une idée générale de l' architecture de l'information Vous saurez donc qu'il s'agit probablement des rubriques principales, à savoir h1. Ensuite, lorsque nous faisons défiler l'écran vers le bas, nous obtenons une légende assez grande, des en-têtes plus petits et un résumé de l'ensemble du site Web dans le pied de page. Voyons à quoi cela ressemble dans le code. J'ouvre maintenant les outils div, qui me renseigneront sur les balises appropriées utilisées dans le code. Ici, comme mentionné, c'est h1, donc c'est le tout premier titre qui indique au moteur de recherche ce qui se passe ici. Grâce à ce h1, nous pouvons supposer que ce sera le site Web qui décrit Jane Doe. Nous avons un ensemble d' éléments de liste dans une liste ordonnée, qui est l'ancienne. Mais grâce aux listes ordonnées, nous avons ce numéro devant chaque ligne. Voici la liste. Si nous allons plus loin, vous verrez les sections, et chaque section contient h2 à l'intérieur. Si nous choisissons cet élément, nous verrons que nous avons h2, et en voici un autre. Nous avons h1, h2, et si le site Web est complexe, nous appliquerons également h3. Il est toujours très important de se souvenir de l'ensemble de cette structure dans le plan du site. Voyons rapidement ce que dit la documentation WCAG. En termes de titres, nous avons ici les informations selon lesquelles nous devons imbriquer les titres par rang ou niveau, et le titre le plus important est h1. Il est très important de ne pas sauter les niveaux de titre car cela peut prêter à confusion et doit être évité dans la mesure du possible. Regardons l' exemple réel sur le site Web, et voici le blog de Tobias Van Schneider et il a sur son blog, différents articles de blog. Voici un exemple de l'un d'entre eux. Si nous allons dans les outils div et que nous vérifions l'élément, nous verrons que c'est h1. Le tout premier titre de la liste sur la structure du site. Ensuite, nous pouvons aller voir qu'il y a de brèves informations sur l'extérieur. Ici, il est créé sur la balise div. Nous pourrions en rechercher un autre, qui est plus significatif, par exemple, un côté ou une section. Mais regardons le suivant, qui est le titre h2, donc nous avons h1, h2, ce qui est parfaitement logique. Nous allons plus loin, et voici le paragraphe, le tout premier des articles de blog. Ici, nous avons une citation, et c'est génial parce que nous avons une balise blockquote, qui est sémantiquement associée à la fonction de cet élément du site Web. Nous avons des paragraphes, et tout en bas, il y a Lire la suite. Il y a H2 en un. Regardons les titres plus petits, ce sont aussi des titres h2. J'opterais probablement pour h3, le troisième niveau du titre. Mais ils peuvent également être utilisés ici. Non En fait, ici, nous n'avons que des liens et le div. Je vais peut-être vous montrer plus de code. Il y a div. Ensuite, il y a le spam. Ce sont des chiffres, donc je suivrais l'ordre pour les lister, au lieu d'ajouter du spam pour être plus sémantiquement correct, tout comme il est présenté sur les portfolios de Jane Doe. Souvenez-vous de h1, et h1 est également très important en termes de référencement et d' optimisation pour les moteurs de recherche, car le moteur de recherche recherche les méta-descriptions, le méta-titre, mais aussi h1. Il se trouve sur le plan du site Web, qui est créé grâce à cette structure que nous ajoutons en définissant des niveaux de rubriques. Nous avons déjà expliqué pourquoi la structure du site et le maintien des niveaux appropriés de rubriques sont si importants. 7. CSS et accessibilité - partie 1: Bienvenue à la leçon numéro 5. Dans cette leçon, nous allons expliquer comment rendre notre code CSS accessible. Si vous pensez à l'accessibilité et au CSS, qui est bien sûr responsable de fourniture de la couche visuelle de notre site Web, la toute première chose qui nous vient généralement à l'esprit est le contraste des couleurs. Je vais vous montrer comment nous pouvons le vérifier rapidement sans plug-ins supplémentaires ou sans logiciel supplémentaire. Passons maintenant à notre site Web de portfolio. Je voudrais vous montrer comment utiliser un simple vérificateur de contraste sur DevTools. J'utilise Chrome, mais c'est aussi dans Firefox. Vous pouvez saisir cet explorateur d'éléments et naviguer, par exemple, sur l' élément de la navigation. Dans cette petite fenêtre, vous verrez qu'il y a une section d'accessibilité et que nous avons un contraste, que c'est 17,2, ce qui signifie que nous satisfaisons à l'exigence de contraste. Mais si nous pouvions changer de couleur, comme je le ferais rapidement dans une propriété, par exemple, je sais que l'EEE est gris. Si nous revenons à cet élément, nous verrons que le contraste est de 1,05, ce qui est très faible. Il est en fait très difficile de différencier la couleur du texte de la couleur de l'arrière-plan. Une fois que nous visons les valeurs les plus élevées, en termes de couleur, vous verrez que le rapport de contraste est également plus grand, et nous le dépasserons. Par exemple, ici, il y a cette limite, cette plage dans laquelle nous ne répondrons pas aux exigences d'accessibilité en termes de contraste des couleurs. Je vous recommande vivement de l'utiliser car c'est simple, facile et tentant et n'oubliez pas que le contraste des couleurs est très important. Il existe un autre outil très important pour le style des éléments du site Web, qui est le style des hyperliens, donc de tous les liens. Les liens sont généralement présentés en bleu ou avec le sous-jacent. Il est très important de ne pas utiliser de couleur uniquement parce que pour les personnes qui souffrent de certains troubles de la vision comme le daltonisme ou le monochromatique, nous devons en tenir compte. Au lieu de n'appliquer que des couleurs aux liens, nous pouvons également les différencier en ajoutant un arrière-plan ou un soulignement. Imaginons que nous ayons un lien quelque part dans notre texte, par exemple ici. Où se trouve le lien ? Nous avons le style par défaut, qui est le style sous-jacent et pour le site Web visité, il est violet. Je pense que nous pourrions également transformer ce lien en noir. Ça va bien se passer. Mais il est important de conserver au moins une source d' indication visuelle indiquant aux utilisateurs qu'il s'agit d'un élément cliquable. Bien entendu, nous pouvons en appliquer davantage. Nous pouvons également appliquer une solution plus distinctive. J'ai donc ajouté la classe link, et nous avons pu rapidement la styliser ici. J'ajoute un arrière-plan, par exemple, blancs pour le lien et de la couleur noire. De cette façon, il serait facile de le voir, s'agit de l'hyperlien. Bien entendu, vous pouvez appliquer des solutions plus attrayantes sur le plan visuel. Tout dépend de vous. Mais ce qui est très important, c' est que s'appuyer uniquement sur code couleur n'est peut-être pas la meilleure solution en termes d'accessibilité. Il existe une autre propriété CSS à laquelle nous devons faire attention. Les lecteurs d'écran ne verront pas l'élément auquel nous appliquons de la visibilité masqué. Je vais cliquer, tu as disparu depuis un moment. Si nous ajoutons à cette balise img la propriété, la visibilité et la valeur cachées, vous verrez que l'image a disparu. Il est en fait masqué, mais le code reste dans notre structure HTML. Cependant, il existe des technologies d'assistance comme les lecteurs d'écran, veulent voir cet élément, même manière que nous pouvons le voir sur un site Web. N'oubliez pas de cela lorsque vous ajoutez des animations ou que vous modifiez l'état de l'élément car les lecteurs d'écran ne pourront pas les lire. en va de même pour l'affichage, aucun. Nous ne devons pas être également prudents. Il y a aussi un très bel article que je vous recommande vivement de lire par bouts de code. s'agit de la propriété de visibilité et du fait qu'il ne s'agit pas seulement d'une mauvaise visibilité, il y a aussi une section sur l'accessibilité, sur les technologies d'assistance. Si vous souhaitez en savoir plus et en savoir plus sur les techniques possibles en CSS, pour masquer des éléments, je vous recommande vivement de consulter ceci. 8. CSS et accessibilité - partie 2: Il existe une pseudoclasse strictement liée à l'accessibilité, à savoir la focalisation. Voyons comment fonctionne le focus et ce que nous devons éviter lors de l'implémentation de cette fonctionnalité CSS. Nous allons consulter le site Web du portfolio afin que je puisse vous montrer la pseudoclasse en pratique. Si je commence à utiliser le clavier tactile, vous verrez immédiatement que quelque chose se passe avec les éléments focalisés à un moment donné. Maintenant, je suis en train de lire la suite, et vous pouvez le voir grâce à ce contour bleu. C'est ce que fait la concentration. Si vous souhaitez modifier la couleur de ce contour, par exemple , je vais peut-être me cacher une minute. Je peux écrire un nouveau cours. J'ajoute donc un focus sur la classe CSS, et je peux ajouter de la couleur du contour. À des fins de démonstration, choisissons le rouge. Si je commence à tester, cela fonctionne. Veuillez faire attention au fait que l'élément de la liste et la navigation ont un contour bleu. C'est par défaut. Mais si je passe aux boutons, ils sont rouges car j'ai créé une pseudoclasse de focus séparée. Bien entendu, je peux également changer la couleur de ces articles. J'aurais besoin de créer un sélecteur comme celui-ci. Au niveau de la mise au point, tracez la couleur, et je peux appliquer du rose, par exemple. Si je commence à naviguer, vous verrez que le contour est rose. Cette file d'attente, cette file d'attente visuelle est très importante car elle donne aux gens des informations sur l' endroit où ils se trouvent actuellement sur le site Web. Sur de nombreux sites Web, je tombe sur une situation où les grandes lignes n' étaient pas définies. Par exemple, je peux écrire des sélecteurs. Pour chaque élément avec une pseudoclasse de focus, le plan serait défini sur none. Je vais peut-être l'agrandir un peu pour que vous puissiez mieux le voir. Si je commence à utiliser la touche Tap, vous verrez que vous changez position sur le site Web, mais en fait, vous n' avez aucune idée visuelle endroit où se trouve votre curseur. Cela ne devrait pas se produire, et nous devons toujours garder à l'esprit que le contour doit au moins rester bleu par défaut. Bien entendu, vous pouvez changer la couleur en fonction de votre design, votre concept et de votre idée. Cependant, n'oubliez pas que le fait de définir le contour sur Aucun n' est vraiment pas pris en charge en termes d'accessibilité. Nous avons abordé le sujet des pseudoclasses, mais il existe également des pseudo-éléments, des pseudo-contenus, tels que « avant » et « après ». L'information que vous devez garder à l'esprit est qu' avant et après les éléments de pseudo-contenu sont en fait rouges et reconnaissables par les lecteurs d'écran. Passons rapidement au code et voyons à quoi ressemble un pseudo-contenu sur un site Web. Imaginons que nous aimerions avoir une petite balise, par exemple, affichée près du titre, qu'il s'agisse du nouveau contenu. Ce serait peut-être plus facile si je vous le montre plutôt que de le décrire. Nous aimerions créer un pseudo contenu, par exemple, h2 : après ou avant, peut-être avec le contenu. Ici, j'ajoute le contenu et la valeur. Comme vous pouvez le constater, le mot « now » est ajouté. Un lecteur d'écran le verrait. Mais j'aimerais le styliser un peu différemment. Sur le fond noir de couleur blanche, je changerais la hauteur de la ligne à zéro. Je changerais la taille de police à 15. Disons que la famille de polices serait la, je ne me souviens pas laquelle est utilisée pour Space mono, mono space, disons. Ce serait peut-être plus facile de passer au sans-empattement. Espacement des lettres, un, et je vais ajouter du rembourrage. Nous avons là comme une partie du contenu généré en CSS. Nous devons nous en souvenir, et si vous regardez les différentes rubriques, vous verrez qu'il est ajouté à chaque h2. Mais bien sûr, on peut créer une classe puis l'associer, ceci avant un pseudo contenu à cette classe. Voyons comment le lecteur d'écran voit ces pseudo-éléments. J'ouvre les préférences système et je vais activer VoiceOver. Hors groupe avec deux articles et groupe avec deux éléments, trois éléments et article avec trois éléments, trois éléments de titre de niveau 2, quatre éléments. Nouveau, j'ai un groupe pour l'artiste. Comme vous pouvez l'entendre, VoiceOver lit la nouvelle application iPad. Alors il le voit. Il est bon de l'avoir à l'esprit, car nous avons tendance à utiliser ces techniques pour afficher ou positionner des mises en page ou des concepts plus complexes. En fait, c'est une bonne nouvelle. 9. Animations et accessibilité: Bienvenue à la leçon numéro 6. Dans cette leçon, nous allons aborder un sujet très important, qui concerne les animations et leur facteur d'accessibilité. Tout d'abord, je dois vous montrer un fait très important Peut-être n'avez-vous pas encore entendu dire que 35 pour cent des adultes âgés de 40 ans ou plus aux États-Unis, donc c'est environ 70 des millions de personnes. Ils ont souffert d'un certain dysfonctionnement vestibulaire. Qu'est-ce que cela signifie ? Découvrons-le rapidement. Les personnes atteintes de troubles vestibulaires ressentent généralement le mal des transports, maux de tête, des problèmes d'équilibre, des maladies chroniques et du bruit lorsqu'elles regardent des animations à grande échelle à l'écran. Permettez-moi de vous en dire un peu plus sur les troubles vestibulaires, sur le système vestibulaire lui-même. système vestibulaire fait en fait partie de l'oreille interne, c'est pourquoi il transmet les informations sur l'espace, donc les informations spatiales, mais il est également responsable des informations sensorielles, c'est pourquoi les personnes atteintes de troubles vestibulaires présentent en fait des symptômes tels que du bruit ou des étourdissements. Vous devez également vous rappeler que tout ce scintillement, tous ces éléments clignotants à très haute fréquence peuvent être très dangereux pour les personnes souffrant d'épilepsie. Il y a une autre chose que nous devons garder à l'esprit lors de la conception, lors de la mise en œuvre de l' animation sur nos sites Web. Nous devons garder à l'esprit que tout le monde ne sera pas impressionné par nos animations et les changements rapides de l'état des composants. Mais il y a la bonne nouvelle, CSS joue un rôle vraiment qui aide les gens à ignorer les animations et à s'en débarrasser sur un site Web. Voyons comment cela peut se faire. Je vais ajouter quelque chose, et si vous voyez le site Web maintenant, je vais le rafraîchir. Vous verrez que l'image de Jane pivote constamment, donc il y a une animation constante. Si nous approfondissons le code, nous verrons qu'il existe une animation d' image-clé définie en CSS qui transforme élément en le faisant pivoter de moins trois degrés. Si nous le voyons dans le code, il y a la classe intro-img, donc une animation est ajoutée à cette image et elle va à l'infini et chaque animation prend deux secondes. Je dirais que pour les personnes qui souffrent de troubles vestibulaires, c'est-à-dire supprimer ce type d'animations mais en même temps, nous voulons offrir une expérience cool, donc avoir quelque chose se déplacer, cligner des yeux sur le site Web peut parfois être trouvé attrayant par d'autres personnes, non ? Pour équilibrer cette approche, nous pouvons appliquer ce que l'on appelle prefers-reduced-motion. C'est la règle des médias, peut-être que nos lignes, que vous pouvez voir au milieu, préfèrent les mouvements réduits. Cela signifie que si l' option de mouvement réduit est activée par l'utilisateur , nous pouvons ajouter certaines conditions ici. Par exemple, notre rotation d'animation a été ajoutée à cette classe et, par exemple, ici, nous pouvons ajouter le nom de l'animation none. Nous écrasons la propriété du nom de l' animation et pour les utilisateurs préférant les mouvements réduits, ce morceau de code serait appliqué, ce CSS serait appliqué. Actualisons notre site Web maintenant pour voir s'il y a un changement, où ? En fait ça ne l'est pas. Pourquoi ça ? Parce que je n'ai pas activé cette préférence de réduction des mouvements. façon dont je peux le faire, sur un Mac, se trouve préférences système et je peux taper ici, motion, par exemple, et cela me met en évidence l'accessibilité. Nous devons maintenant afficher et vérifier le mouvement réduit. Vous verrez immédiatement que lorsque vous cochez la case Réduction des mouvements, l'animation ne fonctionne pas. Grâce à cette règle CSS. Si nous le supprimons, donc je vais le détourner vers le bas, je recommande ce morceau de code et je l'actualise. Sans cette règle, même si j'active ces mouvements réduits, l' animation fonctionne toujours. C'est pourquoi il est si important de n' ajouter que quelques lignes de code. Sérieusement, cela ne prend pas beaucoup de temps, alors n'oubliez pas cette fonctionnalité multimédia CSS car elle aidera beaucoup de monde. En fait, il existe un élément très important largement utilisé sur un site Web, très populaire, qui pose un problème d'accessibilité. Pouvez-vous deviner, qu'est-ce que c'est ? Seulement, il apparaît tout en haut, il est fréquemment utilisé sur les sites de commerce électronique et la réponse est Carousels. Je vais rapidement vous en montrer l'exemple. Vous connaissez probablement toutes les bannières qui changent automatiquement après quelques secondes. vue de l'accessibilité, il est très important d'en avoir le contrôle , car si le lecteur d' écran lit ce qui se passe actuellement, il ne peut pas rattraper la vitesse est souvent très élevé. a publié un article très intéressant façon de construire un carrousel plus accessible ou Jason Webb a publié un article très intéressant sur la façon de construire un carrousel plus accessible ou un slider Il ajoute quelques conseils et partage son expérience sur la construction de 360 km accessibles. Il partage également son expérience en fournissant des audits d'accessibilité sur de nombreux sites Web et il souligne les points les plus importants dont nous devons nous souvenir. La règle très importante que je recommande de garder à l'esprit est de désactiver lecture automatique, car sans elle, nous ne pouvons pas réellement respecter la règle WCAG 2.2.2 qui indique la pause, l'arrêt et la hauteur. N'oubliez pas que chaque fois que vous implémentez l'excitation ou que vous la concevez, nous devons implémenter une pause ou d'autres contrôles. Il y a un très bon exemple préparé par Jason, donc nous avons ici le carrousel qui peut bien sûr être contrôlé par notre curseur ou notre souris et qui glisse et aussi par le bloc point noir, nous voyons le courant un. Mais le plus cool, c' est que nous pouvons naviguer dans ce carrousel à l'aide du clavier, donc si j'utilise la touche de tabulation, je peux accéder à la section des liens depuis chacune des vignettes, mais je peux aussi utiliser les flèches. Je peux également utiliser ces éléments tout en bas, donc ces petits points pour accéder à la tuile donnée. Il y a une chose importante sans laquelle nous ne pouvons pas imaginer notre vie, ce sont les gifs. très important à propos des gifs est qu'ils ne sont pas entièrement accessibles car ils sont lus automatiquement donc ce n'est pas très conseillé aux personnes qui ont des problèmes cognitifs ou des problèmes liés à la motion. Ce que nous pouvons faire en tant que développeurs, en tant que codeurs pour rendre les gifs plus conviviaux. Il y a vraiment une bonne chose et c' est un gif pour la bibliothèque, qui vous aide à implémenter gif en tenant compte de l'accessibilité. Comme vous pouvez le voir ici, nous jouons pour contrôler les cadeaux, ce qui est super cool car surtout nos jours, nous avons des tonnes de cadeaux sur des articles variés comme sur des supports alors s'il vous plaît n'oubliez pas que nous avons des bibliothèques qui sont très utiles à mon avis et au fonctionnement de gif. Eh bien, je vais mettre ce gif en pause car il me fatigue aussi. Nous avons l'attribut data-gifffer, nous ajoutons le gif par img-tag. Nous pouvons également ajouter l' attribut data-gifffer-alt et, bien sûr, nous devons implémenter la bibliothèque , mais tout est facile à faire car nous avons le script. Nous devons ajouter à notre site Web et grâce à lui, le lecteur de cadeaux, il fonctionnera dès la sortie de la boîte. Je vous recommande vivement de consulter ce site Web et ce gifffer de bibliothèque avec triple F et j'espère que vous rendrez les gifs plus conviviaux et plus accessibles. 10. Qu'est-ce que l'ARIA: Leçon numéro 7. Qu'est-ce que ARIA ? ARIA est synonyme d'applications Internet riches et accessibles . agit d'un ensemble d' attributs que nous appliquons à notre code lorsque le HTML natif ne parvient pas à couvrir les problèmes d'accessibilité. ARIA a comblé le fossé entre l'accessibilité et les éléments que nous ne pouvons pas simplement décrire avec du HTML sémantique. Examinons les exemples. Imaginez la situation dans laquelle nous avons des onglets et où l'utilisateur peut passer d'un onglet à l'autre. Les onglets sont créés à l' aide de la balise button, mais le lecteur d'écran doit savoir ce qui se passe à l'écran. Par exemple, si nous avons le bouton lui-même, le lecteur d'écran le dira. Mais en termes d'onglets et de fonctionnalités spécifiques, nous n'obtiendrons aucune information à partir de la technologie d'assistance. C'est pourquoi nous devons transmettre plus d'informations, faire passer le message que nous utilisons des onglets et que la personne peut passer de l'un à l'autre à l'aide du clavier. C'est pourquoi nous ajoutons l'attribut role, qui est l'un des attributs ARIA donc role et attribuez-lui une valeur, tab. Vous pouvez également imaginer des situations telles que l'apparition de modèles, des infobulles ou des alertes destinées à l'utilisateur. Dans cette situation, nous devrons également prendre soin de l'accessibilité et ARIA nous aide beaucoup. Je peux te montrer un bout de code. Nous avons div, un conteneur dans lequel nous affichons, par exemple, les informations que votre nom d'utilisateur est une adresse e-mail. Nous donnons des informations supplémentaires qui apparaissent sous forme d'infobulle. Nous avons un identifiant, peu importe qu' il s'agisse d'un identifiant ou d'une classe CSS. Mais l'important, c'est que nous avons un autre rôle ARIA et que nous y ajoutons une infobulle à valeur ajoutée. Comment associer cette infobulle à un élément donné en HTML. Vous pouvez voir que nous avons une partie du forum, donc étiqueter et saisir. Si vous voyez, l'entrée a bien sûr un type qui est un identifiant de texte mais aussi un autre attribut ARIA, qui est aria-describedby. Ici, nous ajoutons le nom de l'identifiant de cette infobulle. Ces deux objets sont connectés l'un à l'autre. Il s'agit d'une information très importante pour le lecteur d'écran. Grâce à ce rôle ARIA et à aria-describedby, toutes les informations seraient fournies à l'utilisateur. Il existe d'autres exemples d'utilisation d'ARIA, et je peux vous montrer ce site Web qui contient des exemples d'ARIA sur GitHub. Si vous souhaitez approfondir, vous pouvez voir ici, par exemple, la saisie de boutons, vous pouvez accéder au code HTML et rechercher quelques exemples. Par exemple, nous avons ici aria-controls, aria-live. Eh bien, j'aimerais m' arrêter ici une minute. Celui-ci est super intéressant parce que parfois nous avons un élément qui change dynamiquement. Par exemple, les numéros en stock. Si vous imaginez une telle situation quelqu'un entre sur le site Web et souhaite consulter cette conférence qui change à chaque seconde. Il est important de distinguer les informations qui se trouvent réellement dans l'élément vie. En résumé, ARIA nous offre de nombreuses possibilités et c'est un sujet plus complexe. Je voudrais que vous vous souveniez que ARIA gère des cas tels que la navigation. En outre, des conseils de formulaire, des erreurs, certains widgets , des messages, d'autres pour l'utilisateur, du contenu interactif. N'oubliez pas chaque fois que vous essayez d'implémenter quelque chose de plus complexe et de plus interactif avec l'utilisateur. 11. Projet du cours: Parlons maintenant du projet de classe. J'ai préparé une tâche pour vous savoir effectuer l'audit d'accessibilité. Dans le package de cours que vous pouvez télécharger à partir de la section appropriée de Skillshare, vous trouverez le site Web appelé 20 astuces CSS. Au fait, c'est le site Web qui est appelé par le biais de mes cours, dactylographié comme ça. Alors n'hésitez pas à y jeter un coup d'œil. J'ajoute le lien ci-dessous. N'hésitez pas à suivre ces cours si vous souhaitez découvrir d'autres techniques créatives en CSS. Mais ce que je veux dire, c'est que j'ai préparé ce site de 20 astuces CSS. Nous pouvons ouvrir ce site Web dans le navigateur. Regardez ce qui se passe ici. Il serait bon de résoudre certains problèmes d' accessibilité en ajoutant code HTML et CSS. Plus tard, vous pourrez faire les captures d'écran des éléments les plus critiques et les télécharger dans la section des projets de classe. J'apprécierais totalement votre contribution à ce sujet. Pour les trois premières personnes qui appliqueraient quelques améliorations en matière d'accessibilité, j'ai préparé quelque chose de spécial. J'attends vos réponses et, bien entendu, ce serait formidable si vous pouviez utiliser les connaissances que vous avez acquises dans le cadre de cet exercice particulier. Soumettons-nous une fois de plus. Tout d'abord, téléchargez et ouvrez le package zip que vous avez trouvé dans la section du projet. Vérifiez ensuite les problèmes dans les fichiers HTML et CSS. Cliquez sur « Créer un projet » sur le site Web de Skillshare sous mes cours, puis téléchargez des captures d'écran ou un package ou des listes de problèmes que vous avez détectés et résolus. Bonne chance 12. Résumé: Il est grand temps de faire le résumé des cours. J'ai préparé une carte mentale pour ce cours, et nous pouvons la parcourir rapidement pour réviser tout le matériel que nous avons appris. Tout d'abord, vous savez que l'accessibilité, c'est rendre les sites Web accessibles à tous. C'est un sujet très important car il touche un très grand nombre de personnes. Il ne s'agit pas uniquement de déficiences, mais aussi d'une situation temporaire dans laquelle nous avons des difficultés, par exemple, à lire un message ou à écouter une vidéo. Tu sais tout ça. Nous pouvons différencier un certain nombre de catégories de déficiences telles que les troubles de la parole, la version auditive, neurologiques, cognitifs ou physiques du mouvement. Il est bon de se rappeler également que l'accessibilité peut être mesurée et qu'elle est en fait définie de manière très stricte. Nous devons connaître toutes les règles pour répondre aux critères avec succès. La principale norme, l' organisation officielle, est le W3C, qui est responsable des WCAG, qui sont des directives pour l'accessibilité des contenus Web. Il s'agit d'une documentation dont nous devons nous souvenir. Nous savons également ce qu'est le lecteur de dépistage, qui est une technologie d'assistance. De plus, nous savons comment apprendre les lecteurs d'écran. Nous savons qu'ils sont également disponibles sur les téléphones portables, et je vous recommande vivement de les tester. Nous savons également ce qu'est le HTML sémantique et ce qui est si important. Nous savons que la déclaration DOCTYPE devrait figurer tout en haut de notre document HTML. Nous savons également que certaines balises HTML sont chargées d'ajouter de la sémantique à la structure de notre site, telles que l'en-tête, le principal, l'article, le pied de page, etc. Nous savons également que la hiérarchie des titres est très importante car elle permet à l' utilisateur de naviguer plus facilement sur le site Web. Les lecteurs d'écran peuvent également se déplacer dans le document de manière plus logique, et nous savons également que l'accessibilité et l' optimisation pour les moteurs de recherche sont liées et ne doivent pas seulement nous intéresser accessibilité, mais aussi en matière de référencement. Nous avons également abordé les attributs HTML, et nous savons qu'ils améliorent l'accessibilité. Tout d'abord, il s'agit de l'attribut Lang, mais aussi de l'attribut alt très important pour les images, nous pouvons également ajouter sur des portails, des services tels que Facebook, LinkedIn, nous devons donc en tenir compte chaque fois que l'image est déclarative, nous devons laisser alt vide. Je vous ai aussi parlé div par rapport à bottom par rapport à un lien hypertexte, donc une balise, il est important de garder à l'esprit que div est un texte très générique. Nous devons être prudents lorsque vous utilisez des boutons ou des hyperliens. Bien entendu, un CSS est un autre sujet important nous devons nous souvenir en termes d'accessibilité. Bien entendu, le contraste est la toute première chose qui nous vient à l'esprit. Mais il existe également certaines propriétés CSS telles que l'affichage, la visibilité, mais aussi des pseudo-classes, le focus ou le contour, mais aussi un pseudo contenu tel que avant et après, des pseudo-éléments. Quand on parle de vision visuelle, bien sûr, nous devons mentionner les animations, donc le mouvement, sujet en général, il existe une fonctionnalité multimédia CSS très utile qui préfère les mouvements réduits. Grâce à elle, nous pouvons offrir une expérience équilibrée aux personnes souffrant de troubles vestibulaires. Je devrais peut-être ajouter ici également que nous avons couvert les troubles vestibulaires. Bien sûr, à la toute fin, nous avons des projets de classe. Je vous recommande vivement de télécharger le package que j'ai préparé pour vous et de faire les audits d'accessibilité. Merci de partager vos résultats. Vous pouvez l'ajouter sous forme de captures d'écran des endroits où vous avez corrigé le code, vous pouvez créer des captures d'écran, par exemple, de votre document de notion ou lié à la notion. Je vais vraiment l'apprécier. Ce qui est bien, c'est que si cinq personnes soumettent leurs résultats, leurs devoirs, je partagerai avec vous tous les listes de contrôle d'accessibilité que vous pouvez utiliser dans votre travail quotidien. Ça vaut le coup de faire ses devoirs. Merci beaucoup d'avoir rejoint ces cours. J'espère que vous n'avez plus peur de l'accessibilité et que vous approfondirez ce sujet plus fréquemment. Bien sûr, rendez-vous sur les réseaux sociaux. Vous pouvez me rendre visite sur Twitter. Je peux télécharger, ou vous pouvez vous abonner à ma newsletter, ou vous pouvez me rendre visite sur Instagram. À plus tard. Au revoir.