Beispiel:WAI-ARIA-2.html
<!doctype html> <html lang="de"> <head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown-Timer mit ARIA Live Regions</title> <script> document.addEventListener('DOMContentLoaded', function() {
let countdownInterval;
const clock = document.querySelector('#clock');
const alertMessage = document.querySelector('#alert');
const alertSelect = document.querySelector('#alertSelect');
const setButton = document.querySelector('#set');
const stopButton = document.querySelector('#stop');
let countdownTime = 0;
let isTimerRunning = false;
// Function to format time (in milliseconds) to minutes and seconds
function formatTime(ms) {
const minutes = Math.floor(ms / 60000);
const seconds = Math.floor((ms % 60000) / 1000);
return `${minutes}:${seconds < 10 ? '0' : }${seconds}`;
}
// Start countdown timer
function startCountdown(duration) {
const endTime = Date.now() + duration;
isTimerRunning = true;
countdownInterval = setInterval(() => {
const remainingTime = endTime - Date.now();
if (remainingTime <= 0) {
clearInterval(countdownInterval);
clock.textContent = '0:00';
alertMessage.textContent = 'Fertig! Endlich Pause!';
alertMessage.setAttribute('role', 'alert');
isTimerRunning = false;
} else {
clock.textContent = formatTime(remainingTime);
}
}, 1000);
}
setButton.addEventListener('click', () => {
if (isTimerRunning) return; // Prevent multiple timers from running
countdownTime = parseInt(alertSelect.value, 10); alertMessage.textContent = 'Timer zählt bis ' + formatTime(countdownTime); startCountdown(countdownTime); });
stopButton.addEventListener('click', () => {
clearInterval(countdownInterval);
clock.textContent = '0:00';
alertMessage.textContent = 'Timer gestoppt.';
isTimerRunning = false;
});
}); </script> <style> [role=alert] { font-size: 1.25em; font-weight: bold; color: red; border-left: thick solid; padding-left: 1em; } </style> </head>
<body>
Countdown-Timer mit ARIA Live Regions
verbleibende Zeit: <output id="clock" aria-live="assertive"></output>
<fieldset aria-controls="alerts"> <legend>Gleich gibt's ne Pause …</legend>
<label for="alertSelect">Weck' mich in:</label> <select id="alertSelect" role="listbox"> <option value="10000" selected>10 Sekunden</option> <option value="60000">1 Minute</option> <option value="120000">2 Minuten</option> <option value="300000">5 Minuten</option> </select>
<button id="set">Start!</button> <button id="stop">Stop!</button> </fieldset>
Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/WAI-ARIA#Timer">WAI-ARIA-Timer</a>.
<a href="https://forum.selfhtml.org/advent/2024">Zurück zum
Adventskalender 2024.
</body> </html>
