Well-formed forms
Author: Diana Pounds
This is an archived story. The content, links and information may have changed since the publication date.
Author: Diana Pounds
Forms are behind almost every interactive thing we do on the web. When we search, log in to secure sites, pull down menus, take surveys or buy online, we're dealing with forms.
Those using screen readers suffer the most from poorly designed forms, but bad forms complicate websites for many others as well. Make your forms accessible for screen reader users and you'll improve their clarity for everyone. Here are the basics.
Forms should be well-organized. Users should move through the fields in a logical manner, instinctively understanding what input they're expected to provide. If possible, labels should precede input fields (blanks), because that's what most web users are used to. Mandatory fields should be described as such, with "required" appearing in the label.
The partial form below meets the lucidity test. It's simple (although not very attractive), and both people and screen readers should easily understand the layout.
An accessible form can be spruced up. This form is the same as the one above, with a tiny bit of styling added. (For more information on styling, check out this article on styling CSS forms.)
Filling in a form blank using a screen reader can be tricky business. If the screen reader doesn't know for certain what label applies to what input field, it makes a guess. Sometimes, the software guesses wrong. The form below, with labels and input fields stacked into various cells of a table, might easily be misread by a screen reader. As a result, the reader may mislead its user into, for example, typing a name in the blank reserved for hometown.
Fortunately, there's a simple solution. Label tags -- small bits of code wrapped around labels -- enable screen readers to correctly match labels and input fields. Essentially, the label tag and its field each contain the same "match" word.
If you're using a content management system to create web pages, use a form-building module or plugin that's accessible. Form-building tools that add label tags to fields include: Drupal's Webform and Wordpress' Gravity Forms. Your information technology specialist should be able to help you get these tools on your website. The Qualtrics survey instrument, available free to the ISU community, also allows for label tags.
Fieldset and legend tags help organize a form by grouping like items. Such orderliness is particularly helpful for those listening to screen readers voice through the form fields. A fieldset might enclose a personal information section (name, address, age, etc.) or a group of checkboxes like the box below.
The legend, in this case, "Choose your favorite campus icon," both identifies the group and helps form users know what they're supposed to do. Screen readers recite the legend before reading each checkbox item.
Fieldsets and legends can be set using content management systems' form builders or inserted directly into the code.
Placeholders (text hints inside the input box) often do more harm than good. In the first example below, the form designer has opted to skip field labels and rely on the placeholders ("enter name" and "enter email") to tell us what goes in the blanks. However, some screen readers don't read placeholder text. If there's no label, there's no way for screen reader users to know what the form requires.
Even when they're accompanied by labels, as in the second example, placeholders create accessibility and usability issues:
Screen reader users often tab their way through forms, listening to the reader call out the labels for each form field. Try tabbing your way through your form. Does the cursor move in a logical manner?
Accessibility testing tools can help identify problems on your forms. For example, they'll notice if you're not using a label tag. A good checker is Webaim.org's WAVE tool.
Have questions? Contact web accessibility coordinator Zayira Jordan, zjordan@iastate.edu, 294-0982.