Web Design Wikiclass | Tutorial / Web Standards: Accessible Forms

Overview: This tutorial gives you some activities and readings about Web forms accessibility.

Activity 1:

Make an HTML with the following code

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <title>Build An Accessible Form</title>

</head>

<body>

<h1>Example Form</h1>

<form action="example.php">

<ol>

<li>

<label>Name:</label>

<input name="name" type="text" />

</li>

<li>

<label>Email address:</label>

<input name="email" type="text" />

</li>

<li>

<label>Telephone:</label>

<input name="phone" type="text" />

</li>

<li>

<label>Address 1:</label>

<input name="address1" type="text" />

</li>

<li>

<label>Address 2:</label>

<input name="address2" type="text" />

</li>

<li>

<label>Suburb/Town:</label>

<input name="suburb" type="text" />

</li>

<li>

<label>Postcode:</label>

<input name="postcode" type="text" />

</li>

<li>

<label>Country:</label>

<input name="country" type="text" />

</li>

</ol>

<input type="submit" value="Begin download" />

</form>

</body>

</html>

[Get Code]

Use the WAVE - Web Accessibility Evaluation Tool to check what you need to do to make the form more accessible.
Readings for you:
Creating Accessible Forms - WebAIM
Accessible Forms - Web Usability

(Q1) How many accessibility errors does WAVE detect? What do you need to do to make the form more accessible?

Activity 2:

Edit the HTML in Activity 1 to make it more accessible

(1) Label form element by adding <label for="xxx">

(2) Add id field in each form input

(3) Group the form elements into three main sections: Contact Details, Delivery Address, and Submit section

          <fieldset>
            <legend>Contact Details</legend>
            ... the first three elements
          </fieldset>
          <fieldset>
            <legend>Delivery Address</legend>
            ... the other five elemenets
          </fieldset>
          <fieldset>
          ... the submit button
          </fieldset>

(Q2) Explain the functions of id attribute and name attribute in each input with a Web form?

Use the WAVE - Web Accessibility Evaluation Tool to check your revised HTML code.

(Q3) Can you pass the accessibility test now?

Activity 3: Style the Form with CSS

Apply general form style with the following basic CSS

        fieldset {
        margin: 1.5em 0 0 0;
        padding: 0;
        }
        legend {
        margin-left: 1em;
        color: #000000;
        font-weight: bold;
        }
        fieldset ol {
        padding: 1em 1em 0 1em;
        list-style: none;
        }
        fieldset li {
        padding-bottom: 1em;
        }
        fieldset.submit {
        border-style: none;
        }

When you complete Activities 1 to 3, you have have the following:

Activity 4: Further refine the form layout

Left-aligning text labels, styling legends and fieldsets with the following CSS

          label {
          float: left;
          width: 10em;
          margin-right: 1em;
          text-align: right;
          }

          fieldset {
          float: left;
          clear: both;
          width: 100%;
          margin: 0 0 1.5em 0;
          padding: 0;
          border: 1px solid #BFBAB0;
          background-color: #F2EFE9;
          }

          legend {
          margin-left: 1em;
          padding: 0;
          color: #000;
          font-weight: bold;
          }


          fieldset.submit {
          float: none;
          width: auto;
          border-style: none;
          padding-left: 12em;
          background-color: transparent;
          }

(Q4) What do you do to make your HTML code use the above style sheet?

Activity 5: Validation

Validate your structural language, presentation language, and accessibility with the following online services.

The W3C Markup Validation Service

The W3C CSS Validation Service

WAVE - Web Accessibility Evaluation Tool

(Q5) Can you pass all the validation? Explain your situation or problem if not.