Baby Steps Into Form Accessibility

Making forms accessible isn’t something hard to do, but most times, it gets overlooked as developers pay more attention to parts that get noticed by users who can see visual changes. But then again, there are users out there who rely on assistive technologies and accessible forms help them tremendously in completing their tasks without unnecessary hitches.

Let’s look at a basic form below. Creating an accessible markup for it can be achieved with just a few steps. Assign a for attribute to the label element and match it with its form element using an id. Simple right?

   <label for="message">Message: *</label>
   <textarea id="message" rows="10" columns="40"></textarea>
   <label for="email">Email:</label>
   <input type="text" id="email" />

There are times when your form layouts will get a little more complicated. For example, you might have a main label for a form section and sub labels to identify a form element. In this case, you might need to take a different route to achieve accessibility. A good approach to this issue is to use the title attribute on form elements – and yes, you can use the title attribute on almost all elements except for base, basefont, head, html, meta, param, script, and title.

This attribute offers advisory information about the element for which it is set. Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements.
W3.org

   <fieldset>
      <legend>Date of Birth</legend>
         <div class="input>
            <input title="Month of Birth" id="month" type="text" /><br />
            Month
         </div>
         <div class="input>
            <input title="Date of Birth" id="date" type="text" /><br />
            Date
         </div>
         <div class="input>
            <input title="Year of Birth" id="year" type="text" /><br />
            Year
         </div>
      </fieldset>

Why this approach? Think about it this way. For someone who’s not relying on a screen reader, it will automatically be obvious to them that the sub labels of month, day and year correspond to the date of birth label. But, a screen reader will not be able to make such a connection since you can only assign one for attribute for each label element. When the screen reader is left hanging, so is the user who is depending on his screen reader. You can probably circumvent this issue by removing the main label and assigning a longer sub label with a corresponding for attribute on each textbox, such as “Month of Birth”, “Day of Birth” and “Year of Birth”, but such a solution might be too much of a mouthful and might just make the interface busy. The title attribute on the other hand solves our predicament easily and elegantly. When no label is available, screen readers will speak the title attribute when the form element receives focus.

The title attribute also solves other issues that might plaque the interface developer. Say you have a site wide search textbox on your website and you have paired it together with an image button that is labeled “Search”.

Don’t use a heading to label the search area; instead use a “Search” button to the right of the box.
This is a small point, but there’s no reason to label the search box if there’s a “Search” button right next to it. Interaction design’s less is more principle tells us that extra elements in a dialogue distract users from the salient points and reduce their ability to understand an interface. (In other words, with less to consider, people understand more of what’s there.)
Jakob Nielsen

Point well taken Mr.Nielsen, but to make this more accesible, do one more thing. Add a title attribute to the search textbox and don’t forget the alt attribute on the search button.

If you are interested in learning more about the subject, the links below might provide more pointers.

• Creating accessible forms
• Creating accessible forms on the web

For the more adventurous, there is a Firefox extension called Fangs that emulates the output of a screen reader.