This page uses scripts!!!

W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Inaccessible Survey Page Before and After Demonstration

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

Demo starts here

Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner.
  Traffic: Construction work on Main Road Today:
Copyright © 2012 W3C® (MIT, ERCIM, Keio)


Note 01: Instructions necessary for form completion are missing

Instructions necessary for form completion, especially regarding any required fields, are missing.

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 not grouped within the code

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

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 not associated with its label

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

<input class="lign" type="radio" name="res" value="1">

Success Criterion 3.3.2 - Labels or Instructions
General 131: Providing descriptive labels

Back to demo

Note 04: Select box is missing caption

Select box is missing caption using the title attribute or label element.

<select name="cc"> ... </select>

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

Back to demo

Note 05: Select box not easily usable by keyboard

The items in this long list are not grouped to facilitate effective use by keyboard.

Note: The items in this list are sorted by country rather than by city, making it more difficult for users to complete the requested task.

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: Reading sequence not meaningful

The sequence of labels and input fields does not match the visual order and is not correct when the form is navigated by keyboard. The sequence is as follows:

Name: [radio button] Mr. [radio button] Mrs. [text input] [text input] [text input] eMail Address Retype eMail

Note: The first [text input] is for "eMail Address", the second for "Name", and the third for "Retype eMail" but this is not clear because the form fields are not associated with their labels.

Success Criterion 1.3.2 - Meaningful Sequence
Failure 49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
Success Criterion 2.4.3 - Focus Order
General 59: Placing the interactive elements in an order that follows sequences and relationships within the content
Success Criterion 3.3.2 - Labels or Instructions
General 131: Providing descriptive labels

Back to demo

Note 07: Reading sequence not meaningful

Data in this table is organized using document structures such as the p element rather than table structures such as the th and td elements, so that the order of data cells does not make sense to some readers.

<td rowspan="4" bgcolor="#ffffff" style="border-right: 1px dashed silver;">
<p style="background:#DBDBDB;padding-top:3px;padding-bottom:2px;"><br></p>
<p style="margin-bottom:0px;padding-top:3px; padding-bottom:5px" align="right"><strong>love it</strong></p>
<p style="margin-top:5px;background:#DBDBDB;padding-top:3px; padding-bottom:4px" align="right"><strong>hate it</strong></p>

Success Criterion 1.3.1 - Info and Relationships
  • Failure 43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
  • Failure 2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
  • HTML 51: Using table markup to present tabular information

Back to demo