====== 2.3.1. Simulated checkboxes ======

===== Purpose =====

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.

===== Basic HTML code =====

The basic HTML code uses standard checkboxes:

<code html>
<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>
</code>

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

===== Behaviour with JavaScript =====

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:

<code html>
<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>
</code>

===== Démonstration =====

  * [[http://accede.info/demos/en/demo-cases-a-cocher-simulees-accessibles-en/|Online demo of simulated checkboxes]].