Input Controls Best Practice

Input Controls

Last Updated: 12/15/2011

Input Controls are an integral part to any form. They allow a user to perform a variety of functions, e.g., type in text, select items from a list, upload a file, etc..

Challenges disabled users face with input controls are:

Knowing what input control is active on the page
Knowing what instructional text there is for the input controls

Example

Download

New Window

Check Box

Question?
Checkbox 1 Checkbox 2 Checkbox 3

Drop-Down List Box

Field Label:

Instructional Text

File Input Box

Sample Field Label:

Sample Instructional Text

Single Line Text Box

Field Label:

Instructional Text

Multi-Line Text Box

Field Label:

50 Characters Remaining

Radio Button

Question?
Radio 1 Radio 2 Radio 3

Build It
Basic Test
Advanced Test

Input controls are highlighted when the user has focus on them

Use the :focus, :hover and :active pseudo-classes in CSS to highlight form fields:

input_controls.css (excerpt)

/* CSS Highlight Effect for Form Fields */
input:focus,input:hover,input:active,
select:focus,select:hover,select:active,
textarea:focus,textarea:hover,textarea:active { 
    outline:1px solid #0066FF; background:#ffffcc; 
}

Instructional text is properly associated with an input control

Use a combination of tags and attributes to associate text with an input control:

Check Box

default.htm (excerpt)

<span id="checkboxQuestion">Question?</span><br />
<input aria-labelledby="checkboxQuestion checkboxLabel" type="checkbox" id="checkbox1" title="Question? Checkbox 1"/>
   <label id="checkboxLabel" for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox2" />
   <label for="checkbox2">Checkbox 2</label>
<input type="checkbox" id="checkbox3" />
   <label for="checkbox3">Checkbox 3</label>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<input … type="checkbox" id="checkbox1" />
   <label for="checkbox1">Checkbox 1</label>
<input … type="checkbox" id="checkbox2" />
   <label for="checkbox2">Checkbox 2</label>
<input … type="checkbox" id="checkbox3" />
   <label for="checkbox3">Checkbox 3</label>

Add a title attribute to the first check box to tie-in the question:
```
<input … id="checkbox1" title="Question? Checkbox 1 " …/>
```

Use ARIA's labelledby attribute to the first check box to tie-in multiple pieces of text:

<span id="checkboxQuestion">Question?</span><br />
  <input aria-labelledby="checkboxQuestion checkboxLabel" id="checkbox1" … />
  <label id="checkboxLabel" …>Checkbox 1</label>

Drop-Down List Box

default.htm (excerpt)

<label for="dropdownbox1">Field Label:</label><br />
       <select aria-describedby="ddHelpText" id="dropdownbox1" title="Field Label: Instructional Text">
           <option>Choice 1</option>
           <option>Choice 2</option>
           <option>Choice 3</option>
           <option>Choice 4</option>
           <option>Choice 5</option>
       </select>
       <div class="helpText" id="ddHelpText">Instructional Text</div>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<label for="dropdownbox1">Field Label:</label>
<select … id="dropdownbox1">

Add a title attribute to provide any additional instructional text:
```
<select … title="Field Label: Instructional Text">
```

Use ARIA's describedby attribute to attach any instructional text to the control:

<select aria-describedby="ddHelpText" …>
…
</select>
<div … id="ddHelpText">Instructional Text</div>

File Input Box

default.htm (excerpt)

<label for="fileinputbox1">Field Label:</label><br />
       <input aria-describedby="fiHelpText" id="fileinputbox1" type="file" title="Field Label: Instructional Text" />
       <div class="helpText" id="fiHelpText">Instructional Text</div>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<label for="fileinputbox1">Field Label:</label>
<input … id="fileinputbox1" type="file" />

Add a title attribute to provide any additional instructional text:
```
<input … title="Field Label: Instructional Text" />
```

Use ARIA's describedby attribute to attach any instructional text to the control:

<input aria-describedby="fiHelpText" type="file" />
<div … id="fiHelpText">Instructional Text</div>

Single Line Text Box

default.htm (excerpt)

<label for="textbox1">Field Label:</label><br />
       <input aria-describedby="stbHelpText" id="textbox1" id="textbox1" type="text" title="Field Label: Instructional Text" />
       <div class="helpText" id="stbHelpText">Instructional Text</div>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<label for="textbox1">Field Label:</label>
<input … id="textbox1" type="text" />

Add a title attribute to provide any additional instructional text:
```
<input … title="Field Label: Instructional Text" />
```

Use ARIA's describedby attribute to attach any instructional text to the control:

<input aria-describedby="stbHelpText" type="text" />
<div … id="stbHelpText">Instructional Text</div>

Multi-Line Text Box

default.htm (excerpt)

<label for="multilinetextbox1">Field Label:</label><br />

<textarea aria-describedby="mltbHelpText" id="multilinetextbox1" cols="30" rows="3" title="Field Label: 50 Characters Remaining"></textarea>

