{"id":116,"date":"2026-02-09T15:32:35","date_gmt":"2026-02-09T13:32:35","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=116"},"modified":"2026-02-09T15:32:35","modified_gmt":"2026-02-09T13:32:35","slug":"chapitre-13-du-rgaa-consultation-garantir-un-acces-universel-aux-contenus-et-aux-fonctionnalites","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-13-du-rgaa-consultation-garantir-un-acces-universel-aux-contenus-et-aux-fonctionnalites\/","title":{"rendered":"Chapitre 13 du RGAA : Consultation \u2013 garantir un acc\u00e8s universel aux contenus et aux fonctionnalit\u00e9s"},"content":{"rendered":"<h2><span style=\"text-decoration: underline;\">Introduction<\/span><\/h2>\n<p>Le chapitre 13 du RGAA, consacr\u00e9 \u00e0 la consultation, aborde les conditions globales d\u2019acc\u00e8s aux contenus num\u00e9riques. Il ne concerne pas un type d\u2019\u00e9l\u00e9ment pr\u00e9cis comme les images ou les formulaires, mais l\u2019<strong>exp\u00e9rience d\u2019utilisation dans son ensemble<\/strong> : compatibilit\u00e9 avec les technologies d\u2019assistance, adaptation aux environnements de consultation, gestion du clavier, du focus et des param\u00e8tres utilisateurs.<\/p>\n<p>Ce chapitre s\u2019int\u00e9resse donc \u00e0 la <strong>capacit\u00e9 d\u2019un service num\u00e9rique \u00e0 \u00eatre consult\u00e9 par tous, quels que soient les outils utilis\u00e9s<\/strong> : lecteur d\u2019\u00e9cran, navigation clavier, zoom, personnalisation de l\u2019affichage ou environnement technique sp\u00e9cifique.<\/p>\n<h2><span style=\"text-decoration: underline;\">Les enjeux de la consultation accessible<\/span><\/h2>\n<p>Un site peut \u00eatre techniquement conforme sur de nombreux points, mais rester difficile \u00e0 utiliser si l\u2019exp\u00e9rience globale pose probl\u00e8me.<\/p>\n<p>Le chapitre 13 vise notamment \u00e0 garantir que :<\/p>\n<ul>\n<li>\n<p>Le contenu reste accessible au clavier<\/p>\n<\/li>\n<li>\n<p>Le focus est visible et correctement g\u00e9r\u00e9<\/p>\n<\/li>\n<li>\n<p>Les technologies d\u2019assistance peuvent interagir avec l\u2019interface<\/p>\n<\/li>\n<li>\n<p>Les contenus ne provoquent pas de g\u00eane ou de blocage<\/p>\n<\/li>\n<li>\n<p>L\u2019utilisateur garde le contr\u00f4le de la consultation<\/p>\n<\/li>\n<\/ul>\n<p>Il s\u2019agit d\u2019un chapitre transversal, qui touche \u00e0 l\u2019usage r\u00e9el du site.<\/p>\n<h4>Exemple 1 : navigation compl\u00e8te au clavier<\/h4>\n<p>Tous les \u00e9l\u00e9ments interactifs doivent \u00eatre accessibles avec la touche Tab.<\/p>\n<h5>Bon exemple avec un bouton natif<\/h5>\n<pre><code class=\"language-html\">&lt;button&gt;Valider&lt;\/button&gt;\n<\/code><\/pre>\n<p>Ce bouton est automatiquement accessible au clavier.<\/p>\n<h5>Cas d\u2019un \u00e9l\u00e9ment personnalis\u00e9<\/h5>\n<pre><code class=\"language-html\">&lt;div \n  role=\"button\"\n  tabindex=\"0\"\n  onkeydown=\"if(event.key==='Enter'){valider();}\"&gt;\n  Valider\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Ici :<\/p>\n<ul>\n<li>\n<p><code>tabindex=\"0\"<\/code> permet d\u2019atteindre l\u2019\u00e9l\u00e9ment au clavier<\/p>\n<\/li>\n<li>\n<p><code>role=\"button\"<\/code> indique sa fonction<\/p>\n<\/li>\n<li>\n<p>Le script permet de l\u2019activer avec Entr\u00e9e<\/p>\n<\/li>\n<\/ul>\n<p>Mais la meilleure solution reste toujours d\u2019utiliser <code>&lt;button&gt;<\/code>.<\/p>\n<h4>Exemple 2 : visibilit\u00e9 du focus<\/h4>\n<p>Le focus clavier doit \u00eatre clairement visible.<\/p>\n<pre><code class=\"language-css\">button:focus {\n  outline: 3px solid black;\n}\n<\/code><\/pre>\n<p>Sans indicateur visuel, un utilisateur clavier ne sait pas o\u00f9 il se trouve.<\/p>\n<h4>Exemple 3 : gestion du focus apr\u00e8s une action<\/h4>\n<p>Quand un contenu s\u2019ouvre (ex : modale), le focus doit \u00eatre d\u00e9plac\u00e9 vers cette zone.<\/p>\n<pre><code class=\"language-html\">&lt;div \n  role=\"dialog\"\n  aria-labelledby=\"titre-modal\"\n  tabindex=\"-1\"\n  id=\"modal\"&gt;\n  \n  &lt;h2 id=\"titre-modal\"&gt;Confirmation&lt;\/h2&gt;\n  &lt;p&gt;Votre action a \u00e9t\u00e9 enregistr\u00e9e.&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Puis, en script :<\/p>\n<pre><code class=\"language-javascript\">document.getElementById('modal').focus();\n<\/code><\/pre>\n<p>Cela permet au lecteur d\u2019\u00e9cran de lire directement le contenu.<\/p>\n<h4>Exemple 4 : \u00e9viter les pi\u00e8ges clavier<\/h4>\n<p>Un utilisateur doit pouvoir entrer et sortir facilement d\u2019un composant.<\/p>\n<p>Dans une modale, il faut s\u2019assurer que :<\/p>\n<ul>\n<li>\n<p>Le focus reste dans la fen\u00eatre tant qu\u2019elle est ouverte<\/p>\n<\/li>\n<li>\n<p>Il revient \u00e0 l\u2019\u00e9l\u00e9ment d\u2019origine \u00e0 la fermeture<\/p>\n<\/li>\n<\/ul>\n<p>ARIA peut compl\u00e9ter l\u2019information :<\/p>\n<pre><code class=\"language-html\">&lt;div role=\"dialog\" aria-modal=\"true\"&gt;\n<\/code><\/pre>\n<h4>Exemple 5 : contr\u00f4le des contenus en mouvement<\/h4>\n<p>Les animations ou d\u00e9filements automatiques doivent pouvoir \u00eatre arr\u00eat\u00e9s.<\/p>\n<pre><code class=\"language-html\">&lt;button aria-controls=\"carrousel\" aria-label=\"Mettre en pause le carrousel\"&gt;\n  Pause\n&lt;\/button&gt;\n<\/code><\/pre>\n<p>Cela permet \u00e0 l\u2019utilisateur de reprendre le contr\u00f4le.<\/p>\n<h4>Exemple 6 : compatibilit\u00e9 avec les technologies d\u2019assistance<\/h4>\n<p>Un contenu dynamique important doit \u00eatre annonc\u00e9.<\/p>\n<pre><code class=\"language-html\">&lt;div aria-live=\"polite\"&gt;\n  Nouveau message re\u00e7u\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Le lecteur d\u2019\u00e9cran signalera l\u2019information sans recharger la page.<\/p>\n<h4>Exemple 7 : \u00e9viter les contenus bloquants<\/h4>\n<p>Certains \u00e9l\u00e9ments peuvent g\u00eaner la consultation :<\/p>\n<ul>\n<li>\n<p>Sons automatiques<\/p>\n<\/li>\n<li>\n<p>Pop-ups inattendus<\/p>\n<\/li>\n<li>\n<p>Changements de contexte sans action utilisateur<\/p>\n<\/li>\n<\/ul>\n<p>ARIA peut aider \u00e0 mieux contr\u00f4ler ces comportements :<\/p>\n<pre><code class=\"language-html\">&lt;div aria-hidden=\"true\"&gt;\n  Animation d\u00e9corative\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Cela emp\u00eache une lecture inutile par un lecteur d\u2019\u00e9cran.<\/p>\n<h2><span style=\"text-decoration: underline;\">Le r\u00f4le d\u2019ARIA dans la consultation<\/span><\/h2>\n<p>ARIA joue un r\u00f4le important pour rendre l\u2019interface compr\u00e9hensible et utilisable :<\/p>\n<ul>\n<li>\n<p><code>role=\"dialog\"<\/code> pour signaler une fen\u00eatre active<\/p>\n<\/li>\n<li>\n<p><code>aria-modal=\"true\"<\/code> pour indiquer un contexte bloquant<\/p>\n<\/li>\n<li>\n<p><code>aria-live<\/code> pour annoncer des changements<\/p>\n<\/li>\n<li>\n<p><code>tabindex=\"0\"<\/code> pour rendre un \u00e9l\u00e9ment atteignable<\/p>\n<\/li>\n<li>\n<p><code>aria-hidden=\"true\"<\/code> pour masquer des \u00e9l\u00e9ments non utiles<\/p>\n<\/li>\n<\/ul>\n<p>Ces attributs am\u00e9liorent l\u2019interaction globale.<\/p>\n<h2><span style=\"text-decoration: underline;\">Les crit\u00e8res cl\u00e9s du RGAA pour la consultation<\/span><\/h2>\n<p>Le chapitre 13 v\u00e9rifie notamment que :<\/p>\n<ul>\n<li>\n<p>Tous les contenus sont accessibles au clavier<\/p>\n<\/li>\n<li>\n<p>Le focus est visible et logique<\/p>\n<\/li>\n<li>\n<p>Les actions ne d\u00e9clenchent pas de changements inattendus<\/p>\n<\/li>\n<li>\n<p>Les animations sont contr\u00f4lables<\/p>\n<\/li>\n<li>\n<p>Les technologies d\u2019assistance peuvent lire les contenus<\/p>\n<\/li>\n<\/ul>\n<p>Ce sont des \u00e9l\u00e9ments essentiels pour une consultation confortable.<\/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 composants impossibles \u00e0 atteindre au clavier<\/p>\n<\/li>\n<li>\n<p>Des focus invisibles<\/p>\n<\/li>\n<li>\n<p>Des modales mal g\u00e9r\u00e9es<\/p>\n<\/li>\n<li>\n<p>Des contenus qui changent sans pr\u00e9venir<\/p>\n<\/li>\n<li>\n<p>Des animations impossibles \u00e0 arr\u00eater<\/p>\n<\/li>\n<\/ul>\n<p>Ces situations peuvent rendre un site inutilisable pour certains utilisateurs.<\/p>\n<h2><span style=\"text-decoration: underline;\">Impact concret pour les utilisateurs<\/span><\/h2>\n<p>Une personne naviguant uniquement au clavier doit pouvoir :<\/p>\n<ul>\n<li>\n<p>Atteindre tous les \u00e9l\u00e9ments<\/p>\n<\/li>\n<li>\n<p>Comprendre o\u00f9 elle se trouve<\/p>\n<\/li>\n<li>\n<p>Contr\u00f4ler les interactions<\/p>\n<\/li>\n<\/ul>\n<p>Un utilisateur de lecteur d\u2019\u00e9cran doit \u00eatre inform\u00e9 des changements importants sans confusion.<\/p>\n<p>Une bonne gestion de la consultation am\u00e9liore la fluidit\u00e9 et le confort d\u2019utilisation.<\/p>\n<h2><span style=\"text-decoration: underline;\">Conclusion<\/span><\/h2>\n<p>Le chapitre 13 du RGAA adopte une vision globale de l\u2019accessibilit\u00e9 en s\u2019int\u00e9ressant \u00e0 l\u2019exp\u00e9rience r\u00e9elle de consultation. Il garantit que les contenus restent accessibles dans diff\u00e9rents contextes d\u2019usage, avec diff\u00e9rents outils et modes de navigation.<\/p>\n<p>Le HTML constitue la base, et les attributs ARIA viennent renforcer la gestion du focus, des interactions et des changements dynamiques. Ensemble, ils permettent de cr\u00e9er des interfaces r\u00e9ellement utilisables, stables et confortables pour tous les utilisateurs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Le chapitre 13 du RGAA, consacr\u00e9 \u00e0 la consultation, aborde les conditions globales d\u2019acc\u00e8s aux contenus num\u00e9riques. Il ne [&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-116","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\/116","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=116"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}