static/index.html

@@ -121,7 +121,7 @@
 
     <main aria-label="contenu de la page web">
         <div id="jardin">
-            <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées" tabindex="0">
+            <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées">
                 <!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
                 <pre class="center" aria-label="Animation de texte de bienvenue">
                                          '\ ; /'

static/script-bon.js

@@ -10,6 +10,27 @@ let frames = {};
 // dictionary to keep track of frame count for each animation
 let frameCounts = {};
 
+// Update ARIA live attributes based on prefers-reduced-motion
+function updateARIALiveAttributes() {
+  const illustrationAccueil = document.getElementById('illustration-accueil');
+  const rennes = document.getElementById('rennes');
+  const orsay = document.getElementById('orsay');
+  const parterre = document.getElementById('parterre');
+
+  if (prefersReducedMotion) {
+    illustrationAccueil.setAttribute('aria-live', 'off');
+    rennes.setAttribute('aria-live', 'off');
+    orsay.setAttribute('aria-live', 'off');
+    parterre.setAttribute('aria-live', 'off');
+
+  } else {
+    illustrationAccueil.setAttribute('aria-live', 'polite');
+    rennes.setAttribute('aria-live', 'polite');
+    orsay.setAttribute('aria-live', 'polite');
+    parterre.setAttribute('aria-live', 'polite');
+  }
+}
+
 
 function animate(id, delay) {
 
@@ -30,6 +51,9 @@ function animate(id, delay) {
   frames[id] = framesList;
   delays[id] = delay;
 
+  // Update ARIA live attributes
+  updateARIALiveAttributes();
+
   // Start the animation if prefers-reduced-motion is not enabled
   if (!prefersReducedMotion) {
     animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);