Forms

Guidelines Accessible Forms

The basic requirement of forms is that all of the input fields need to be labelled with label elements.

Use “for” and “id” attributes to attach labels to form elements

All form input elements must have a corresponding label to indicate what information is being requested. This method explicitly ties a label to an input element by matching the “for” attribute in the label tag with the “id” attribute in the input element tag. NOTE: This method will usually give you more flexibility in applying custom styling to your form elements. All of the examples on this page will use this method.

Source Code

<label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" />

Implementation

Nest the input element within the label tag (ideal implementation)

All form input elements must have a corresponding label to indicate what information is being requested. This method ties a label to an input element by wrapping the input element with the label tag.

Source Code

<label>First Name <input type="text" name="first-name" /></label>

Implementation

Describe text field information 

This method has a visible label that describes what information is being asked for in the text box.

Source Code

<label for="last-name">Last Name</label> <input id="last-name" type="text" name="last-name" />

Implementation

Use title attribute to describe text field (Alternative implementation)

Sometimes for stylistic reasons you do not want have a visible label displayed. Instead of a visible label you can use the title attribute of the input element to describe what information is being asked for. If this technique is used you still need to visually let your user know what information you are asking for. This is often handled by pre-populating the text field with the information being requested.

This introduces new issues that must be dealt with, such as the following.

  • having to clear the text out of the box before entering new information or risk having strange data submitted like “CityRaleigh”
  • if the user deletes the initial text then later comes back to the form element, will they remember what information was being asked for

These issues can be handled with JavaScript. While the following technique will sometimes produce errors or warnings by automated accessibility checkers, it is usable by major screen readers.

This technique is derived from testing done by Terrill Thompson.

Source Code

<input name="state" title="state" id="state" type="text" />
<script>
  var defaultValue = 'State';

  //add default value to search
  document.getElementById('state').value=defaultValue;

  //when either search field gets focus, remove the pre-populated text (if it exists)
  if (document.addEventListener) { //browser supports addEventListener
    document.getElementById('state').addEventListener('focus',function (e) {
    if (document.getElementById('state').value==defaultValue)
      document.getElementById('state').value="";
    },true);
  }
  else if (document.attachEvent) { //browser is IE
    document.getElementById('state').attachEvent('onfocus',function (e) {
    if (document.getElementById('state').value==defaultValue)
      document.getElementById('state').value="";
    });
  }

  //when either search field loses focus (e.g., user tabs away)
  //if field has no value, restore default value
  if (document.addEventListener) { //browser supports addEventListener
    document.getElementById('state').addEventListener('blur',function (e) {
    if (document.getElementById('state').value=="")
      document.getElementById('state').value=defaultValue;
    },true);
  }
  else if (document.attachEvent) { //browser is IE
    document.getElementById('state').attachEvent('onblur',function (e) {
    if (document.getElementById('state').value=="")
      document.getElementById('state').value=defaultValue;
    });
  }
</script>

Implementation

Single checkbox

For a single checkbox you simply need to attach the label to the input element.

Source Code

<input id="sendemail" type="checkbox" name="sendemail" value="sendemail" />
<label for="sendemail">Send me email updates.</label>

Implementation

Multiple related checkboxes

When you have a collection of related check boxes you need to include them in a fieldset and provide a legend. This helps visually identify related elements plus provides a description for how these items are related.

Source Code

<fieldset>
  <legend>Select your days of availability:</legend>
  <input id="monday" type="checkbox" name="availability" value="monday" />
  <label for="monday">Monday</label><br />
  <input id="tuesday" type="checkbox" name="availability" value="tuesday" />
  <label for="tuesday">Tuesday</label><br />
  <input id="wednesday" type="checkbox" name="availability" value="wednesday" />
  <label for="wednesday">Wednesday</label>
</fieldset>

Implementation

Select your days of availability:



Radio button

