back to CSUN 2007 presentations

Building Accessible Web Applications

Steve Faulkner

TPG (Europe)

The Basics: form control prompts

form control prompt examples - No prompt

No prompt

form control prompt examples - multiple actions

text input with multiple actions

The Basics: prompt placement

Before control; in left-to-right languages, either to the left or immediately above the control. Buttons are self-labelled prompts. Check boxes and radio buttons are special types of buttons, and so the prompt is part of the button (increases target area), and placed immediately after the control to show the semantic difference

Prompt Placement
ControlPrompt
text, text area, selectTo the left or immediately above
check box and radio buttonsImmediately after the control
buttonsself-labelled

The Basics: Implicit and Explicit Association

Implicit/Explicit Labels

Implicit

Explicit - Recommended

<label for="uname">Prompt:</label>
<input type="text" size="30" id="uname" name="uname">

Hybrid

<label for="uname">Prompt: 
<input type="text" size="30" id="uname" name="uname">
</label>
Implicitly positioned labels do not work correctly in IE6 and lower, and with some screen readers (JAWS 6.2; probably others, but don't know). The for attribute in the hybrid version makes it an explicit association. Implicitly associated labels are made available through MSAA, and are legal according to the specification, making this a user agent problem. Having said that, I don't like implicit associations. Semantically, a label is associated with its form control; it doesn't make sense to say the prompt is the parent, and the form control is its child. It would make more sense to say that the prompt is part of the form control, as they are in XForms.

The Basics: Option as a prompt

When there's no default option, it's useful to make the first option a prompt, but it should provide context, and the control should still have an explicit label (or title attribute). Relying on the first option as a prompt might work in some circumstances, but it soon breaks. For example, if a mistake is made, the user's selections should be retained. They now have a drop-down box whose label is a value that might not be accurate.

Basics: Multiple labels for a control

Use of hidden labels

Labelling of form controls in data tables

Product order form
code itemquantity price
123 pencil $1.00
124 pens $1.50

Labels increase click area

Grouping: fieldset and legend elements

Grouping: fieldset and legend - continued

Search This Site
filter by
<fieldset>
<legend>Search This Site</legend>
<label for="searchfor">Search for</label> 
<input id="searchfor" name="searchfor" type="text">
<fieldset>
<legend>filter by</legend>
<input type="radio" id="a" value="1"> <label for="a">television</label> 
<input type="radio" id="b" value="2"> <label for="b">radio</label> 
<input type="radio" id="c" value="3"> <label for="c">cinema</label>
</fieldset><input type="submit" value="search">
</fieldset> 

Use of the tabindex

Use of the tabindex - continued