Difference between revisions of "ARIA Progressbar"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | <p>This progress bar shows a progress of 30 out of 100. Press start to activate the progress bars | + | == progressbar with Valid ARIA == |
| + | |||
| + | <p>This progress bar shows a progress of 30 out of 100. Press start to activate the progress bars climb to 100. ARIA live regions are not used in this example.</p> | ||
<html> | <html> | ||
| Line 24: | Line 26: | ||
<div> </div> | <div> </div> | ||
<button onclick="run();"> Start </button> | <button onclick="run();"> Start </button> | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | <p>This progress bar is almost identical to the one above, except that it modifies aria-valuemin to reflect its current value instead of modifying aria-valuenow. Press start to activate the progress bars climb to 100. ARIA live regions are not used in this example.</p> | ||
| + | |||
| + | <html> | ||
| + | <head> | ||
| + | <script type="text/javascript"> | ||
| + | function run2() { | ||
| + | |||
| + | var obj = document.getElementById('p2'); | ||
| + | |||
| + | if (obj.getAttribute("data-value") < 100) { | ||
| + | obj.setAttribute("data-value", parseInt(obj.getAttribute("data-value")) + 5); | ||
| + | obj.setAttribute('aria-valuemin', obj.getAttribute("data-value")); | ||
| + | obj.style.width = obj.getAttribute("data-value") + "%"; | ||
| + | } | ||
| + | setTimeout('run2();',500); | ||
| + | } | ||
| + | </script> | ||
| + | </head> | ||
| + | <body> | ||
| + | <label id="l1">Percent complete</label> | ||
| + | <div style="border: solid thin blue; height:1em;"> | ||
| + | <span role="progressbar" style="display:block; background-color:blue; width:30%; " data-value="30" id="p2" aria-labelledby="l1" aria-valuemin="30" aria-maxvalue="100"> </span> | ||
| + | </div> | ||
| + | <div> </div> | ||
| + | <button onclick="run2();"> Start </button> | ||
</body> | </body> | ||
</html> | </html> | ||
[[Category:ARIA]] | [[Category:ARIA]] | ||
Revision as of 20:16, 9 May 2017
progressbar with Valid ARIA
This progress bar shows a progress of 30 out of 100. Press start to activate the progress bars climb to 100. ARIA live regions are not used in this example.
This progress bar is almost identical to the one above, except that it modifies aria-valuemin to reflect its current value instead of modifying aria-valuenow. Press start to activate the progress bars climb to 100. ARIA live regions are not used in this example.