To make a radio button accessible you first need to attach the label to the input element.When you have a radio button input you usually have more than one input. (If you only have one radio button, a checkbox is more appropriate because it gives the user the option to unselect it.) Using the fieldset and legend helps visually identify the related group of radio buttons plus provides a description for how they are related. NOTE: By giving all of the radio buttons the same name it creates a radio group where selecting one radio button unselects the others in the group.

Source Code

<fieldset>
<legend>Payment Method</legend>
<input id="cash" type="radio" name="payment" value="cash" />
<label for="cash">Cash</label><br />
<input id="check" type="radio" name="payment" value="check" />
<label for="check">Check</label><br />
<input id="credit" type="radio" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</fieldset>

Implementation

Payment Method



Select menu, single item selection

To make a select menu accessible you simply need to attach the label to the input element.

Source Code

<label for="color">Choose the color you want</label>
  <select id="color" name="select">
  <option value="1">Green</option>
  <option value="2">Blue</option>
  <option value="3">Red</option>
</select>

Implementation


Green
Blue
Red

Select menu, multiple item selection

It is possible to make a menu that allows multiple selections by adding the attribute multiple=”multiple” to the select tag, however, this can be more difficult for some users to manipulate.

Source Code

<label for="color2">Choose the colors you want</label><br />
  <select id="color2" multiple="multiple" name="select">
  <option value="1">Green</option>
  <option value="2">Blue</option>
  <option value="3">Red</option>
</select>

Implementation

Green
Blue
Red

It is recommended to use a set of checkboxes to accomplish the same goal.

Source Code

<fieldset>
  <legend>Choose the colors you want</legend>
  <input id="green" name="colorcheckbox" type="checkbox" value="green" /><label for="green">Green</label><br />
  <input id="blue" name="colorcheckbox" type="checkbox" value="blue" /> <label for="blue">Blue</label><br />
  <input id="red" name="colorcheckbox" type="checkbox" value="red" /> <label for="red">Red</label>
</fieldset>

Implementation

Choose the colors you want



Jump menu, with “Go” button

Many times select menus are turned into “jump menus” by executing some JavaScript as soon as the selection has changed. This creates accessibility issues for users because actions can be triggered accidentally by simply tabbing or arrowing through a menu. Instead of a jump menu, a “go” button should be used in conjunction with a select menu to achieve the same goal.

Source Code

<label for="menu">Go to the Web Site:</label>
<select id="menu" name="menu">
  <option value="http://www.ncsu.edu/" selected="">NC State University</option>
  <option value="https://accessibility.oit.ncsu.edu">NC State IT Accessibility</option>
  <option value="http://oit.ncsu.edu">Office of Information Technology</option>
</select>
<input type="button" value="GO" onclick="location= document.getElementById('menu').options[ document.getElementById('menu').selectedIndex].value;">

Implementation


NC State University
NC State IT Accessibility
Office of Information Technology

Text area

To make a text area accessible you simply need to attach the label to the input element.

Source Code

<label for="feedback">Please leave your feedback:</label><br />
<textarea id="feedback" name="feedback"></textarea>

Implementation


Button

Buttons are inherently accessible as long as the you provide an appropriate value attribute.

Source Code

<input type="submit" name="submit" value="Submit this form" />

Image buttons

If you use an image button make sure the alt attribute is set appropriately.

Source Code

<input type="image" name="submitbutton" src="images/submit-this-form-button.jpg" alt="Submit this form" />

Things to avoid

Unlabeled input elements

Some screen readers have built enough logic into their form parsing algorithms to be able to make guesses at how unlabeled form elements should be labeled. However, that logic should not be depended upon as an excuse for poor coding practices. Explicitly attaching labels to input elements is the only way to ensure all users will be able to correctly identify what is being asked for in a particular input field.

Automatic jump menus

When you set up a select menu to automatically fire an action once the selection has changed, when keyboard-only users and screen reader users try to read the options in the list, oftentimes the action will fire as soon as their focus leaves the select menu, even if they did not want to execute the action.

Image buttons without alt text

If your image button does not contain alternative text in the alt attribute, screen readers will not know what the function of the button is.

Previous
Next