Designing and Building Accessible Forms

Published: | No Comments

Forms – How we Interact with the Web

Portion of form from amazon.co.uk

Forms are key areas of interactivity between web sites and their users. Even the simplest of sites may have a Search box or a Contact Us form with which people can communicate with site owners.

Other larger sites such as eCommerce sites like Amazon will rely on forms to enable their customers to make purchases and thus drive their businesses. And in social media and networking sites like Facebook, LinkedIn and Twitter every time someone posts an update they are interacting with a web form.

Unfortunately, from an accessibility perspective it is quite easy to get this powerful functionality wrong and make site interaction difficult or even impossible for users with disabilities.

This post introduces a series of posts that I’m going to be publishing on this subject. I’ll be looking in some detail at the best practices for making web forms accessible and also covering some of the common pitfalls that can rob web forms of accessibility.

Forthcoming posts on designing and building accessible forms

Here is a list of the areas I intend to cover in this series. I’ll be updating the  page to link to each post as it’s published.

Should every input have a label?

Check boxes, text boxes and labels

The short answer is yes.

This post discusses why labels are there, how to link them to the input boxes, and what happens if they’re missing.

Should every input have a label?: Read more

Grouping input fields with fieldset

How using the fieldset and legend grouping tags can make forms more accessible.

Accessible Forms – Grouping Elements Together With Fieldset: Read more

Grouping input options with optgroup

How using the optgroup element in dropdown boxes can make them easier to use and potentially more accessible.

Accessible Forms – Grouping Options With Optgroup: Read more

Checkboxes and radio buttons

Checkboxes are useful for selecting multiple options or confirming you’ve read something. Radio buttons are useful for selecting one item from a small list of options. But it’s easy to confuse their meaning for disabled users. This post covers the best approaches.

Checkboxes and radio buttons: Read more

Select or Dropdown Boxes

Useful for selecting from a larger list, but grouping of options can be useful for accessibility. Are multiple selection dropdowns accessible?

Select or Dropdown Boxes: Read more

Using forms in data table format

Some web applications present tables full of input boxes with radio buttons or check boxes to allow selection of rows/accounts etc. Can these ever be accessible?

Triggering functionality from input or changing values

Sometimes dropdown boxes are used to help with site navigation. Alternatively, extra questions can appear depending on your answer to a prior question. This post covers the accessibility issues and solutions.

How disabled users interact with forms

Different disabilities bring different challenges with web forms. This post will cover how disabled users interact with form elements.

Plain text within forms

If your form has some important text placed in between input boxes do you know for certain that everyone knows it’s there? What are the best practices for must read text?

Validation and indicating errors

It’s important to make sure any values entered into form fields are valid. It is also important to ensure that all users understand what’s gone wrong. This post covers the presentation of form validation problems in an accessible way. Some usability tips in here too.

Keep it simple

For the benefit of those with cognitive impairments it’s a good idea to keep your input forms as simple as possible.

Moving Forward – HTML5 Form Elements

Many websites are starting to appear with new HTML5 page elements. HTML5 offers some useful new elements, but how accessible are they at the moment?

Got any other suggestions?

If you’ve got any comments on any of these posts I’d be happy to hear them. Likewise if you feel I’ve missed anything out why not let me know. You can leave a comment using the comment form below.

Other posts tagged 'Forms'

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

There are no comments yet - would you like to leave one?

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.





Previous post:

Next post: