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

Comprendre les landmarks et les rôles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Bien que HTML5 soit largement pris en compte par les navigateurs, il est intéressant de couvrir des navigateurs plus anciens. Ainsi, apprenez à doubler les zones du document par des rôles.
04:16

Transcription

Avant de commencer, regardons ce qu'on appelle le role model. Le role model a été défini et mis en place par le w3c, pour pouvoir permettre de définir un certain nombre d'informations, au niveau de nos contenus. Donc ici, on va dire que le role se défini en quatre sous parties, quatre rubriques, les roles abstraits, que, en tant que web developpeurs on ne va pas utiliser, ce sont des roles qui auront été définis de manière hard, par le cosortion, pour nous permettre de mieux définir, les parties qui vont nous incomber. Donc ici dans ce qui va nous incomber, qu'est-ce qu'on a ? On a des rôles de composants. Savoir s'il s'agit d'une boîte d'alerte, une boîte de dialogue, est-ce que c'est un bouton, est-ce que c'est une case à cocher ? Voilà, toute cette série de composants d'utilisation, au niveau de l'interface vont être redéfinis. Y compris certaines parties, ici, qui seront beaucoup plus des composants composés par les premiers, par exemple une barre de menu sera composée de plusieurs éléments de menu, ici, vous voyez. Donc, en fait, ce sont des sortes de précompositions de composants de deux natures. Ensuite, on va être tout ce qui est la structure du document. Donc, dans la structure du document on pourra avoir, au niveau des articles, par exemple, des entêtes de page, des éléments de liste, etc. Et puis ici, on va avoir plus des zones dans la page, qui seront déjà donc soit si c'est une application, si c'est une banière, le fameux header, la partie complementary. Alors complementary, c'est la partie e-side. Contentinfo, ça va être la partie du footer, main c'est le maincontent, donc la partie principale, la navigation, la partie de zone de recherche, Donc vous voyer ça va être des définitions, comme ça, qui vont être très précises, pour pouvoir redéfinir le contenu de nos pages. Donc, si on part sur la structuration de bas qu'on avait vue au départ, pour mettre en place notre contenu, eh bien, en s'appuyant sur HTML5, on peut être certain que nav sera reconnu comme la navigation. Header, side, main et footer seront reconnus par ARIA, il n'est pas nécessaire de venir les redéfinir. Par contre, si nos contenus sont visualisés sur des navigateurs plus anciens, alors on a vu qu'on allait pouvoir leur faire comprendre, ce qu'était une balise nav, header, side, en rajoutant un petit signe, qui va nous permettre de triguer un peu le HTML de ce côté là, mais ça ne va pas expliquer pour autant, d'un point de vue role, quel sera le role de cette balise au sein du contenu. Et donc pour cela, il est intéressant de le doubler, et donc de dire que pour nav on a un role qui est navigation. Pour header, on a un role qui est banner. Side, main, footer, on va pouvoir redéfinir ces natures de contenus. Donc si je m'enregistre maintenant, et je teste au sein d'un navigateur, Il est vrai qu'on ne voit rien, et même si je vais dans le code au niveau de la strucutre, je verrais rien de plus à ce niveau là. Pour cela je vous propose d'aller vers une extension, alors, il en existe pas mal. Personnellement je travaille avec WAVE, après vous pouvez utiliser d'autres types d'outils. Ici, il suffit d'installer WAVE pour Chrome, ici par exemple, donc ce WAVE apparaît ici maintenant, si je clique dessus j'ai toute une série d'informations qui vont venir, me disant, écoute, là tu n'as pas d'erreurs pour l'instant, par contre tu as une petite alerte, cette alerte me dit quoi ? Elle me dit que j'ai pas de heading. Donc dans ma page il n'y a pas de H1, il n'y a pas d'architecture, au niveau hiérarchie de contenu. Donc c'est important, vous voyez, de pouvoir donner cette information là. Et par contre, je vois que j'ai cinq balises ARIA qui ont été détectées, et j'ai cinq couleurs, cinq problèmes de contraste. On reverra éventuellement, rapidement, la problématique de contraste, mais c'est quelque chose qu'on peut voir dès le départ ici. Ici, je vais utiliser une écriture de jaune sur noir, qui a énormément de contraste ici, et il suffit de remplacer, alors je vais remplacer toutes ces lignes. En donnant un contour jaune, et une couleur d'arrière plan jaune également, je rebascule ici dans le navigateur, maintenant, j'actualise ma page, je réinvoque WAVE, et on voit bien qu'on n'a plus d'erreur de contraste. Première chose, c'est de penser à avoir un contraste de couleurs, qui soit suffisamment important, entre le mode lecture de vos pages, et puis surtout, de commencer à baliser au moins les landmarks, c'est-à-dire les grandes zones de votre page, les doubler. Bien que HTML5 soit pris en compte par les lecteurs d'écran, pour des navigateurs plus anciens qui ne comprendraient pas HTML5, au moins de s'assurer de cette protabilité là.

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
Date de parution :29 juin 2016

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 !