Today, I’m sharing some best practices and common pitfalls to avoid when building accessible HTML.
Common Mistakes to Avoid
- Communicate an error only using color as a visual clue. This will result in visually impaired people not being able to notice the problem.
- Using generic error messages. This will end with users having no clue about what’s wrong or how to fix it.
- Placing error messages far from the relevant input. Proximity to the input with the problem will allow users to quickly identify what’s wrong and fix it.
- Enforcing strict input rules without communicating them. We can not expect that our users will magically figure out which rules or requirements we are not communicating; a common scenario of this problem is with password fields.
- Not ensuring keyboard navigation is direct discrimination against a group of potential users.
- Using specific jargon or being too generic. Both extremes are harmful and do not allow users to understand what’s going on and what needs to be fixed.
- Using placeholders as the only label of an input. This is a fatal problem for many reasons: assistive technologies’ users will not be able to identify what the input is for, visual users will probably lack enough contrast, and we could go on.
Best Practices
- Explicitly linking the label to their inputs. This will improve the experience of visual users as well as assistive technology users.
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" placeholder="e.g. Taylor Swift"/>- Specify visually and programmatically when a field is mandatory.
- Provide clear instructions and/or examples when we ask to follow certain rules (like when we need phones or emails to have a certain structure).
- Provide real-time validation messages when necessary.
- Using the <fieldset> element to group related controls as checkboxes or radio buttons.
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster" value="K" />
<label for="kraken">Kraken</label>
<input type="radio" id="sasquatch" name="monster" value="S" />
<label for="sasquatch">Sasquatch</label>
<input type="radio" id="mothman" name="monster" value="M" />
<label for="mothman">Mothman</label>
</fieldset>As with anything in HTML, there isn’t a single correct answer for every problem; context is everything. However, following these best practices provides an inclusive foundation and ensures that the largest number of possible users can benefit from our content. Can you think of other tips to build an HTML form following best practices?
