Skip to content Skip to footer

Creating accessible forms

Article Content
  • Why making forms accessible is important for users with (ADHD, Dyslexia, and memory conditions)
  • How to create a label for forms.
  • How to add a placeholder for forms.
  • How to add a further context to a form with aria describedby.

As you start to build more complex websites, you will find for multiple reasons, you need to start including forms. Forms need to be used for a variety of different purposes, ranging from search forms to enable people to search for your website, contact forms so people can get in touch with you, to payment and address forms in which users need to import personal information.

The importance of making forms accessible

When used, forms can play an important role in the functionality of the website. If for example, your website’s purpose is to sell a product, its usefulness is diminished if users cannot comfortably use the form required to import their address details and personal information needed to make a payment. The accessibility of forms is therefore crucial; if the user becomes frustrated when using the form, they may give up on the process entirely and visit another site. Most importantly, it is not fair to disadvantage certain users over others. You therefore need to make sure that your form works just as efficiently for users using a screen reader, or the users with cognitive disabilities such as ADHD or memory conditions such as dementia, who may find using forms challenging because of the attention and focus required.

Creating a Label for forms.

The first step in ensuring that a form is accessible is to make sure that it is labelled correctly. Labelling is a crucial component of accessibility design and development, as it provides a means of signposting without having to rely on visual cues. (You will have discovered this if you read our article on alt tags available here) . To create a visual label, you can use the tags as shown below,

code of form with Just a label
Form opening and closing tags, with label opening and closing tags inside.

However whilst this visual label is useful it unfortunately means that screen reader users are missing out. In order to make labels available to screen reader users, you need to use the ‘label for’ tag and tie it together with the ID of the form. Like in the example below,

Inside form tags, is two label tags. Inside of those label tags, is label for equals name. This is followed by input type equals text and id equals name.

How to add a placeholder

To provide the user with more information as to the type of data they need to import on a form you can use what’s called the placeholder tag. This will show the user visually and be available to screen reader users, guiding them to what is expected in terms of input on form. See the example below on how to code a placeholder tag,

Code for place holder and ID
Two form tags, label for equals name inside, and enter your name. This is followed by input type equals text, id equals name, name equals name and placeholders equals start typing your name here.

(Examples adapted from Ashley Firth read a summary of Ashleys book here, FireFox MDN Web Docs, with help also from the A11y Collective Course)

This is what a place holder looks like in action.

Search with Placeholder

Add even more context with a description.

You may want to add even more contextual information to a form, particularly if its a complex and there is a risk that the user could become frustrated without it. You can do this with a paragraph and an aria “describedby” label. Both the the paragraph and aria “describedby” need to be linked by the same ID, in order for the screen reader to be able to tell these two pieces of information are directly related to each other. The usual formatting for the rest of the form still applies. You can see example, below for how this would be coded. (example from the A11y Project course) Read this article on the basics of aria, for more on how aria “describedby” works.

Screenshot of Code for Form description.
Label Tags with the id new password-id. An aria descirby withinin the input tags has the same ID. The same ID is used again for paragraph tag, which has information about password characters inside.

The example above imagines a situation where a user may be filling out a password form, and may need to know the mininum number of characters the form requires, to avoid frustration when filling it out. This is exactly the sort of situation where you would need to use this method as this extra information would be hard to express with a label, and placeholder alone. In situations like this more context improves accessibility and the user experience for everyone.

Further developing your knowledge

The form techniques described in this article will help increase the usability and accessibility of your website. I would advise you to start with these techniques, to not immediately overwhelm yourself. However, if you want to go further, you may want to explore fieldsets and legends (You can read more about fieldsets here), as well as autocomplete (You can read more about auto-complete here) and if you are feeling really confident you can even look at aria-atomic. (Read about aria-atomic here) If you want to immerse yourself in form creation I would highly recommend both Ashley Firth’s book and attending the Ally Project accessible code course. (You can read about both Ashley’s book, and the accessible code course here)

Leave a Reply

Your email address will not be published. Required fields are marked *