Structure basique<\/h2>\n\n\n\n![\"\"](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2024\/08\/menu-basique-1.jpg\")
<\/figure>\n\n\n\nPour permettre aux personnes utilisant des technologies d’assistance (tel qu’un lecteur d’\u00e9cran), d’acc\u00e9der rapidement au menu en ciblant les zones de \u00ab\u00a0navigation\u00a0\u00bb<\/a><\/strong>, le menu principal doit \u00eatre encapsul\u00e9 dans une balise :<\/p>\n\n\n\n<nav role=\"navigation\" aria-label=\"Menu principal\"><\/code><\/pre>\n\n\n\nEnsuite, un menu comporte g\u00e9n\u00e9ralement plusieurs liens.
Nous allons structurer ces liens sous forme de liste <\/strong>avec les balises <ul> et <li><\/code>.<\/p>\n\n\n\nPour aider les technologies d’assistance \u00e0 identifier la page actuellement s\u00e9lectionn\u00e9e, utilisez l’attribut aria-current=\"page\"<\/a><\/code>. Cet attribut doit \u00eatre ajout\u00e9 de mani\u00e8re dynamique uniquement au lien correspondant \u00e0 la page courante.<\/p>\n\n\n\nPour obtenir, par exemple, si la page \u00ab\u00a0Accueil\u00a0\u00bb est actuellement en cours de consultation :<\/p>\n\n\n\n
<nav role=\"navigation\" aria-label=\"Menu principal\">\n <ul>\n <li><a href=\"...\" aria-current=\"page\">Accueil<\/a><\/li>\n <li><a href=\"...\">Services<\/a><\/li>\n <li><a href=\"...\">Contact<\/a><\/li>\n <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\nStructure classique<\/h2>\n\n\n\n![\"\"](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2024\/08\/menu-classique-2.jpg\")
<\/figure>\n\n\n\nCertains \u00e9l\u00e9ments de menu peuvent n\u00e9cessiter un sous-menu.<\/strong><\/p>\n\n\n\nDans ce cas, il faut utiliser une balise <button type=\"button\"><\/code> pour d\u00e9clencher l’action<\/strong> d’ouverture\/fermeture du sous-menu.<\/p>\n\n\n\nPour indiquer l’\u00e9tat d’ouverture\/fermeture du sous-menu aux lecteurs d’\u00e9cran, il est essentiel d’utiliser l’attribut aria-expanded<\/a><\/code> et de rendre cet attribut dynamique :<\/p>\n\n\n\n\naria-expanded=\"false\"<\/code> lorsque le sous-menu est masqu\u00e9.<\/li>\n\n\n\naria-expanded=\"true\"<\/code> lorsqu’il est affich\u00e9.<\/li>\n<\/ul>\n\n\n\nInt\u00e9grez la liste de liens du sous-menu \u00e0 l’int\u00e9rieur du <li><\/code> contenant le bouton d’ouverture\/fermeture pour cr\u00e9er une liste imbriqu\u00e9e<\/a><\/strong>.<\/p>\n\n\n\nPour masquer visuellement le sous-menu<\/strong>, vous pouvez utiliser une d\u00e9claration CSS qui emp\u00eache la restitution aux technologies d’assistance, comme display:none<\/a><\/code> ou visibility:hidden<\/code>.<\/a><\/p>\n\n\n\nIl est recommand\u00e9 d’ajouter un attribut id<\/code> unique \u00e0 votre sous-menu, puis d’ajouter un attribut aria-controls<\/a><\/code> au bouton qui d\u00e9clenche son ouverture\/fermeture.
Renseignez ensuite l’attribut aria-controls<\/code> avec la valeur de l’attribut id<\/code> du sous-menu.<\/p>\n\n\n\nPour obtenir, par exemple, lorsque le sous-menu est repli\u00e9 :<\/p>\n\n\n\n
<nav role=\"navigation\" aria-label=\"Menu principal\">\n <ul>\n <li><a href=\"...\" aria-current=\"page\">Accueil<\/a><\/li>\n <li>\n <button type=\"button\" aria-expanded=\"false\" aria-controls=\"submenu\">Services<\/button>\n <ul id=\"submenu\" style=\"display: none;\">\n <li><a href=\"...\">Service 1<\/a><\/li>\n <li><a href=\"...\">Service 2<\/a><\/li>\n <li><a href=\"...\">Service 3<\/a><\/li>\n <\/ul>\n <\/li>\n <li><a href=\"...\">Contact<\/a><\/li>\n <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\nStructure complexe<\/h2>\n\n\n\n![\"\"](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2024\/08\/menu-complexe-1.jpg\")
<\/figure>\n\n\n\nUne erreur fr\u00e9quente<\/strong> se produit avec les menus o\u00f9 l’\u00e9l\u00e9ment qui ouvre ou ferme un sous-menu est \u00e9galement un lien <\/strong>vers une autre page du site.<\/p>\n\n\n\nDans ces cas, lorsqu’un personne survole l’\u00e9l\u00e9ment avec la souris, le sous-menu peut s’ouvrir. Cependant, lorsque la navigation se fait au clavier ou avec une technologie d’assistance, le lien redirige imm\u00e9diatement vers une nouvelle page.<\/p>\n\n\n\n
Cette impl\u00e9mentation emp\u00eache les technologies d’assistance d’acc\u00e9der au sous-menu<\/strong>, car elles sont automatiquement dirig\u00e9es vers l’URL sp\u00e9cifi\u00e9e dans le lien avant de pouvoir interagir avec le sous-menu.<\/p>\n\n\n\n\n\n\nIl est important de se rappeler de la fonction principale des balises HTML :<\/strong><\/p>\n\n\n\n\n- La balise
<a href=\"\"><\/a><\/code> est utilis\u00e9e pour cr\u00e9er un lien qui redirige vers une page interne, externe, ou une ancre.<\/li>\n\n\n\n- La balise
<button><\/a><\/code> sert \u00e0 d\u00e9clencher une action sur la page en cours.<\/li>\n<\/ul>\n\n\n\nIl est essentiel d’utiliser des balises distinctes pour ces deux fonctionnalit\u00e9s. Pour en savoir plus \u00e0 ce sujet, je vous invite \u00e0 lire : Dissocier la forme de la s\u00e9mantique : lien vs. bouton<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\nPar exemple, une solution corrective serait la suivante :<\/p>\n\n\n\n
Utilisez une balise <a href=\"...\"><\/code> pour structurer le lien<\/strong>.<\/p>\n\n\n\nJuste apr\u00e8s ce lien, ajoutez une balise <button type=\"button\"><\/code> pour d\u00e9clencher l’action<\/strong> d’ouverture\/fermeture du sous-menu. Cette balise peut par exemple contenir une ic\u00f4ne de type \u00ab\u00a0chevron\u00a0\u00bb qui indique visuellement l’existence d’un sous-menu.<\/p>\n\n\n\n
<\/figure>\n\n\n\nPour permettre aux personnes utilisant des technologies d’assistance (tel qu’un lecteur d’\u00e9cran), d’acc\u00e9der rapidement au menu en ciblant les zones de \u00ab\u00a0navigation\u00a0\u00bb<\/a><\/strong>, le menu principal doit \u00eatre encapsul\u00e9 dans une balise :<\/p>\n\n\n\n Ensuite, un menu comporte g\u00e9n\u00e9ralement plusieurs liens. Pour aider les technologies d’assistance \u00e0 identifier la page actuellement s\u00e9lectionn\u00e9e, utilisez l’attribut Pour obtenir, par exemple, si la page \u00ab\u00a0Accueil\u00a0\u00bb est actuellement en cours de consultation :<\/p>\n\n\n\n Certains \u00e9l\u00e9ments de menu peuvent n\u00e9cessiter un sous-menu.<\/strong><\/p>\n\n\n\n Dans ce cas, il faut utiliser une balise Pour indiquer l’\u00e9tat d’ouverture\/fermeture du sous-menu aux lecteurs d’\u00e9cran, il est essentiel d’utiliser l’attribut Int\u00e9grez la liste de liens du sous-menu \u00e0 l’int\u00e9rieur du Pour masquer visuellement le sous-menu<\/strong>, vous pouvez utiliser une d\u00e9claration CSS qui emp\u00eache la restitution aux technologies d’assistance, comme Il est recommand\u00e9 d’ajouter un attribut Pour obtenir, par exemple, lorsque le sous-menu est repli\u00e9 :<\/p>\n\n\n\n Une erreur fr\u00e9quente<\/strong> se produit avec les menus o\u00f9 l’\u00e9l\u00e9ment qui ouvre ou ferme un sous-menu est \u00e9galement un lien <\/strong>vers une autre page du site.<\/p>\n\n\n\n Dans ces cas, lorsqu’un personne survole l’\u00e9l\u00e9ment avec la souris, le sous-menu peut s’ouvrir. Cependant, lorsque la navigation se fait au clavier ou avec une technologie d’assistance, le lien redirige imm\u00e9diatement vers une nouvelle page.<\/p>\n\n\n\n Cette impl\u00e9mentation emp\u00eache les technologies d’assistance d’acc\u00e9der au sous-menu<\/strong>, car elles sont automatiquement dirig\u00e9es vers l’URL sp\u00e9cifi\u00e9e dans le lien avant de pouvoir interagir avec le sous-menu.<\/p>\n\n\n\n Il est important de se rappeler de la fonction principale des balises HTML :<\/strong><\/p>\n\n\n\n Il est essentiel d’utiliser des balises distinctes pour ces deux fonctionnalit\u00e9s. Pour en savoir plus \u00e0 ce sujet, je vous invite \u00e0 lire : Dissocier la forme de la s\u00e9mantique : lien vs. bouton<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n Par exemple, une solution corrective serait la suivante :<\/p>\n\n\n\n Utilisez une balise Juste apr\u00e8s ce lien, ajoutez une balise <nav role=\"navigation\" aria-label=\"Menu principal\"><\/code><\/pre>\n\n\n\n
Nous allons structurer ces liens sous forme de liste <\/strong>avec les balises <ul> et <li><\/code>.<\/p>\n\n\n\naria-current=\"page\"<\/a><\/code>. Cet attribut doit \u00eatre ajout\u00e9 de mani\u00e8re dynamique uniquement au lien correspondant \u00e0 la page courante.<\/p>\n\n\n\n<nav role=\"navigation\" aria-label=\"Menu principal\">\n <ul>\n <li><a href=\"...\" aria-current=\"page\">Accueil<\/a><\/li>\n <li><a href=\"...\">Services<\/a><\/li>\n <li><a href=\"...\">Contact<\/a><\/li>\n <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\nStructure classique<\/h2>\n\n\n\n
<\/figure>\n\n\n\n<button type=\"button\"><\/code> pour d\u00e9clencher l’action<\/strong> d’ouverture\/fermeture du sous-menu.<\/p>\n\n\n\naria-expanded<\/a><\/code> et de rendre cet attribut dynamique :<\/p>\n\n\n\n\n
aria-expanded=\"false\"<\/code> lorsque le sous-menu est masqu\u00e9.<\/li>\n\n\n\naria-expanded=\"true\"<\/code> lorsqu’il est affich\u00e9.<\/li>\n<\/ul>\n\n\n\n<li><\/code> contenant le bouton d’ouverture\/fermeture pour cr\u00e9er une liste imbriqu\u00e9e<\/a><\/strong>.<\/p>\n\n\n\ndisplay:none<\/a><\/code> ou visibility:hidden<\/code>.<\/a><\/p>\n\n\n\nid<\/code> unique \u00e0 votre sous-menu, puis d’ajouter un attribut aria-controls<\/a><\/code> au bouton qui d\u00e9clenche son ouverture\/fermeture.
Renseignez ensuite l’attribut aria-controls<\/code> avec la valeur de l’attribut id<\/code> du sous-menu.<\/p>\n\n\n\n<nav role=\"navigation\" aria-label=\"Menu principal\">\n <ul>\n <li><a href=\"...\" aria-current=\"page\">Accueil<\/a><\/li>\n <li>\n <button type=\"button\" aria-expanded=\"false\" aria-controls=\"submenu\">Services<\/button>\n <ul id=\"submenu\" style=\"display: none;\">\n <li><a href=\"...\">Service 1<\/a><\/li>\n <li><a href=\"...\">Service 2<\/a><\/li>\n <li><a href=\"...\">Service 3<\/a><\/li>\n <\/ul>\n <\/li>\n <li><a href=\"...\">Contact<\/a><\/li>\n <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\nStructure complexe<\/h2>\n\n\n\n
<\/figure>\n\n\n\n\n
<a href=\"\"><\/a><\/code> est utilis\u00e9e pour cr\u00e9er un lien qui redirige vers une page interne, externe, ou une ancre.<\/li>\n\n\n\n<button><\/a><\/code> sert \u00e0 d\u00e9clencher une action sur la page en cours.<\/li>\n<\/ul>\n\n\n\n<a href=\"...\"><\/code> pour structurer le lien<\/strong>.<\/p>\n\n\n\n<button type=\"button\"><\/code> pour d\u00e9clencher l’action<\/strong> d’ouverture\/fermeture du sous-menu. Cette balise peut par exemple contenir une ic\u00f4ne de type \u00ab\u00a0chevron\u00a0\u00bb qui indique visuellement l’existence d’un sous-menu.<\/p>\n\n\n\n
![\"\"](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2024\/08\/keyboards.jpg\")
<\/figure>\n\n\n\n