Form fields
Posted 12mnths agoPhilo Front end 2 Comments
What are some best practices that follow WCAG accessibility guidelines on the form fields to prevent errors and assist users in filling out the form correctly?
Comments
-
0 up votes 0 Down votes
-
0 up votes 0 Down votes
To follow WCAG accessibility guidelines on form fields and prevent errors while assisting users in filling out the form correctly, the following best practices should be considered: 1. Provide Clear Instructions: Include overall instructions that apply to the entire form before the <form> element to ensure they are read aloud by screen readers before switching to "Forms Mode." Additionally, provide in-line instructions within the labels of the form to assist users in filling out the fields correctly 2. Support Keyboard Navigation: Ensure that the form can be easily navigated using a keyboard, as people with impaired vision or motor function rely on keyboards to navigate online forms. The tab key should allow users to jump between links and form controls 3. Use Clear Visual Labels: Every form field should have a corresponding label, and if a label must be hidden, use a method for visually hiding content that keeps the label accessible to screen readers 4. Provide Error Messages: In case of any errors in the form, provide clear and descriptive error messages to assist users in correcting their input 5. Avoid Horizontal Layout Forms: Unless necessary, it is recommended to avoid horizontal layout forms, as they can be challenging for some users to navigate.
Unleash Your Voice, Amplify Accessibility
Empower Your Voice, Share Your Topics on Accessibility, and Ignite a Change in web content
Hello,
I will add some more recommandations.
to assign the role alert to the box in which appear error message. It will force those message to be said by screen readers when they will appear.
If the form is the main attraction of the current page, to automatically bring the focus to its first field when the page is loaded. Generally it is done by assigning the attribute autofocus to that first field. E.G: identification form, registration forms, etc.
to not forget to indicate mandatory fields by:
Assigning to those fields the attribute "required";
putting a star "*" at the beginning of the text of the label associated to those fields.