An Example Collection of Form Controls

Contact Us or call 1-877-932-8228
An Example Collection of Form Controls

An Example Collection of Form Controls

  • Techniques ensure meeting the Section 508 requirements:
    • Make sure prompting text is physically close to the associated form control
    • Always use the label element to specifically associate the prompting text with the input element
    • Use the title attribute on the input element to specify the purpose of the control if the on-screen text is not adequate.

The following is a screenshot of a section of the page encountered when placing an order on Amazon. cart page, screenshot

There are five input controls shown in the screenshot of the cart page. If those were marked up correctly as we have discussed in this lesson, then screen readers would provide the correct prompting information for each control. Because the prompting information is awkwardly placed or nonexistent, screen readers have a tough to impossible time figuring out what to say. Here is a table of how each control should be labeled (the first column), and the way Window-Eyes and JAWS read the form controls in normal "web mode" (columns 2 and 4) and in "forms mode" (columns 3 and 5). How Controls are Read by Screen Readers

The lesson from this table is that you must label all input controls with the label element or with the title attribute; if you do that, blind customers can proceed with confidence when interacting with your site, whether searching for information or entering important personal data like credit cards or phone numbers.