Properly Creating Forms

Forms have several required components in order for people with disabilities to use and understand them.

All fields need to have a label associated with them.
Checkboxes and radio button lists should be used in fieldsets.
Drop downs can be further organized by option groups.
Multiple select menus should not be used.
Make sure all required fields are clearly marked.
Include instructions for specialized input fields, ex. Phone Numbers and Dates

This is what a screen reader sounds like reading a properly created form.

Transcript of audio file.

This is what a screen reader sounds like reading a poorly created form.

Transcript of audio file.

First Name: *

Last Name: *

Phone: 605-773-5555

Select your pizza toppings: Ham
Pepperoni
Mushrooms
Olives

Choose a shipping method: Overnight
Two day
Ground

Choose your favorite city?

Comments:


        <label for="lastname2">Last Name</label>: <span class="req">*</span>
        <asp:TextBox runat="server" type="text" name="lastname2" id="lastname2" ></asp:TextBox>
        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2" SetFocusOnError="true" Display="Dynamic" 
        ErrorMessage="*Required" CssClass="req" ControlToValidate="lastname2"></asp:RequiredFieldValidator>
           

        <label for="phone2">Phone</label>: <em>605-773-5555</em>
        <asp:TextBox runat="server" type="tel" name="phone2" id="phone2" ></asp:TextBox>

    
        <fieldset>
            <legend>Select your pizza toppings:</legend>
            <input id="ham2" type="checkbox" name="toppings" value="ham">
            <label for="ham2">Ham</label>
            <input id="pepperoni2" type="checkbox" name="toppings" value="pepperoni">
            <label for="pepperoni2">Pepperoni</label>
        </fieldset>

        <label for="favcity">Choose your favorite city?</label>
            <select id="favcity" name="favcity">
                <optgroup label="Asia">
                    <option value="3">Delhi</option>
                    <option value="4">Hong Kong</option>
                </optgroup>
                <optgroup label="Europe">
                    <option value="1">Amsterdam</option>
                    <option value="5">London</option>
                </optgroup>
                    
            </select>
           

        <label for="commentsid">Comments</label>:
        <textarea id="commentsid" name="commentsid"></textarea>
        

        <input type="submit" id="btn_Submitid" value="Submit" />