Mettre en place un menu responsive avec les CSS

Compléter la structure

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La masse d'informations à ajouter à la structure HTML est assez importante. Il est bon de vous intéresser à cette mise en place dès le début du développement, afin de ne pas être débordé une fois le site terminé.
07:43

Transcription

Bien que cela puisse paraître bien renseigné et complet, en fait on vient juste d'effleurer la surface de l'accessibilité au niveau des menus, je ne parle même pas de l'accessibilité en général. Donc en fait avec ce que nous venons de faire là quasiment rien n'a été fait, il y a énormément d'informations à faire. En effet quand je vais prendre ce menu ici, en fait il est composé d'une sous-partie qui visuellement par les css va être masquée, rien n'indiquera à un lecteur d'écran que cette partie existe et est masquée, ou par des css ou pas accessible. De la même manière rien ne m'indique quand je vais cliquer sur ce lien que c'est ce lien qui est actif, il faudra que je puisse l'indiquer. Rien ne m'indique que de titres dans ce groupe. Ici j'ai une balise nav qui a un rôle de navigation mais je ne sais pas comment s'appelle ce menu il n'y a rien en surface qui va me l'indiquer. Il n'y a aucune information de tous les états et de toutes les propriétés qui vont affecter ce menu. Pour cela le W3C recommande dans la recommandation Aria tout un certain nombre de Propriétés et d'Etats que l'on va pouvoir venir définir. Voyez ici aria-haspopup veut dire que cet élément de menu contient un contenu, un sous-menu contient un contenu listé, une proposition de liste d'éléments complémentaires. aria-label va pouvoir définir ici le nom de cet élément, ou on pourra dire non cet élément a été labelledby, et on va pouvoir indiquer les identifiants du noeud html qui va contenir l'étiquette, le label qui identifie le composant en question. Ici on a d'autres éléments qui vont venir me dire que cet élément a été sélectionné ou que cet élément est masqué, est caché, ou que cet élément est désactivé, il est coché, il est étendu. Donc on a toute une série d'informations qui vont pouvoir venir définir chacun de ces éléments, vous voyez que la liste est longue, alors je vous invite à venir vous rapprocher de cette partie du W3C orientée vers les états et propriétés pour pouvoir creuser, aller plus loin. Ce que je vous propose dans un premier temps est de venir les renseigner ici pour mieux voir par la pratique comment on va utiliser. Alors ici je vais placer un aria-label parce que je n'ai aucun élément dans ce menu qui peut donner un titre ou une description à mon menu principal. Et donc je vais utiliser ici un aria-label pour pouvoir indiquer l'étiquette dessus. Ensuite on va pouvoir venir de la même manière renseigner chacun des éléments de premier niveau donc li ici, en disant cet élément li aria-haspopup a un contenu et donc pour cela je vais dire true. Pour complexiser un peu la chose on va casser notre menu ici, on va dire ici j'ai un élément et ici on va supprimer carrément ces éléments. Donc ici je vais pouvoir récupérer cet attribut haspopup, l'indiquer oui il y a un contenu secondaire ici, et là false il n'y a pas de contenu secondaire à cet élément-là, donc pas besoin de survoler, ici ce sera un lien direct, il n'y aura pas un lien qui va m'ouvrir un sous contenu. De la même manière on devrait renseigner si des css vont venir ici masquer ces éléments de sous-menu, il faudrait dire il y a un contenu qui est caché aria-hiden, false ou true en fonction de s'il est caché ou pas ce contenu. Tout ça je vous propose de le faire directement par du JavaScript par la suite, parce que on va pouvoir naviguer soit avec la souris, soit avec le clavier donc ça serait plus élégant de prendre en charge directement toutes ces informations par du JavaScript ou par du css en fonction de l'état masqué, affiché des éléments. On va juste regarder un dernier élément qui peut causer polémique et peut causer souci d'utilisation. Je vais enregistrer cette partie pour être sûr d'avoir la dernière version, je vais actualiser, je suis en dernière version. Ici justement sans rien programmer au niveau javascript, simplement par la navigation de l'hôte donc du navigateur ici en l'occurrence, si j'utilise la touche Tab je passe du lien 1 au sous-lien 1, au sous-lien 2, au lien2, au sous-lien 1, 2, 3 etc pour naviguer. Quand c'est terminé je ne recommence pas à zéro, je continue à naviguer comme l'hôte a été défini, donc là je vais pouvoir maintenant interagir avec l'application haute et non plus l'application que j'étais en train de développer. On pourrait très bien récupérer un très vieux site où toute une série de menus ne sont plus utilisables ou n'ont pas de grand intérêt, dont l'architecture a été mal conçue, et on va vouloir ré-agencer l'ordre de ces éléments sans pour cela re-fabriquer le site. On va utiliser ce qu'on appelle le tabindex qui, comme je le disais porte polémique, parce que soit je le prends en lien intégralement pour pouvoir gérer correctement, soit je ne le prends pas en lien et je fais attention avec son utilisation homéopathique. D'un autre côté aussi le tabindex avait été prévu pour standardiser tout un certain nombre de fonctionnalités, comme si j'appuyais sur la touche 9 par exemple je devrais avoir accès au menu, mais là-dessus les développeurs ne se sont pas entendus, les développeurs d'application n'ont pas été trop complaisants au standard, résultats des courses tout ça est un peu tombé à l'eau. Quoi qu'il en soit je vais pouvoir revenir définir ici. Si je viens dans ce lien tabindex et je vais dire que mon tabindex vienne comme étant le premier. Ce qui veut dire que dès que je vais avoir ce 1 ici, je vais commencer ma première navigation. Si je re-bascule maintenant dans mon menu, j'actualise ma page et si j'utilise la touche Tab théoriquement je devrais venir sur le 1 ici. Non, je viens sur le 2. Par contre une fois que le 2 a été terminé, si je continue je reprends le flux normal de circulation. Alors je vais pouvoir comme ça venir tout redéfinir 1 2 3 etc. mais je pourrais me dire celui-là est un lien qui n'a aucun intérêt en fait, il faudrait le sauter, donc je vais pouvoir venir ici faire un tabindex="2" Donc celui-là sera sauté par défaut. Pour être sûr de le sauter, je viens lui dire dans ce tabindex je lui mets une valeur négative -1 par exemple donc je sais que je ne vais pas le consulter, je vais directement passer du 1 au 2 et puis après de là je repartirai dans le 1. C'est pour ça que je vous disais de faire attention, c'est sujet de polémique parce que si on ne prend pas en charge intégralement le tabindex, ça va donner quelque chose d'un peu chaotique. Le 1 est sauté puisqu'il y a -1, le 2 est pris en compte également parce que c'est un 2 dans cet ordre-là, mais ici quand je reprends le flux normal maintenant : lien 1 je le prends, le lien 1 je le prends bien entendu, le 2 je ne le prends pas parce qu'il a déjà été actif, le 1 celui-ci ne sera pas pris parce qu'il est à -1, donc je vais directement sauter au 3. Là je prends le 3 le flux, et après je quitte l'application développée, je passe dans l'application haute. Donc voilà un attribut qui va nous permettre également de pouvoir gérer une partie pas de l'accessibilité mais de la possibilité de naviguer avec autre chose que la souris et donc de pouvoir contrôler cet ordre de navigation. Alors nous avons vu quelques attributs, comment on allait pouvoir les utiliser. Maintenant je vous propose de passer à une étape suivante, de commencer à porter du visuel à tout cela pour pouvoir naviguer déjà dans un premier temps avec la souris, et de voir ensuite comment on va pouvoir compléter tout ça avec du JavaScript pour améliorer l'accessibilité.

Mettre en place un menu responsive avec les CSS

Mettez en place des menus responsives au sein de vos pages web. Abordez les diverses approches possibles, que ce soit avec les plug-ins, ou en codant depuis une page blanche.

2h31 (28 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 nov. 2015

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 !