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

Parcourir les menus de navigation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Sensibilisez-vous un peu plus à l'accessibilité par l'implémentation. Penchez-vous sur le HTML, au niveau du rôle, des propriétés et des états concernant la mise en place d'un menu de navigation.
06:22

Transcription

Sans pour autant aller sur l' implémentation complète d'un menu de navigation de manière accessible. Simplement être un peu sensible sur la partie html, qui nous incombe sue la prise en compte des divers attributs, états, propriétés ou rôles qu'ôn peut avoir sur un tel menu. Bien entendu, une grosse partie pourrait et devrait être gérée soit par les css d'une part et d'autre part, par le javascript qui va venir récupérer une intéraction utilisateur. Donc, dès qu'on a une navigation ici avec une balise nav, une première imbrication de menu u li, ul vous voyez, pour avoir des sous menu, ici. Si on enregistre et qu'on bascule dans un navigateur, on se retrouve avec une barre de menu mais qui ne laisse pas apparaître les sous menus disponibles. Donc, on va voir que déjà rien qu'avec le html, on va pouvoir un peu modifier cet état d'intéraction alors, revenons sur la partie du code ici, la première chose à faire c'est d'entrée de jeu, placer un rôle autour de cette balise de nav, comme étant un rôle de navigation. Ensuite, nous allons pouvoir donner un label pour avoir un titre sur ce menu, navigation générale. Alors, on peut passer soit par le aria-label, soit on peut faire un aria-labelledby. Créer un autre élément puisqu'à l'intérieur de nav, c'est du flow content. On peut placer un h3 avec un Id, ici. Dans ce h3, on peut placer un texte émergé, navigation générale. Et pointer maintenant dans le labelledby l'Id, l'identifiant de ce noeud qui va être récupéré comme étant une présentation. Donc maintenant, au niveau de la première liste unordonnée qui est la première liste globale des menus, en fait. On a 4 menus. Menu 1, menu 2, menu 3 et menu 4. On va l'identifier comme étant un rôle menubarre puisque ce sera elle qui fera office de barre de navigation. Et puis il va falloir passer un attribut aria-activedescendant qui va être piloté par le javascript pour indiquer qui sera maintenant le menu actif dans les sous menus puisque ça permettra d'avoir un élément qui ne sera pas atteignable par le hmtl mais qui pourra refléter, en gros, la partie active des sous menus. Ensuite, on va devoir définir menu par menu les rôles de chacun des éléments donc ici, les éléments li, le premier niveau est un élément item. Le deuxième li devient un menu item également. Par contre maintenant, on a un ul imbriqué qui lui va être un menu. Parce que c'est un élément de sous menu, c'est un menu. Et donc, tous ces enfants, c'est un menu item. ensuite, on a un autre li, ici au niveau trois qui va devenir un menu item. Le ul devient un menu. Les li, menu item, etc... Jusqu'à terminer notre barre. Nous allons devoir pour chacun des menus, indiquer le label. Donc ici, le aria-labelledby, c'est le menu deux, le menu trois et le menu quatre. Et puis en partant d'en bas, ici, on va dire que ce menu 4 justement, qu'est ce qu'il a ? Il a un menu déroulant qui est un popup. Donc haspopup, oui. Il y a un aria-haspopup. Par contre, le haspopup va exister pour chacun et masquer. Donc, on va dire, est-ce qu'il est étendu, est ce qu'il est expended, false, false, false. Donc, il va falloir prévoir un javascript qui va venir alterner cette propriété là pour dire trou quand le menu ser défilé, vous voyez. donc, chaque propriété qui sera définie par du html au départ, si c'est un état qui peut être basculé, il faudra pouvoir venir le faire refléter par le javascript. Enfin, au niveau des tabindex, nous allons indiquer un tabindex 0 pour chacun des menus. Donc, laisser l'ordre s'établir. Voilà, donc le 1, le 2, le 3. Et puis, on va placer à -1, tous les sous menus pour leur demander de ne pas être pris en compte par la touche tabulation parce que sinon, ça voudrait dire que l'utilisateur va devoir égrainer au fur et à mesure par tabulation. S'il veut aller dans le dernier menu, ça va être un peu compliqué. Donc là, il vaut mieux relayer un javcascript et utiliser les flêches du clavier. Alors là, c'est là où on va commencer à décrocher la mise en place parce qu'on va rentrer dans du javascript ce qui sortirait en gros du html qu'on a un peu préparé pour l'instant afin de l'orienter vers une accessibilité plus forte. Mais ici, rapidement brossé, on pourrait dire qu'on pourrait créer un tableau. Alors, c'est à vous de voir, vous n'êtes pas obligé de créer le tableau mais ça peut avoir son intérêt au moins pour le débuggage. C'est de dire qu'on va créer que la touche 9 c'est la touche tabulation. La 13, c'est la touche entrée. Et ça, ce sont tous les codes de touche qui existent sur le clavier. La barre d'espace, la flèche de gauche, la flèche de haut, la flèche droite, la flèche bas. Et maintenant, on va pouvoir placer un écouteur sur le document, en disant, tu vas écouter à chaque fois qu'on presse une touche du clavier Tu vas invoquer par exemple la fonction swappe. Et dans cette fonction swappe, on va simplement arrêter la propagation de l'évènement pour être sûr de l'intercepter et de le monopoliser. Et surtout arrêter toute éventuelle valeur par défaut qu'on pourrait avoir en lien ou une ancre qui serait déterminée. Et si là vous mettez une touche de vérification pour savoir quelle est la touche si elle n'est pas indéfinie, si elle se trouve bien dans ce tableau ici. À ce moment là, on peut l'afficher. Donc au lieu de l'afficher, c'est à ce niveau là que vous intercepterez la touche et vous ferez réagir le menu ou les sous menus en fonction. Donc si on passe dans un navigateur ici, qu'on actualise, les css sont pris en compte parce que forcément, les mots clés ont été crépités. Si je joue maintenant avec les touches tabulatuion ici, on voit bien que tout est pris en compte. Et si vous jouez avec les touches du clavier, Bien entendu, tout se reflète. Alors, juste pour pouvoir faire fonctionner maintenant de manière naturelle, je vais demander à ne pas écouter cette partie là. Ctrl S. J'actualise ici dans le navigateur. Et ici, les touches de tabulation vont pouvoir activer les menus, les sous menus tout naturellement. Voilà. Et ici bien entendu, il faudrait implément la fonction pour pouvoir prendre en compte la navigation verticale dans chacun des sous menus par les touches du clavier. Donc vous voyez qu'il y a un travail de préparation qui est quand même un peu plus important que de simplement tagger du html pour pouvoir définir des listes imbriquées. Ici, ça va demander d'aller préparer toute une série d'états et de propriétés et de rôles aria afin de pouvoir rendre notre menu le plus accessible, le plus lisible possible par des lecteurs d'écran. Et bien entendu, il faut compléter toutes les fonctionnalités par du javascript afin de permettre une navigation qui soit la plus érgonomique, la plus souple possible pours les utilisateurs qui vont d'un part, naviguer au clavier et d'autre part, avec l'aide d'un lecteur d'écran.

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)
Clair et précis ! On bosse bien les bases!
Aurélien Vauchamp
Les bases du html 5 sont décrites et expliquées avec beaucoup de clarté et de professionnalisme par Mr Birnou Sebarte! C'est la deuxième formation (après celle du CSS3) que je suis avec ce professeur, et la qualité est au rendez vous!

Merci et a bientôt pour la suite !
 
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 !