Web Accessibility services and resources for producing web sites accessible to people with special needs.

Accessible Radio Buttons - Likert Scale Solutions

Likert Scale

A Likert scale is commonly used for opinion polls; it is a series of statements where the participant is asked to choose their attitude or rank the frequency of actions. The scale is a data table where the first column is usually the question and the remaining (usually 5 columns) are the rankings with a radio button in each cell labeled (for example): Strongly Agree, Agree, No Opinion, Disagree, Strongly Disagree or Always, Very Frequently, Occasionally, Rarely, Very Rarely, Never.

It is common for developers to put table heading <th> tags on the cells at the top of the column sto make the table accessible. This would be useful if the user was just listening to the table and using the JAWS key commands to read the information about the cells. Unfortunately, in order to answer the questions, the JAWS user must be in Forms mode which is not going to give them table information. In order to properly code this type of table for accessibility, you also need to use the form element features.

Accessible Radio Buttons

Normally, I recommend using <label> tags for form elements. They also provide increased click size area for limited mobility users (clicking the text selects the box, button or dropdown).

In this case, we don't want to put visible text on each radio button as that will add clutter for sighted users. Further, best practices for radio buttons also uses the Fieldset and Legend tags to group the buttons and associate the question with each of the answers. You can redefine the <fieldset> tag in CSS to remove the border line in the default style.

Sample CSS Code:

fieldset { border:none; }

Likert Scale with Title Attributes on the <input> tags

The Likert Scale poses some unique challenges. The Fieldset tag is not valid across table columns. In order to provide all the necessary information to the listener in Forms mode, additional information must be provided to the listener. While some may recommend using label tags with a class defined to make them invisible, but readable, I prefer the simplicity of using the title attribute of the <input> or <select> tags. In my example:

	Strongly Agree	Agree	Undecided	Disagree	Strongly Disagree
The product is a good value for the dollar

Sample code for Likert Scale

<table class="Likert">
<tr>
<td> </td>
<th>Strongly <br />
Agree</th>
<th>Agree</th>
<th>No Opinion </th>
<th>Disagree</th>
<th>Strongly <br />
Disagree </th>
</tr>
<tr>
<td scope="row" align="left">The product is a good value for the dollar</td>
<td>
<input name="SA1" type="radio" value="5" title="The product is a good value for the dollar: Strongly Agree"/>
</td>
<td>
<input name="A1" type="radio" value="4" title="Agree"/>
</td>
<td><input name="U1" type="radio" value="3" title="Undecided"/></td>
<td>
<input name="D1" type="radio" value="2" title="Disagree"/>
</td>
<td>
<input name="SD1" type="radio" value="1" title="Strongly Disagree"/>
</td>
</tr>
</table>

In this example, whether the JAWS listener is in Table mode or Forms mode, they will hear the information correctly and be able to identify the cell they are in. To compensate for the Fieldset and Legend problem, I included the description of the statement in the first cell.

The FANGS screen reader emulator renders the table as follows:

Table with six columns and two rows Strongly Agree Agree Undecided Disagree Strongly Disagree The product is a good value for the dollar Radio button Not checked The product is a good value for the dollar colon Strongly Agree Radio button Not checked Agree Radio button Not checked No Opinion Radio button Not checked Disagree Radio button Not checked Strongly Disagree Table end