Deuxfleurs
/
site
21
2
Fork 5
Code Issues 9 Pull Requests 6 Releases Wiki Activity

added aria region live attribute on each region which animates according to prefers-reduced-motion option selected #30

This commit is contained in:
Adrian Rosin 2024-02-02 10:59:02 +01:00
parent 632986b36b
commit 7c1b44bd29
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.html
View File

@ -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">
'\ ; /'

24
static/script-bon.js
View File

@ -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);