2.3.2. Simulated radio buttons

“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.

The basic HTML code uses standard radio buttons:

<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>

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

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:

<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>

• Online demo of simulated radio buttons.