Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Analyser les images et les autres informations non visuelles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Allez plus loin avec des éléments uniquement visuels sur la page. Grâce aux rôles, aux états et aux propriétés, vous allez pouvoir donner un sens au contenu.
05:25

Transcription

Un autre facette de la description des contenus, vont être les contenus qui seront purement visuels. Alors purement visuels, on pense de suite aux images, qui soit ne sont pas activées et pris en compte par le naviagateur, soit parce qu'on a à faire à un lecteur d'écran, et que l'image ne sera pas restituée en tant que pixel. Donc,on va aller au-delà des images, puisqu'on a vu que pour représenter les images, on pouvait avoir à faire à la balise figure qui elle, va aller encore plus loin, puisqu'elle a découvrir de l'information autour de cette image. Donc on va voir comment on va pouvoir rendre accessible le code HTML, d'un telle structure. Première chose, on va retourner du côté du role, et on va s'appercevoir que dans le composants, au niveau de la structure même de notre contenu, on a, par exemple, un contenu de présentation, qui peut être utilisé pour la balise figure. Donc si on utilise cette balise présentation, on s'apperçoit qu'on a deux petits élément ARIA qui arrivent, qui sont les labelledby et les describedby. Quest-ce que sont ces deux éléments là ? On va retourner maintenant en complément des roles, au niveau des w3c, et de cette information que l'on peut avoir sur la structure des documents, on a également accès à ce qu'on appelle des états et des propriétés. Alors, si on défile dans les détails et propriétés on va retrouver, en gros, le même type de structures que l'on peut avoir pour les roles, ici qui vont venir définir tout un certain nombre de propriétés, pour définir la position, l'état, la nature des composants. Par exemple, si je prends une case à cocher, est-ce que la case est cochée, est-ce qu'elle est décochée, est-ce qu'elle est cochable, etc. Donc tout un certain nombre d'informations, qui vont pouvoir être couverts par un grand nombre d'attributs de HTML5, mais qu'il est toujours bon de venir redéfinir ici, au sein de l'accessibilité, et nottement de toutes les balises et attributs ARIA. Alors revenons ici sur cette partie là, D'entrée de jeu, ce qu'on va faire, on va venir dire que notre figure, elle a un role qui est une présentation. Et pour cette fameuse image, la première chose à faire d'entrée de jeu, cest de venir définir un texte alternatif, à l'image, pour le prendre en compte. Et dans ce cas là, on peut venir redéfinir le titre qui est dans le figcaption, qui peut être intéressant, et donc reprendre la description du map de Suzy, pour pouvoir illustrer le propos de cette image. Mais on va aller un peu plus loin, parce qu'on peut, au niveau de la figure, se dire mais, en fait, qui donne le titre ? Alors c'est vrai que figcaption va donner le titre, parce qu'on est dans un navigateur qui comprend le HTML5. Et si on ne comprend pas le HTML5, on n'aura pas forcément la relation entre le label, ce titre qui va être donné par le figcaption. Donc je vais venir dans le figcaption, donner un identifiant ici, titre présentation, par exemple. Et dire que le ARIA-ableledby, c'est titre présentation. De la même manière, j'ai une description ici qui est vue par cet élément là. Mais là, c'est un élément de type div. Alors, même HTML5 ne sait pas que la description de cette figure, a été donnée par la balise div. Donc je vais dire que j'ai une description describedby, je vais venir donner un ID descriptif à mon div, ici, et dire que c'est lui qui fait le descriptif de cette figure. On peut continuer comme ça à venir renseigner énormément de choses, par exemple, ici, qui décrit l'image et l'ARIA-describedby ? Je vais dire que ça a été décrit par ce descriptif court. Mais c'est qui ce descriptif court ? Eh bien, je vais pouvoir venir donner un identifiant ici, à l'intérieur de ce paragraphe. Donc, je pourrais venir dire que l'image est décrite par cette phrase là, si tel est le cas, bien entendu. Ensuite, on a toujours accès à ce qu'on appelle la longdesc. Alors à ce sujet justement, au niveau de HTML5, venez regarder l'attribut longdesc, il ya quelque implémentations qui sont faites, qui sont intéressantes à regarder, parce que ça va pouvoir venir développer, plus en amont, une longue description d'un contenu donné. Donc ici, cette longue description ici, elle est faite par descriptif. Je vais pouvoir venir dire qu'elle est faite par descriptif, sauf que la longdesc, c'est une URL, donc je ne peux pas donner un identifiant comme URL. Ce que je vais faire, c'est que je vais dire que je vais mettre un #, une ancre sur descriptif, et il me faut simplement venir rajouter un attribut name ici, descriptif, de façon à ce que ça recharge la page en court, et ça ira chercher le descriptif dans cette ancre donnée, ici. Donc, nous pourrions aller encore plus loin dans la description de l'information, mais je suppose que vous avez déjà bien compris comment la mécanique fonctionne. Alors ce qu'il me reste à faire maintenant, c'est de retourner dans un navigateur, d'actualiser la page, donc, qui a été renseignée, et de regarder ce que WAVE nous indique. Et WAVE nous dit que tout est bon, à peu près, sauf qu'il y a deux erreurs, une alerte déjà importante, qui est qu'il n'y a pas de titre de niveau H1 dans la page, on a une H3 comme titre de déclaration, mais on n'a pas de H1. Et puis on a une erreur ici, et l'erreur, qu'est-ce que c'est ? Eh bien, c'est que le langage du document n'a pas été identifié. Donc il me uffit de venir dans le HTML définir une langue, et de le mettre, par exemple, à FR, CTRL S, de le faire basculer dans le navigateur, d'actualiser, de reinvoquer WAVE, et vous voyez qu'il n'y a plus d'erreur, il n'y a plus que cette balise H1, C'est normal, on n'a que la figure, on n'a pas d'architecture ni de hiérarchie, au sein du contenu lui-même. Pouvoir décrire à la mode ARIA, l'intégralité d'un contenu visuel, qui est une démarche vraiment importante à prendre en considération, dès que l'on développe du HTML.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :29 juin 2016
Durée :5h13 (63 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !