Please fill out the form below.
Don't worry, the answers will not be sent or saved.
Most of you probably didn't understand what to write in the textboxes, even if you found them.
I write "most of you" because if you are using a screen reader you probably didn't have any problem with this form.
This is by design. I excluded sighted people on purpose to create awareness about the frustration that people with impaired vision or blindness experience almost every day when they try to use a website with little or no accessibility.
What I did:
Omitted labels for all textboxes
Removed the borders from all textboxes
Added aria-label attributes for all textboxes in order for screen readers to identify the fields.
Let us try again.
Please fill out the form below.
Don't worry, the answers will not be sent or saved.
This time most of you should be able to fill out the form.
I write "most of you" again because this time it is people with impaired vision or blindness, that use a screen reader, that has been excluded.
Ever so often forms on the web are designed just like this.
A screen reader will announce the textboxes as something like "unnamed textbox" or "untitled".
On the surface this form may seem correctly designed. There are labels for each textbox. The problem is that the labels haven't been programmatically conected to the textboxes.
Let's have another go. Third time is the charm.
Please fill out the form below.
Don't worry, the answers will not be sent or saved.
Now almost everyone should be able to fill out the form.
I write "almost everyone" because there could be accessibility issues that prevents people with other disabilities than impaired vision or blindness to fill out the form.
So what is the difference between this form and the previous form?
An id has been added in the code for every textbox
Every label has been connected to the corresponding textbox id in the code using the for attribute
This makes it possible for screen readers to announce the correct label for each textbox.
So just by making a small code effort it is possible to enhance the accessibility of almost all inaccessible forms on the web.
I hope this article has given you a better understanding and awareness of how people with impaired vision or blindness experience inaccessible web pages.
Hopefully you learned something about web accessibility aswell.