<html> <head> <title>ARIA Progress Bar</title> <style type="text/css"> <!-- span[role="progressbar"] { color: red; font-family: courier; font-size: .1em;} *[aria-hidden] { visibility: hidden; } div[role="group"] { border: 3px solid black; width: 50%; } --> </style> <script> <!-- function displayProgress(progress) { var valueNow = parseInt(progress.getAttribute("aria-valuenow")); var valueMin = parseInt(progress.getAttribute("aria-valuemin")); var valueMax = parseInt(progress.getAttribute("aria-valuemax")); // I'm sure there's something better than using a loop, but I don't feel like looking it up right now var progressText = "|"; var count = valueMin; for (; count < valueNow; count += 2) { progressText += "*"; } for (; count < valueMax; count += 2) { progressText += "-"; } progressText += "|"; progress.firstChild.data = progressText; return false; } var gProgressId = "progress1"; // for now just a global to store the progress id var gbUpdate = false; var gTimerId = null; function updateProgress() { // will update the first time it is drawn but so what - this is a prototype ! var progress = document.getElementById(gProgressId); var valueNow = parseInt(progress.getAttribute("aria-valuenow")); var valueMin = parseInt(progress.getAttribute("aria-valuemin")); var valueMax = parseInt(progress.getAttribute("aria-valuemax")); valueNow += 5; if (valueNow < valueMin) { valueNow = valueMin; } if (valueNow > valueMax) { valueNow = valueMax; //loop around } progress.setAttribute("aria-valuenow", valueNow); displayProgress(progress); if (valueNow == valueMax) { stopProgress(); var schedule = document.getElementById("schedule"); schedule.removeAttribute("aria-hidden"); schedule.className += ""; // Force IE7 reflow } } function startProgress() { gbUpdate = true; gTimerId = setInterval("updateProgress();", 400); document.getElementById("disabled").removeAttribute("disabled"); } function stopProgress() { gbUpdate = false; if ( gTimerId != null) { clearInterval(gTimerId); gTimerId = null; } document.getElementById("disabled").setAttribute("disabled", "true"); } --> </script><style type="text/css"></style> </head> <body onload="displayProgress(document.getElementById(gProgressId));"> <p>Here is a progress bar that you can start and stop using the buttons below. Both the progress bar and the schedule are within an assertive live region.</p> <p style="margin-top:2em;"> <button onclick="startProgress();">Load schedule</button><span style="padding-left:5em;"> </span> <button id="disabled" onclick="stopProgress();" disabled="true">Cancel</button> </p> <p></p> <div role="group" aria-live="assertive" aria-labelledby="scheduleLabel"> <h1 id="scheduleLabel">My schedule</h1> <p> Loading schedule ... <span role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" id="progress1" title="My progress">|-------------------------|</span> <table id="schedule" aria-hidden="true" border="1" cellpadding="3" cellspacing="0"> <tbody><tr> <td>Monday</td> <td>Work</td> </tr> <tr> <td>Tuesday</td> <td>Work</td> </tr> <tr> <td>Wednesday</td> <td>Work</td> </tr> <tr> <td>Thursday</td> <td>Work</td> </tr> <tr> <td>Friday</td> <td>Work</td> </tr> <tr> <td>Saturday</td> <td>Play</td> </tr> <tr> <td>Sunday</td> <td>Play</td> </tr> </tbody></table> </p></div> </body> </html>