TEXT Labels
Make sure every form field has a visible label.
- A placeholder in the field that disappears when the user types information is not a substitute for a permanent label.
- The label should make it clear which input is expected in the field and if it is mandatory or not.
- The label should indicate the expected format of dates.
- Ideally the label should be positioned visually near the field.
Technical implementation
In order to be usable with a wide variety of assistive technology, think about the following points when coding a form:
- Connect the labels with the form fields in the code.
- Standard (native) form elements are automatically accessible. Use standard form elements instead of custom made ones.
- If you code custom elements, their behaviour must be identical to the standard ones, on all devices, and with all interaction methods.
Form submission and validation
- A form must have a visible submit button with a meaningful label.
- Interactions with form fields (checking a checkbox, selecting in a combo box) should not trigger the submission of the form because that is not predictable.
After submission of a form:
- It should be clear for all users whether the form was successfully submitted or not: use text to give this feedback (not only colour) and make sure the feedback is visible for everyone (manage focus if needed).
- Error messages should specify the nature and location of the errors. They can be located at the top of the form or inline. Make sure the fields to be corrected stand out: don’t use only colour.
For forms containing personal data or financial information, make sure the user can double check the information before submitting, or correct the information after submission.
No Captcha
Avoid using graphical or audio captchas to block SPAM. Many users will not be able to decipher the code they have to copy.
Instead, use other techniques that will not be a burden to the users: you can for example use the Honeypot technique (a hidden field that only bots will fill out) or measure how much time has passed between the page loading and the form being submitted.
For more information about avoiding CAPTHA’s, read CAPTCHA-less security by Karl Groves