{"id":115,"date":"2026-02-09T15:29:20","date_gmt":"2026-02-09T13:29:20","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=115"},"modified":"2026-02-09T15:29:20","modified_gmt":"2026-02-09T13:29:20","slug":"chapitre-12-du-rgaa-navigation-permettre-a-tous-de-se-reperer-et-se-deplacer-efficacement","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-12-du-rgaa-navigation-permettre-a-tous-de-se-reperer-et-se-deplacer-efficacement\/","title":{"rendered":"Chapitre 12 du RGAA : Navigation \u2013 permettre \u00e0 tous de se rep\u00e9rer et se d\u00e9placer efficacement"},"content":{"rendered":"

Introduction<\/span><\/h2>\n

Le chapitre 12 du RGAA est consacr\u00e9 \u00e0 la navigation. Il concerne tous les m\u00e9canismes qui permettent \u00e0 l\u2019utilisateur de se d\u00e9placer dans un site ou une application : menus, liens d\u2019\u00e9vitement, fil d\u2019Ariane, pagination, moteurs de recherche internes, etc.<\/p>\n

Une navigation claire et coh\u00e9rente est essentielle<\/strong> pour tous les utilisateurs, mais elle l\u2019est encore davantage pour les personnes qui utilisent un clavier, un lecteur d\u2019\u00e9cran ou qui pr\u00e9sentent des difficult\u00e9s de concentration. L\u2019objectif est de leur permettre de comprendre o\u00f9 ils se trouvent et d\u2019acc\u00e9der rapidement aux contenus importants.<\/p>\n

Les enjeux d\u2019accessibilit\u00e9 de la navigation<\/span><\/h2>\n

Une navigation accessible doit permettre de :<\/p>\n

    \n
  • \n

    Acc\u00e9der rapidement au contenu principal<\/p>\n<\/li>\n

  • \n

    Comprendre la structure du site<\/p>\n<\/li>\n

  • \n

    Se rep\u00e9rer facilement d\u2019une page \u00e0 l\u2019autre<\/p>\n<\/li>\n

  • \n

    Utiliser tous les menus au clavier<\/p>\n<\/li>\n

  • \n

    Identifier sa position dans le site<\/p>\n<\/li>\n<\/ul>\n

    Sans cela, la navigation peut devenir lente, confuse et frustrante.<\/p>\n

    Exemple 1 : lien d\u2019\u00e9vitement vers le contenu principal<\/h4>\n

    Les liens d\u2019\u00e9vitement permettent de passer directement au contenu sans parcourir tout le menu.<\/p>\n

    <a href=\"#contenu\" class=\"skip-link\">\n  Aller au contenu principal\n<\/a>\n\n<main id=\"contenu\">\n  ...\n<\/main>\n<\/code><\/pre>\n
    Ces liens sont tr\u00e8s utiles pour les utilisateurs clavier et lecteurs d\u2019\u00e9cran.<\/p>\n
    Exemple 2 : menu de navigation structur\u00e9<\/h4>\n
    <nav aria-label=\"Menu principal\">\n  <ul>\n    <li><a href=\"\/accueil\">Accueil<\/a><\/li>\n    <li><a href=\"\/services\">Services<\/a><\/li>\n    <li><a href=\"\/contact\">Contact<\/a><\/li>\n  <\/ul>\n<\/nav>\n<\/code><\/pre>\n
    L\u2019attribut aria-label<\/code> permet d\u2019identifier clairement la fonction du menu.<\/p>\n
    Exemple 3 : menu d\u00e9roulant accessible<\/h4>\n
    <button \n  aria-expanded=\"false\"\n  aria-controls=\"menu-services\">\n  Services\n<\/button>\n\n<ul id=\"menu-services\" hidden>\n  <li><a href=\"\/etat-civil\">\u00c9tat civil<\/a><\/li>\n  <li><a href=\"\/urbanisme\">Urbanisme<\/a><\/li>\n<\/ul>\n<\/code><\/pre>\n
    Le script devra mettre \u00e0 jour aria-expanded<\/code> lors de l\u2019ouverture.<\/p>\n
    Exemple 4 : fil d\u2019Ariane (breadcrumb)<\/h4>\n
    Le fil d\u2019Ariane aide \u00e0 comprendre la position dans le site.<\/p>\n
    <nav aria-label=\"Fil d\u2019Ariane\">\n  <ol>\n    <li><a href=\"\/accueil\">Accueil<\/a><\/li>\n    <li><a href=\"\/services\">Services<\/a><\/li>\n    <li aria-current=\"page\">\u00c9tat civil<\/li>\n  <\/ol>\n<\/nav>\n<\/code><\/pre>\n
    aria-current=\"page\"<\/code> indique la page active.<\/p>\n
    Exemple 5 : pagination<\/h4>\n
    <nav aria-label=\"Pagination\">\n  <ul>\n    <li><a href=\"?page=1\">1<\/a><\/li>\n    <li><a href=\"?page=2\" aria-current=\"page\">2<\/a><\/li>\n    <li><a href=\"?page=3\">3<\/a><\/li>\n  <\/ul>\n<\/nav>\n<\/code><\/pre>\n
    Cela permet de savoir quelle page est affich\u00e9e.<\/p>\n
    Exemple 6 : moteur de recherche interne<\/h4>\n
    <form role=\"search\">\n  <label for=\"recherche\">Rechercher<\/label>\n  <input type=\"search\" id=\"recherche\">\n  <button type=\"submit\">Valider<\/button>\n<\/form>\n<\/code><\/pre>\n
    Le r\u00f4le search<\/code> permet d\u2019identifier rapidement la fonction du formulaire.<\/p>\n
    Exemple 7 : zones de navigation multiples<\/h4>\n
    Un site peut comporter plusieurs menus. Il est important de les nommer.<\/p>\n
    <nav aria-label=\"Menu principal\">\n  ...\n<\/nav>\n\n<nav aria-label=\"Menu secondaire\">\n  ...\n<\/nav>\n<\/code><\/pre>\n
    Cela aide les utilisateurs \u00e0 distinguer les diff\u00e9rentes zones.<\/p>\n
    Le r\u00f4le d\u2019ARIA dans la navigation<\/span><\/h2>\n
    ARIA permet de rendre la navigation plus compr\u00e9hensible :<\/p>\n
      \n
    • \n
      aria-label<\/code> pour nommer un menu<\/p>\n<\/li>\n
    • \n
      aria-expanded<\/code> pour indiquer l\u2019\u00e9tat d\u2019un menu d\u00e9roulant<\/p>\n<\/li>\n
    • \n
      aria-controls<\/code> pour relier un bouton \u00e0 une zone<\/p>\n<\/li>\n
    • \n
      aria-current=\"page\"<\/code> pour indiquer la page active<\/p>\n<\/li>\n
    • \n
      role=\"search\"<\/code> pour identifier un moteur de recherche<\/p>\n<\/li>\n<\/ul>\n
      Ces attributs compl\u00e8tent la structure HTML.<\/p>\n
      Les crit\u00e8res cl\u00e9s du RGAA pour la navigation<\/span><\/h2>\n
      Le chapitre 12 v\u00e9rifie notamment que :<\/p>\n
        \n
      • \n
        Des liens d\u2019\u00e9vitement sont pr\u00e9sents<\/p>\n<\/li>\n
      • \n
        Les menus sont utilisables au clavier<\/p>\n<\/li>\n
      • \n
        La navigation est coh\u00e9rente sur tout le site<\/p>\n<\/li>\n
      • \n
        La position dans le site est identifiable<\/p>\n<\/li>\n
      • \n
        Les zones de navigation sont clairement nomm\u00e9es<\/p>\n<\/li>\n<\/ul>\n
        Ces \u00e9l\u00e9ments facilitent le d\u00e9placement et le rep\u00e9rage.<\/p>\n
        Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
        On retrouve souvent :<\/p>\n
          \n
        • \n
          Absence de lien vers le contenu principal<\/p>\n<\/li>\n
        • \n
          Menus d\u00e9roulants non accessibles au clavier<\/p>\n<\/li>\n
        • \n
          Position active non identifiable<\/p>\n<\/li>\n
        • \n
          Menus non nomm\u00e9s ou confus<\/p>\n<\/li>\n
        • \n
          Navigation incoh\u00e9rente d\u2019une page \u00e0 l\u2019autre<\/p>\n<\/li>\n<\/ul>\n
          Ces probl\u00e8mes rendent le parcours du site difficile.<\/p>\n
          Impact concret pour les utilisateurs<\/span><\/h2>\n
          Un utilisateur clavier peut devoir parcourir des dizaines de liens avant d\u2019atteindre le contenu principal si aucun lien d\u2019\u00e9vitement n\u2019est pr\u00e9vu.<\/p>\n
          Un lecteur d\u2019\u00e9cran peut aussi avoir du mal \u00e0 comprendre la structure du site sans zones de navigation clairement identifi\u00e9es.<\/p>\n
          Une navigation bien pens\u00e9e am\u00e9liore fortement l\u2019autonomie.<\/p>\n
          Conclusion<\/span><\/h2>\n
          Le chapitre 12 du RGAA met l\u2019accent sur l\u2019importance d\u2019une navigation claire, coh\u00e9rente et accessible. Les utilisateurs doivent pouvoir se rep\u00e9rer, comprendre o\u00f9 ils sont et acc\u00e9der rapidement aux contenus essentiels.<\/p>\n
          Le HTML fournit d\u00e9j\u00e0 des \u00e9l\u00e9ments structurants efficaces, et les attributs ARIA viennent compl\u00e9ter cette organisation en pr\u00e9cisant les r\u00f4les, les \u00e9tats et les zones de navigation. Une bonne navigation est un facteur cl\u00e9 d\u2019accessibilit\u00e9 et de confort pour tous les utilisateurs.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Introduction Le chapitre 12 du RGAA est consacr\u00e9 \u00e0 la navigation. Il concerne tous les m\u00e9canismes qui permettent \u00e0 l\u2019utilisateur […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","hentry","category-comprendre-le-rgaa"],"_links":{"self":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}