Forms are well known for being the primary method of interaction with a website. So we’ll take a look at some gotchas and annoying trends in design to keep in mind when trying to make a HTML form accessible.
Placeholder text and labels
Some shortcuts I’ve found some designers (and some developers!) do is having an input placeholder be the label. Obviously this looks tidier, but it presents itself with a couple of issues.
You might think, for accessibility reasons you can use a hidden label element, or place an aria-label on the input itself.
I’m not a huge fan of placeholder text, however I do appreciate it has a purpose if used correctly. It’s sometimes used, mistakenly, to describe the input field, rather than to serve as an example of what sort of text should be going in it. If you click on an input with a placeholder but no label, how will you then know what to input? Secondly, space is quite valuable on mobile and you don’t want your input placeholder text to be chopped off by the limited width of the input field.
Using Flex with Tabs
Re-ordering your HTML elements is easy these days with flex and CSS. However, don’t forget that the flow of your HTML hasn’t actually changed. So if you’re moving around your input fields for different screen sizes, remember that your keyboard tabbing will still follow the flow of your HTML, not your CSS. Otherwise you’re selected input on tab press will go all over the place. The same thing kind of goes for CSS grids. You can, however, change the tab order of things for when you use a keyboard.
Working with dynamic forms
If you have fields that come and go, remember what a screen reader is likely to see. You’ll need to use things like aria-hidden on your input, to let your users know what’s up with your form. The shifting height of your form will also be a factor. You might be tempted to auto scroll / auto focus on the input. But remember that could become a jarring experience, especially if you’re browsing via a smaller screen size. With the advent of dynamic frameworks such as Vue and React, this is an important thing to consider when you need to make a HTML form accessible.
Form validation
I try to use a mixture of validation methods to get the message across that something’s wrong. Use of colour, descriptive text, or images can really help a user to get your form filled in more easily.
Forms are the most often used interaction on a website, and should be included in QA testing for any website.