{"id":110,"date":"2026-02-09T15:00:04","date_gmt":"2026-02-09T13:00:04","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=110"},"modified":"2026-02-09T15:00:04","modified_gmt":"2026-02-09T13:00:04","slug":"chapitre-7-du-rgaa-scripts-rendre-les-interfaces-dynamiques-accessibles","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-7-du-rgaa-scripts-rendre-les-interfaces-dynamiques-accessibles\/","title":{"rendered":"Chapitre 7 du RGAA : Scripts \u2013 rendre les interfaces dynamiques accessibles"},"content":{"rendered":"<h2><span style=\"text-decoration: underline;\">Introduction<\/span><\/h2>\n<p>Le chapitre 7 du RGAA traite des scripts, c\u2019est-\u00e0-dire de tous les contenus et fonctionnalit\u00e9s g\u00e9n\u00e9r\u00e9s ou modifi\u00e9s par JavaScript. Aujourd\u2019hui, une grande partie des interfaces web modernes repose sur des composants dynamiques : menus d\u00e9roulants, modales, carrousels, accord\u00e9ons, onglets, formulaires interactifs, etc.<\/p>\n<p>Ces \u00e9l\u00e9ments peuvent poser des probl\u00e8mes d\u2019accessibilit\u00e9 s\u2019ils ne sont pas correctement con\u00e7us, car ils modifient le contenu sans rechargement de page. L\u2019objectif de ce chapitre est de s\u2019assurer que ces <strong>interactions restent compr\u00e9hensibles, utilisables au clavier et compatibles avec les technologies d\u2019assistance<\/strong>.<\/p>\n<h2><span style=\"text-decoration: underline;\">Les enjeux des scripts pour l\u2019accessibilit\u00e9<\/span><\/h2>\n<p>Contrairement au HTML statique, les scripts peuvent :<\/p>\n<ul>\n<li>\n<p>Ajouter du contenu dynamiquement<\/p>\n<\/li>\n<li>\n<p>Modifier des \u00e9tats visuels<\/p>\n<\/li>\n<li>\n<p>Afficher ou masquer des \u00e9l\u00e9ments<\/p>\n<\/li>\n<li>\n<p>Cr\u00e9er des composants enti\u00e8rement personnalis\u00e9s<\/p>\n<\/li>\n<\/ul>\n<p>Sans indications adapt\u00e9es, un lecteur d\u2019\u00e9cran peut ne pas d\u00e9tecter ces changements, et un utilisateur clavier peut ne pas pouvoir interagir correctement.<\/p>\n<h2><span style=\"text-decoration: underline;\">Principe fondamental : une fonctionnalit\u00e9 script\u00e9e doit rester accessible<\/span><\/h2>\n<p>Le RGAA impose notamment que :<\/p>\n<ul>\n<li>\n<p>Tous les composants soient utilisables au clavier<\/p>\n<\/li>\n<li>\n<p>Les changements dynamiques soient signal\u00e9s<\/p>\n<\/li>\n<li>\n<p>Les r\u00f4les et \u00e9tats soient correctement expos\u00e9s<\/p>\n<\/li>\n<li>\n<p>Les composants personnalis\u00e9s aient un \u00e9quivalent s\u00e9mantique<\/p>\n<\/li>\n<\/ul>\n<p><strong>ARIA joue ici un r\u00f4le central pour compl\u00e9ter le HTML.<\/strong><\/p>\n<h4>Exemple 1 : menu d\u00e9roulant (aria-expanded)<\/h4>\n<p>Un menu qui s\u2019ouvre et se ferme doit annoncer son \u00e9tat.<\/p>\n<pre><code class=\"language-html\">&lt;button \n  aria-expanded=\"false\" \n  aria-controls=\"menu1\"\n  onclick=\"toggleMenu()\"&gt;\n  Menu\n&lt;\/button&gt;\n\n&lt;ul id=\"menu1\" hidden&gt;\n  &lt;li&gt;&lt;a href=\"\/profil\"&gt;Profil&lt;\/a&gt;&lt;\/li&gt;\n  &lt;li&gt;&lt;a href=\"\/deconnexion\"&gt;D\u00e9connexion&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<p>Lors de l\u2019ouverture, le script doit modifier l\u2019\u00e9tat :<\/p>\n<pre><code class=\"language-javascript\">function toggleMenu() {\n  const button = document.querySelector('button');\n  const menu = document.getElementById('menu1');\n  const isOpen = button.getAttribute('aria-expanded') === 'true';\n\n  button.setAttribute('aria-expanded', !isOpen);\n  menu.hidden = isOpen;\n}\n<\/code><\/pre>\n<p>Cela permet au lecteur d\u2019\u00e9cran d\u2019annoncer \u00ab d\u00e9velopp\u00e9 \u00bb ou \u00ab r\u00e9duit \u00bb.<\/p>\n<h4>Exemple 2 : fen\u00eatre modale (role=\u00a0\u00bbdialog\u00a0\u00bb)<\/h4>\n<p>Une modale doit \u00eatre identifi\u00e9e comme telle.<\/p>\n<pre><code class=\"language-html\">&lt;div \n  role=\"dialog\" \n  aria-labelledby=\"titre-modal\"\n  aria-modal=\"true\"&gt;\n  \n  &lt;h2 id=\"titre-modal\"&gt;Confirmation&lt;\/h2&gt;\n  &lt;p&gt;Voulez-vous supprimer cet \u00e9l\u00e9ment ?&lt;\/p&gt;\n  &lt;button&gt;Oui&lt;\/button&gt;\n  &lt;button&gt;Non&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>ARIA permet d\u2019indiquer :<\/p>\n<ul>\n<li>\n<p>Le type de composant (<code>role=\"dialog\"<\/code>)<\/p>\n<\/li>\n<li>\n<p>Le titre associ\u00e9 (<code>aria-labelledby<\/code>)<\/p>\n<\/li>\n<li>\n<p>Le contexte modal (<code>aria-modal=\"true\"<\/code>)<\/p>\n<\/li>\n<\/ul>\n<h4>Exemple 3 : contenu mis \u00e0 jour dynamiquement (aria-live)<\/h4>\n<p>Si un script modifie une information importante, elle doit \u00eatre annonc\u00e9e.<\/p>\n<pre><code class=\"language-html\">&lt;p aria-live=\"polite\" id=\"resultat\"&gt;&lt;\/p&gt;\n<\/code><\/pre>\n<p>Quand le contenu change :<\/p>\n<pre><code class=\"language-javascript\">document.getElementById('resultat').textContent =\n  \"Votre message a \u00e9t\u00e9 envoy\u00e9\";\n<\/code><\/pre>\n<p>Le lecteur d\u2019\u00e9cran annonce automatiquement la mise \u00e0 jour.<\/p>\n<h4>Exemple 4 : onglets dynamiques (role=\u00a0\u00bbtab\u00a0\u00bb)<\/h4>\n<pre><code class=\"language-html\">&lt;div role=\"tablist\"&gt;\n  &lt;button role=\"tab\" aria-selected=\"true\" aria-controls=\"panel1\"&gt;\n    Description\n  &lt;\/button&gt;\n  &lt;button role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2\"&gt;\n    Avis\n  &lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;div id=\"panel1\" role=\"tabpanel\"&gt;\n  Contenu de la description\n&lt;\/div&gt;\n\n&lt;div id=\"panel2\" role=\"tabpanel\" hidden&gt;\n  Contenu des avis\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Le script doit mettre \u00e0 jour <code>aria-selected<\/code> lors du changement d\u2019onglet.<\/p>\n<h4>Exemple 5 : bouton personnalis\u00e9 cr\u00e9\u00e9 en div (solution de secours)<\/h4>\n<p>Si un composant n\u2019utilise pas <code>&lt;button&gt;<\/code>, il faut recr\u00e9er son accessibilit\u00e9.<\/p>\n<pre><code class=\"language-html\">&lt;div \n  role=\"button\" \n  tabindex=\"0\"\n  onclick=\"valider()\"\n  onkeydown=\"if(event.key==='Enter'){valider();}\"&gt;\n  Valider\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Mais la meilleure solution reste :<\/p>\n<pre><code class=\"language-html\">&lt;button onclick=\"valider()\"&gt;Valider&lt;\/button&gt;\n<\/code><\/pre>\n<p>Le HTML natif est toujours pr\u00e9f\u00e9rable.<\/p>\n<h4>Exemple 6 : indicateur de chargement (aria-busy)<\/h4>\n<pre><code class=\"language-html\">&lt;div aria-busy=\"true\" id=\"zone\"&gt;\n  Chargement en cours...\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Une fois le contenu charg\u00e9 :<\/p>\n<pre><code class=\"language-javascript\">document.getElementById('zone').setAttribute('aria-busy', 'false');\n<\/code><\/pre>\n<p>Cela informe que la mise \u00e0 jour est termin\u00e9e.<\/p>\n<h2><span style=\"text-decoration: underline;\">Les crit\u00e8res cl\u00e9s du RGAA pour les scripts<\/span><\/h2>\n<p>Le chapitre 7 v\u00e9rifie notamment que :<\/p>\n<ul>\n<li>\n<p>Les fonctionnalit\u00e9s sont accessibles au clavier<\/p>\n<\/li>\n<li>\n<p>Les \u00e9v\u00e9nements ne reposent pas uniquement sur la souris<\/p>\n<\/li>\n<li>\n<p>Les changements dynamiques sont annonc\u00e9s<\/p>\n<\/li>\n<li>\n<p>Les \u00e9tats des composants sont expos\u00e9s<\/p>\n<\/li>\n<li>\n<p>Les technologies d\u2019assistance peuvent comprendre les interactions<\/p>\n<\/li>\n<\/ul>\n<p>ARIA est souvent n\u00e9cessaire pour r\u00e9pondre \u00e0 ces exigences.<\/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>Menus qui s\u2019ouvrent sans indication d\u2019\u00e9tat<\/p>\n<\/li>\n<li>\n<p>Contenus dynamiques non annonc\u00e9s<\/p>\n<\/li>\n<li>\n<p>Boutons cr\u00e9\u00e9s en div non accessibles au clavier<\/p>\n<\/li>\n<li>\n<p>Focus perdu lors d\u2019une action<\/p>\n<\/li>\n<li>\n<p>Modales impossibles \u00e0 fermer au clavier<\/p>\n<\/li>\n<\/ul>\n<p>Ces probl\u00e8mes rendent l\u2019interface difficile, voire inutilisable.<\/p>\n<h2><span style=\"text-decoration: underline;\">Impact concret pour les utilisateurs<\/span><\/h2>\n<p>Sans gestion correcte des scripts :<\/p>\n<ul>\n<li>\n<p>Un lecteur d\u2019\u00e9cran ne sait pas qu\u2019un contenu a chang\u00e9<\/p>\n<\/li>\n<li>\n<p>Un utilisateur clavier peut rester bloqu\u00e9<\/p>\n<\/li>\n<li>\n<p>Un composant peut sembler \u00ab invisible \u00bb malgr\u00e9 sa pr\u00e9sence \u00e0 l\u2019\u00e9cran<\/p>\n<\/li>\n<\/ul>\n<p>ARIA permet de rendre ces interactions compr\u00e9hensibles et pr\u00e9visibles.<\/p>\n<h2><span style=\"text-decoration: underline;\">Conclusion<\/span><\/h2>\n<p>Le chapitre 7 du RGAA encadre l\u2019accessibilit\u00e9 des interfaces dynamiques pilot\u00e9es par JavaScript. Il impose que toute interaction reste utilisable au clavier, compr\u00e9hensible par les technologies d\u2019assistance et clairement annonc\u00e9e lorsqu\u2019un changement survient.<\/p>\n<p>Les balises et attributs ARIA jouent ici un r\u00f4le majeur pour d\u00e9crire les r\u00f4les, les \u00e9tats et les relations entre les composants. Toutefois, le principe reste le m\u00eame : privil\u00e9gier le HTML natif d\u00e8s que possible, et utiliser ARIA pour compl\u00e9ter lorsque les interfaces deviennent plus complexes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Le chapitre 7 du RGAA traite des scripts, c\u2019est-\u00e0-dire de tous les contenus et fonctionnalit\u00e9s g\u00e9n\u00e9r\u00e9s ou modifi\u00e9s par [&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-110","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\/110","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=110"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}