<div class="counter helpText" id="mltbHelpText"><span aria-live="polite" class="count">50</span> Characters Remaining</div>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<label for="multilinetextbox1">Field Label:</label><br />
<textarea … id="multilinetextbox1"></textarea>

Add a title attribute to provide any additional instructional text:
```
<textarea … title="Field Label: 50 Characters Remaining">
```

Use ARIA's describedby attribute to attach any instructional text to the control:

<textarea aria-describedby="mltbHelpText" …>
<div … id="mltbHelpText"><span … >50</span> Characters Remaining</div>

Add ARIA's role attribute to the character counter so that it will be read by the assistive software:
```
<div … id="mltbHelpText" role="alert"><span … >50</span> Characters Remaining</div>
```

One thing you'll notice is different for the multi-line text box is that we have a character counter. Let's look at the JavaScript used to create that counter:

input_controls.js (excerpt)

/**************************************/
/*   MULTI-LINE TEXT BOX     */
/*   CHARACTER COUNTER  */
/**************************************/
var pageTitle = document.title;

$(".counter").each(function () {

    /* Find & Store Count/Input */
    var $count = $(".count", this);
    var $input = $(this).prev().find("textarea");
    var $label = $(this).prev().find("label");
    var maxCount = $count.text() * 1;
…
        if (before != now) {
            $count.text(now);
            $input.attr("title", $label.text() + " " + now + " Characters Remaining");
        }
…
    /* Listen for Change */
    $input.bind("input keyup paste", function () { setTimeout(update, 0) });
    $input.bind("focus", function () { iCount = setInterval(update, 200); });
    $input.bind("blur", function () { 
        clearInterval(iCount); 
        document.title = pageTitle; 
    });
});

Let's break this code down:

Manipulate the textarea's title attribute to show the number of characters remaining:

/* Find & Store Count/Input */
var $input = $(this).prev().find("textarea");
…
$input.attr("title", $label.text() + " " + now + " Characters Remaining");

Use the setInterval and setTimeout functions to ensure that voice-recognition users can modify the counter:

/* Listen for Change */
$input.bind("input keyup paste", function () { setTimeout(update, 0) });
$input.bind("focus", function () { iCount = setInterval(update, 200); });
$input.bind("blur", function () { clearInterval(iCount); document.title = pageTitle; });

Radio Button

default.htm (excerpt)

<span id="radioQuestion">Question?</span><br />
<input aria-labelledby="radioQuestion radioLabel" type="radio" name="radioseries" id="radio1" title="Question? Radio 1" />
    <label id="radioLabel" for="radio1">Radio 1</label>
<input type="radio" name="radioseries" id="radio2" />
    <label for="radio2">Radio 2</label>
<input type="radio" name="radioseries" id="radio3" />
    <label for="radio3">Radio 3</label>

Let's break this code down:

Add a <label> tag around text that directly corresponds to the control:

<input … type="radio" id="radio1" />
    <label for="radio">Radio 1</label>
<input … type="radio" id="radio2" />
    <label for="radio2">Radio 2</label>
<input … type="radio" id="radio3" />
    <label for="radio3">Radio 3</label>

Add a title attribute to the first radio button to tie-in the question:
```
<input … id="radio1" title="Question? Radio 1 " …/>
```

Use ARIA's labelledby attribute to the first radio button to tie-in multiple pieces of text:

<span id="radioQuestion">Question?</span><br />
<input aria-labelledby="radioQuestion radioLabel" id="radio1" … />
    <label id="radioLabel" …>Checkbox 1</label>

Input controls are highlighted when the user has focus on them

Visual Inspection

Tab to the input control (e.g., check box, drop-down list box, etc.)
Verify focus for each control is found as described in the table below:

Input Control	Focus is...
Check box	on the box or box's label text
Drop-down list box	on the list of items
File input box	on the input box
Single line text box	on the text box
Multi-line text box	on the text box
Radio button	on the button or button's label text

Instructional text is properly associated with an input control
Web Accessibility Toolbar
1. Select Structure - Fieldset Labels
2. Verify label is attached to its input control (e.g., check box, drop-down list box, etc.)
3. Select Doc Info - Show Titles
4. Verify titles' contain the label and instructional text
NOTE: a check box or radio button should ONLY have a title on the initial box or button in the series.

Input controls are highlighted when the user has focus on them

NO TEST METHOD...

Instructional text is properly associated with an input control

JAWS

Tab to the input control (e.g., check box, drop-down list box, etc.)
Verify each control is spoken as described in the table below:

Input Control	What is spoken...
Check box	first box - question and label text remaining boxes - label text
Drop-down list box	label, first list box item and instructional text
File input box	label and instructional text
Single line text box	label and instructional text
Multi-line text box	label and counter text
Radio button	first button - question and label text remaining buttons - label text

NOTE: for a file input box JAWS will provide additional instructions on the control's usage.

Input Controls

Example Download New Window

Check Box

Drop-Down List Box

File Input Box

Single Line Text Box

Multi-Line Text Box

Radio Button

Example

Download

New Window