Well-formed forms

By Diana Pounds
October 20, 2016

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. 

Make lucid layouts

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.

Easy-to-follow form



 

Accessible forms can look good, too

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.)


 
  

Use the 'label' tag

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.

FOR CODERS

Label tags in HTML

How to insert label tags

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.

Use fieldset and legend tags to group items

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.

Choose your favorite campus icon 
 
 

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.

FOR CODERS

Fieldsets and legends in HTML

How to insert fieldsets, legends

Fieldsets and legends can be set using content management systems' form builders or inserted directly into the code.

Don't use placeholders

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.

Placeholders without labels

   

Placeholders with labels

  

Even when they're accompanied by labels, as in the second example, placeholders create accessibility and usability issues:

  • Some users mistakenly believe input fields with placeholders have already been filled and ignore them
  • Some placeholders must be deleted before users can fill the fields
  • Some placeholders disappear as soon as users begin typing in an input field. This creates issues for those who get distracted while form filling or simply have short-term memory issues
  • The traditional light gray placeholder text is hard for many to read  

Good ways to check forms

Try tabbing

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?

Run the accessibility test

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. 

Accessibility assist

Have questions? Contact web accessibility coordinator Zayira Jordan, zjordan@iastate.edu, 294-0982.

Related stories