2.3.1. Simulated checkboxes

Simulated checkboxes are said to be “simulated” because they do not use the default form elements in HTML, namely the <input type=”checkbox”/> fields. They are often used because they are more visually attractive.

The basic HTML code uses standard checkboxes:

<form action="index.html" method="post">
	<h2 id="question">Which sports do you play?</h2>
 
	<ul id="answers">
		<li class="choice">
			<label for="golf">
				<input type="checkbox" name="golf" id="golf" />
				Golf
			</label>
		</li>
		<li class="choice">
			<label for="polo">
				<input type="checkbox" name="polo" id="polo" />
				Polo
			</label>
		</li>
		<li class="choice">
			<label for="tennis">
				<input type="checkbox" name="tennis" id="tennis" />
				Tennis
			</label>
		</li>
	</ul>
 
	<input type="submit" value="Submit information" />
</form>

Without JavaScript, a standard form is provided to the user.

The scripts must handle the following points:

• The <label> elements and their content are replaced by the text that was initially within the <input type=“checkbox” /> tags.
• An image that represents an unchecked checkbox is added before each label. The technical characteristics of this this image are as follows:
  • An aria-hidden=“true” attribute is applied to the image to hide it from users with screen readers.
  • The alt attribute associated with the image describes the status of the checkbox; for example alt=“Unchecked: ”.
• The role=“group” attribute is applied to the container of the checkboxes. In the example, the <ul> tag is used.
• The role=”checkbox” attribute is applied to each of the checkboxes. In the example, the <li> tag is used.
• The aria-checked=“false” attribute is applied to each of the checkboxes by default. This attribute value then changes dynamically to true when the checkbox is selected and false when it is not.
• The checkboxes may be selected either by clicking on them, or by using the space key when the focus is set on the checkbox.
• The attribute value tabindex=“0” is applied to each of the simulated checkboxes so that they can receive the focus.
• Lastly, if the checkboxes are preceded by a question, instruction, or any important indication for understanding how to use them, the aria-labelledby attribute is applied to the container of the checkboxes. The value of this attribute is retrieved from the id associated with the question, instruction, etc.

The resulting code in JavaScript is as follows:

<form method="post" action="index.html">
    <h2 id="question">Which sports do you play?</h2>
 
    <ul id="answers" role="group" aria-labelledby="question">
        <li class="choice" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-empty.png" alt="unchecked: ">
            Golf            
        </li>
        <li class="choice" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-empty.png" alt="Unchecked : ">
            Polo            
        </li>
        <li class="choice" role="checkbox" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/checkbox-empty.png" alt="Unchecked : ">
            Tennis            
        </li>
    </ul>
 
    <input type="submit" value="Submit information">
</form>

• Online demo of simulated checkboxes.