====== 2.3.2. Simulated radio buttons ======

===== Purpose =====

“Simulated” radio buttons do not use the standard HTML form elements for radio buttons, namely the ''<input type="radio" />'' fields. Simulated radio buttons are often used because they are more visually attractive.

Unlike checkboxes that permit multiple selections, only one radio button can be selected in a group of radio buttons. 

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

The basic HTML code uses standard radio buttons:

<code html>
<form action="index.html" method="post">
    <h2 id="question">Which colour was Henri IV’s white horse?</h2>
 
    <ul id="answers">
        <li class="choice">
            <label for="yellow">
                <input type="radio" name="henri-iv-horse-colour" id="yellow" />
                Yellow
            </label>
        </li>
        <li class="choice">
            <label for="Green">
                <input type="radio" name="henri-iv-horse-colour" id="green" />
                Green
            </label>
        </li>
        <li class="choice">
            <label for="white">
                <input type="radio" name="henri-iv-horse-colour " id="white" />
                White
            </label>
        </li>
    </ul>
 
    <input type="submit" value="Submit information" />
</form>
</code>

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

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

With JavaScript, the behaviour of the simulated radio buttons must be the same as for standard radio buttons.

The scripts must handle the following points:
  * The ''<label>'' elements and their content are replaced by the text that was initially in the ''<input type="radio" />'' tag.
  * An image that represents an unselected radio button is added before each label. This image includes the following technical features:
    * The attribute value ''aria-hidden="true"'' is applied to the image to hide it from users of screen readers. 
    * The ''alt'' attribute of the image describes the status of the radio button; for example, ''alt=”not selected “''.
  * The ''role="radiogroup"'' attribute is applied to the container of the radio buttons. In the example, the ''<ul>'' tag is used. 
  * The ''role="radio"'' attribute is applied to each of the radio buttons. In the example, ''<li>'' tags are used. 
  * The ''aria-checked="false"'' is applied to each of the radio buttons by default. This attribute value then changes dynamically to ''true'' when the radio button is selected and ''false'' when it is not. 
  * The radio buttons can be selected either by clicking on them or by using the ''space'' key when the focus is set on the radio button.
  * By default, the ''tabindex="0"'' attribute is applied to the first and last radio buttons in the group, so that the user can set the focus either at the start or the end of the group of radio buttons. The ''tabindex="-1"'' attribute is applied to the other radio buttons in order to prevent access from the keyboard by default.
  * As soon as a radio button is selected, the ''tabindex'' attribute of this button is set to ''0'' while the value for ''tabindex'' is set at ''-1'' for the other buttons in the group. 
  * When the focus is positioned on one of the radio buttons:
    * Pressing on the ''Up arrow'' or ''Left arrow'' key moves the focus to the previous button, and selects it. If the focus was set on the first button in the group, then the last button in the group is selected. 
    * Pressing on the ''Down arrow'' or ''Right arrow'' moves the focus to the next radio button, and selects it. If the focus was set on the last button in the group, then the first button in the group is selected. 
  * Finally, if the checkboxes are preceded by a question, instruction, or important indication for understanding the meaning of the checkboxes, 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">
<form method="post" action="index.html">
    <h2 id="question">Which colour was Henri IV’s horse?</h2>
 
    <ul id="answers" role="radiogroup" aria-labelledby="question">
        <li class="choice" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/unselected-radio-button.png" alt=" Not selected: ">
            Yellow
        </li>
        <li class="choice" role="radio" aria-checked="false" tabindex="-1">
            <img aria-hidden="true" src="images/unselected-radio-button.png" alt="Not selected: ">
            Green            
        </li>
        <li class="choice" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/unselected-radio-button.png" alt=" Not selected: ">
            White            
        </li>
    </ul>
 
    <input type="submit" value="Submit information">
</form>
</code>

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

  * [[http://accede.info/demos/en/demo-boutons-radio-simules-accessibles-en/|Online demo of simulated radio buttons]].