The following is a screenshot of a section of the page encountered when placing an order on Amazon.
There are five input controls shown in the screenshot of the Amazon.com 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).
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.
This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.