{"id":109,"date":"2026-02-09T14:52:12","date_gmt":"2026-02-09T12:52:12","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=109"},"modified":"2026-02-09T14:52:12","modified_gmt":"2026-02-09T12:52:12","slug":"chapitre-6-du-rgaa-liens-rendre-la-navigation-comprehensible-et-explicite","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-6-du-rgaa-liens-rendre-la-navigation-comprehensible-et-explicite\/","title":{"rendered":"Chapitre 6 du RGAA : Liens \u2013 rendre la navigation compr\u00e9hensible et explicite"},"content":{"rendered":"<h2><span style=\"text-decoration: underline;\">Introduction<\/span><\/h2>\n<p>Le chapitre 6 du RGAA est consacr\u00e9 aux liens, \u00e9l\u00e9ments fondamentaux de la navigation web. Ils permettent de se d\u00e9placer entre les pages, d\u2019acc\u00e9der \u00e0 des documents, de d\u00e9clencher des actions ou d\u2019ouvrir des contenus externes.<\/p>\n<p>Pour les utilisateurs de lecteurs d\u2019\u00e9cran, les liens sont souvent <strong>parcourus ind\u00e9pendamment du reste du contenu<\/strong>. Il est donc essentiel qu\u2019ils soient compr\u00e9hensibles, explicites et correctement identifi\u00e9s.<\/p>\n<p>L\u2019objectif de ce chapitre est simple : permettre \u00e0 chaque utilisateur de savoir o\u00f9 m\u00e8ne un lien, sans avoir besoin de lire tout le contexte autour.<\/p>\n<h2><span style=\"text-decoration: underline;\">Principe fondamental : un lien doit \u00eatre explicite<\/span><\/h2>\n<p>Un bon lien doit d\u00e9crire clairement sa destination ou son action.<\/p>\n<p>Exemple conforme :<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/contact\"&gt;Contacter le service client&lt;\/a&gt;\n<\/code><\/pre>\n<p>Exemple non conforme :<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/contact\"&gt;Cliquez ici&lt;\/a&gt;\n<\/code><\/pre>\n<p>Dans le second cas, si le lien est lu seul par un lecteur d\u2019\u00e9cran, l\u2019utilisateur ne sait pas \u00e0 quoi il correspond.<\/p>\n<h4>Exemple 1 : lien avec texte explicite<\/h4>\n<pre><code class=\"language-html\">&lt;a href=\"\/tarifs\"&gt;Consulter les tarifs 2024&lt;\/a&gt;\n<\/code><\/pre>\n<p>Ce type de formulation permet une compr\u00e9hension imm\u00e9diate.<\/p>\n<h4>Exemple 2 : plusieurs liens identiques sur une page<\/h4>\n<p>Si plusieurs liens ont le m\u00eame texte, ils doivent mener vers la m\u00eame destination ou \u00eatre diff\u00e9renci\u00e9s.<\/p>\n<h5>Non conforme<\/h5>\n<pre><code class=\"language-html\">&lt;a href=\"\/produit1\"&gt;En savoir plus&lt;\/a&gt;\n&lt;a href=\"\/produit2\"&gt;En savoir plus&lt;\/a&gt;\n<\/code><\/pre>\n<h5>Conforme avec pr\u00e9cision contextuelle<\/h5>\n<pre><code class=\"language-html\">&lt;a href=\"\/produit1\"&gt;En savoir plus sur le produit Alpha&lt;\/a&gt;\n&lt;a href=\"\/produit2\"&gt;En savoir plus sur le produit Beta&lt;\/a&gt;\n<\/code><\/pre>\n<p>Chaque lien devient compr\u00e9hensible ind\u00e9pendamment.<\/p>\n<h4>Exemple 3 : lien sur une image<\/h4>\n<p>Si une image est utilis\u00e9e comme lien, son alternative doit d\u00e9crire la destination.<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/accueil\"&gt;\n  &lt;img src=\"logo.png\" alt=\"Retour \u00e0 l\u2019accueil\"&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<p>L\u2019attribut <code>alt<\/code> remplace le texte du lien.<\/p>\n<h4>Exemple 4 : lien ouvrant une nouvelle fen\u00eatre<\/h4>\n<p>L\u2019ouverture d\u2019une nouvelle fen\u00eatre doit \u00eatre signal\u00e9e.<\/p>\n<pre><code class=\"language-html\">&lt;a \n  href=\"https:\/\/exemple.com\" \n  target=\"_blank\"\n  aria-label=\"Consulter le site partenaire (ouvre dans une nouvelle fen\u00eatre)\"&gt;\n  Site partenaire\n&lt;\/a&gt;\n<\/code><\/pre>\n<p><code>aria-label<\/code> permet d\u2019ajouter une information que l\u2019on ne souhaite pas forc\u00e9ment afficher visuellement.<\/p>\n<h4>Exemple 5 : lien vers un document t\u00e9l\u00e9chargeable<\/h4>\n<p>Il est important d\u2019indiquer le type de fichier et \u00e9ventuellement sa taille.<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/guide.pdf\"&gt;\n  T\u00e9l\u00e9charger le guide d\u2019accessibilit\u00e9 (PDF)\n&lt;\/a&gt;\n<\/code><\/pre>\n<p>Ou avec pr\u00e9cision suppl\u00e9mentaire :<\/p>\n<pre><code class=\"language-html\">&lt;a \n  href=\"\/guide.pdf\"\n  aria-label=\"T\u00e9l\u00e9charger le guide d\u2019accessibilit\u00e9 au format PDF, 2 m\u00e9gaoctets\"&gt;\n  Guide d\u2019accessibilit\u00e9 (PDF)\n&lt;\/a&gt;\n<\/code><\/pre>\n<h4>Exemple 6 : lien stylis\u00e9 sans balise <code>&lt;a&gt;<\/code> (\u00e0 \u00e9viter)<\/h4>\n<p>Certaines interfaces utilisent des \u00e9l\u00e9ments cliquables qui ne sont pas de vrais liens.<\/p>\n<h5>Non conforme<\/h5>\n<pre><code class=\"language-html\">&lt;span onclick=\"location.href='\/contact'\"&gt;\n  Contact\n&lt;\/span&gt;\n<\/code><\/pre>\n<p>Ce n\u2019est pas reconnu comme un lien par les technologies d\u2019assistance.<\/p>\n<h5>Correction avec ARIA (solution de secours)<\/h5>\n<pre><code class=\"language-html\">&lt;span \n  role=\"link\" \n  tabindex=\"0\"\n  onclick=\"location.href='\/contact'\"&gt;\n  Contact\n&lt;\/span&gt;\n<\/code><\/pre>\n<p>Cependant, la meilleure solution reste :<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/contact\"&gt;Contact&lt;\/a&gt;\n<\/code><\/pre>\n<p>Le HTML natif est toujours pr\u00e9f\u00e9rable.<\/p>\n<h4>Exemple 7 : lien interne pour naviguer dans la page<\/h4>\n<p>Les liens d\u2019ancrage facilitent la navigation rapide.<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"#contenu\"&gt;Aller au contenu principal&lt;\/a&gt;\n\n&lt;main id=\"contenu\"&gt;\n  ...\n&lt;\/main&gt;\n<\/code><\/pre>\n<p>Ces liens sont particuli\u00e8rement utiles pour les utilisateurs naviguant au clavier.<\/p>\n<h2><span style=\"text-decoration: underline;\">Le r\u00f4le d\u2019ARIA pour les liens<\/span><\/h2>\n<p>ARIA peut \u00eatre utile dans certains cas sp\u00e9cifiques :<\/p>\n<h4>Ajouter une pr\u00e9cision contextuelle<\/h4>\n<pre><code class=\"language-html\">&lt;a \n  href=\"\/compte\"\n  aria-describedby=\"info-compte\"&gt;\n  Mon compte\n&lt;\/a&gt;\n\n&lt;span id=\"info-compte\"&gt;\n  Acc\u00e8s s\u00e9curis\u00e9 n\u00e9cessitant une authentification\n&lt;\/span&gt;\n<\/code><\/pre>\n<h5>Nommer un lien sans texte visible<\/h5>\n<pre><code class=\"language-html\">&lt;a href=\"\/recherche\" aria-label=\"Lancer la recherche\"&gt;\n  \ud83d\udd0d\n&lt;\/a&gt;\n<\/code><\/pre>\n<p>Ici, l\u2019ic\u00f4ne seule ne suffit pas, <code>aria-label<\/code> donne un sens clair.<\/p>\n<h2><span style=\"text-decoration: underline;\">Les crit\u00e8res cl\u00e9s du RGAA pour les liens<\/span><\/h2>\n<p>Le chapitre 6 v\u00e9rifie notamment que :<\/p>\n<ul>\n<li>\n<p>Le texte du lien est explicite<\/p>\n<\/li>\n<li>\n<p>Un lien est identifiable visuellement<\/p>\n<\/li>\n<li>\n<p>La destination est compr\u00e9hensible hors contexte<\/p>\n<\/li>\n<li>\n<p>Les images-liens ont une alternative pertinente<\/p>\n<\/li>\n<li>\n<p>Les liens ont un intitul\u00e9 coh\u00e9rent avec la page cible<\/p>\n<\/li>\n<\/ul>\n<p>Ces \u00e9l\u00e9ments am\u00e9liorent fortement la navigation.<\/p>\n<h2><span style=\"text-decoration: underline;\">Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n<p>On retrouve souvent :<\/p>\n<ul>\n<li>\n<p>Des \u00ab cliquez ici \u00bb ou \u00ab lire la suite \u00bb trop g\u00e9n\u00e9riques<\/p>\n<\/li>\n<li>\n<p>Des ic\u00f4nes cliquables sans nom accessible<\/p>\n<\/li>\n<li>\n<p>Des liens identiques menant vers des pages diff\u00e9rentes<\/p>\n<\/li>\n<li>\n<p>Des faux liens cr\u00e9\u00e9s avec du JavaScript<\/p>\n<\/li>\n<li>\n<p>Des ouvertures de nouvelles fen\u00eatres non signal\u00e9es<\/p>\n<\/li>\n<\/ul>\n<p>Ces probl\u00e8mes compliquent la compr\u00e9hension globale de la navigation.<\/p>\n<h2><span style=\"text-decoration: underline;\">Impact concret pour les utilisateurs<\/span><\/h2>\n<p>Un lecteur d\u2019\u00e9cran peut afficher la liste de tous les liens d\u2019une page. Si ceux-ci sont mal nomm\u00e9s, l\u2019utilisateur entendra par exemple :<\/p>\n<ul>\n<li>\n<p>\u00ab Cliquez ici \u00bb<\/p>\n<\/li>\n<li>\n<p>\u00ab Lire la suite \u00bb<\/p>\n<\/li>\n<li>\n<p>\u00ab En savoir plus \u00bb<\/p>\n<\/li>\n<\/ul>\n<p>Sans contexte, ces informations sont inutiles.<\/p>\n<p>Avec des liens explicites, la navigation devient beaucoup plus efficace et autonome.<\/p>\n<h2><span style=\"text-decoration: underline;\">Conclusion<\/span><\/h2>\n<p>Le chapitre 6 du RGAA rappelle qu\u2019un lien n\u2019est pas seulement un \u00e9l\u00e9ment cliquable : c\u2019est un rep\u00e8re de navigation. Son intitul\u00e9 doit permettre de comprendre clairement sa destination ou sa fonction, m\u00eame isol\u00e9 du reste du contenu.<\/p>\n<p>Le HTML natif fournit d\u00e9j\u00e0 la plupart des m\u00e9canismes n\u00e9cessaires. Les attributs ARIA interviennent en compl\u00e9ment, notamment pour nommer des liens iconographiques ou apporter des pr\u00e9cisions contextuelles. Une bonne gestion des liens am\u00e9liore directement la qualit\u00e9 de navigation pour tous les utilisateurs, en particulier ceux utilisant des technologies d\u2019assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Le chapitre 6 du RGAA est consacr\u00e9 aux liens, \u00e9l\u00e9ments fondamentaux de la navigation web. Ils permettent de se [&hellip;]<\/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-109","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\/109","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=109"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}