Annotated Inaccessible Survey Page - Before and After Demonstration

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