Designing and Building Accessible Forms
Published: | No Comments
Reading Time: 3 minutes
Forms – How we Interact with the Web
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?
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'
- How to Build an Accessible WordPress Theme - Apr 28th, 2019
- Accessibility Checklist - Apr 7th, 2019
- Dragon Naturally Speaking Video 9 – Internet Forms - Mar 13th, 2014
- Video: How Do I Know My WordPress Website is Accessible? - Mar 5th, 2014
- Accessible Forms – Grouping Elements Together With Fieldset - Oct 11th, 2011
- Accessible Forms – Grouping Options With Optgroup - Aug 24th, 2011
- Accessible Forms – Selects or Dropdowns - May 24th, 2011
- Accessible Forms – Checkboxes and Radio Buttons - Apr 26th, 2011
- Accessible Forms – Should Every Input Have a Label? - Apr 15th, 2011
Share this page (Links open new windows/tabs)
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: State of the Browser – Useful Links
Next post: Accessible Forms – Should Every Input Have a Label?
