Difference between revisions of "ARIA Progressbar"

From Level Access Web Labs
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<p>This progress bar shows a progress of 30 out of 100.  Press start to activate the progress bars incrimination to 100.  ARIA live regions are not used in this example.</p>
+
== 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 20: Line 22:
 
   <label id="l1">Percent complete</label>
 
   <label id="l1">Percent complete</label>
 
   <div style="border: solid thin blue; height:1em;">
 
   <div style="border: solid thin blue; height:1em;">
     <span role="progressbar" style="display:block; background-color:blue; width:30%; " data-value="30" id="p1" aria-labelledby="l1" aria-valuenow="30" aria-maxvalue="100">&nbsp;</span>
+
     <span role="progressbar" style="display:block; background-color:blue; width:30%; " data-value="30" id="p1" aria-labelledby="l1" aria-valuenow="30" aria-valuemax="100">&nbsp;</span>
 
   </div>
 
   </div>
 
   <div>&nbsp;</div>
 
   <div>&nbsp;</div>
 
   <button onclick="run();"> Start </button>
 
   <button onclick="run();"> Start </button>
 +
</body>
 +
</html>
 +
== Progressbar with aria-valuemin used instead of aria-valuenow ==
 +
 +
<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-valuemax="100">&nbsp;</span>
 +
  </div>
 +
  <div>&nbsp;</div>
 +
  <button onclick="run2();"> Start </button>
 
</body>
 
</body>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 20:45, 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.

 
 

Progressbar with aria-valuemin used instead of aria-valuenow

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.