Difference between revisions of "ARIA Progressbar"

From Level Access Web Labs
Jump to navigation Jump to search
 
Line 22: 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>
Line 28: Line 28:
 
</body>
 
</body>
 
</html>
 
</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>
 
<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>
Line 50: Line 51:
 
   <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="p2" aria-labelledby="l1" aria-valuemin="30" aria-maxvalue="100">&nbsp;</span>
+
     <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>
 
   <div>&nbsp;</div>
 
   <div>&nbsp;</div>

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.