W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Accessible Survey Page Before and After Demonstration

Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0

Demo starts here

Traffic: Construction work on Main Road

Today: Wednesday 25 January 2012, Sunny Spells, 23°C

Annotations

Note 01: Form instructions provided

Form instructions are provided, especially with respect to required fields.

<form action="" method="post"> <p>Fields are required if not otherwise noted.</p>

Success Criterion 3.3.2 - Labels or Instructions
General 184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

Back to demo

Note 02: Radio buttons are grouped within the code

Radio buttons grouped with fieldset element, and are described using the legend element.

<fieldset id="park"> <legend>Favorite Park</legend> ... </fieldset>

Success Criterion 3.3.2 - Labels or Instructions
HTML 71: Providing a description for groups of form controls using fieldset and legend elements

Back to demo

Note 03: Radio button is associated with its label

Radio button is associated with its label "none" using the label element.

<input type="radio" name="res" id="nn" value="1"> <label for="nn">None</label>

Success Criterion 3.3.2 - Labels or Instructions
  • General 162: Positioning labels to maximize predictability of relationships
  • HTML 44: Using label elements to associate text labels with form controls

Back to demo

Note 04: Select box has title

Select box is captioned using the title element.

<select name="cc" id="cc" title="cities of the world">

Success Criterion 3.3.2 - Labels or Instructions
HTML 65: Using the title attribute to identify form controls when the label element cannot be used

Back to demo

Note 05: Select box with improved keyboard usability

The items in this long list are grouped and sorted by city rather than by country to facilitate effective use by keyboard.

Success Criterion 2.1.1 - Keyboard
  • General 202: Ensuring keyboard control for all functionality
  • HTML 91: Using HTML form controls and links
  • Using unique letter combinations to begin each item of a list (future link)
Success Criterion 2.4.1 - Bypass Blocks
  • HTML 69: Providing heading elements at the beginning of each section of content
  • Providing keyboard access to important links and form controls (future link)

Back to demo

Note 06: Meaningful reading sequence

The sequence of labels and input fields are organized to make sense when they are read in the order they appear in the code. The input fields are associated with their labels using the label element.

<p id="namenewsletter" class="input">
<label for="n">Name:</label>
<input type="radio" name="t" id="mr" value"mr" title="title"><label for="mr">Mr.</label>
<input type"radio" name="t" id="mrs" value="mrs" title="title"><label for="mrs">Mrs.</label>
<input type="text" name="n" id="n" size="30" style="margin-left: 0.5em;"></p>
<p id="emailinput" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="em" id="em" size="20"><br><label for="em">eMail Address</label></p>
<p id="emailvalid" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="ev" id="ev" size="20"><br><label for="ev">Retype eMail</label></p>

Success Criterion 1.3.2 - Meaningful Sequence
General 57: Ordering the content in a meaningful sequence
Success Criterion 2.4.3 - Focus Order
General 59: Placing the interactive elements in an order that follows sequences and relationships within the content

Back to demo

Note 07: Table data has been properly structured

Data in this table is organized using corresponding table structures such as the th and td elements.

<th scope="row">hate it<th>
...
<th scope="row">hate it<th>

Success Criterion 1.3.1 - Info and Relationships
  • General 140: Separating information and structure from presentation to enable different presentations
  • HTML 51: Using table markup to present tabular information
  • HTML 63: Using the scope attribute to associate header cells and data cells in data tables

Back to demo