Citylights Survey

This Week's Survey: More city parks - a pain or a gain?

Note 01: Instructions necessary for form completion are missing

Note 02: Radio buttons not grouped within the code

Note 03: Radio button is not associated with its label

Note 04: Select box is missing caption

Note 05: Select box not easily usable by keyboard

Note 06: Reading sequence not meaningful

Note 07: Reading sequence not meaningful

Which is your favorite city park?

None

Central Park

Grand Park

Jurassic Park 03

South Park

Other

Which city do you find is the greenest?

04 05

Do you want to receive a free newsletter?

Mr. Mrs. Name:

Email Address

Retype Email Address

Last Weeks's Survey Results

Annotations

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

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

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

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

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

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

love it

hate it

Pancreas

Spleen

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> </td>

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