Using WAI-ARIA aria-checked=mixed

Status

• Surveyed by TF April 9, 2012
• Surveyed 23 July 2012

Checkbox Group with Mixed State

Simple example of a checkbox group using inline images to display the visual state of the boxes in the group and the first checkbox shows and composite state of other checkboxes in the group and can be used to set and reset the other checkboxes in the group.

• role defined using role=checkbox
• accessible name defined through child text nodes
• checked state defined using aria-checked attribute
• controls relationship defined through aria-controls attribute
• keyboard support through the use of tabindex=0

The techniuqe is based on this example: http://oaa-accessibility.org/example/6/

<h3 id="cond">Sandwich Condiments</h3>

<ul id="cb1" class="checkboxes" role="group" aria-labelledby="cond">

   <li id="cb1all"
       role="checkbox" 
       class="groupbox"
       aria-checked="mixed"
       aria-controls="cb1a cb1b cb1c cb1d"
       tabindex="0">
     <img src="http://www.oaa-accessibility.org/media/examples/images/checkbox-mixed-black.png" role="presentation">
     All condiments        
   </li>   

   <li id="cb1a" 
       role="checkbox" 
       class="checkbox"
       aria-checked="false" 
       tabindex="0">
     <img src="http://www.oaa-accessibility.org/media/examples/images/checkbox-unchecked-black.png" role="presentation">
     Lettuce
   </li>

   <li id="cb1b" 
       role="checkbox" 
       class="checkbox"
       aria-checked="true" 
       aria-describedby="desc2"
       tabindex="0">
     <img src="http://www.oaa-accessibility.org/media/examples/images/checkbox-checked-black.png" role="presentation">
     Tomato
    </li>
            
    <li id="cb1c" 
        role="checkbox" 
        class="checkbox"
        aria-checked="true" 
        aria-describedby="desc3"
        tabindex="0">
      <img src="http://www.oaa-accessibility.org/media/examples/images/checkbox-checked-black.png" role="presentation">
      Mustard
    </li>
         
    <li id="cb1d" 
        role="checkbox" 
        class="checkbox"
        aria-checked="true" 
        aria-describedby="desc4"
        tabindex="0">
      <img src="http://www.oaa-accessibility.org/media/examples/images/checkbox-checked-black.png" role="presentation">
      Sprouts
    </li>            

</ul>