Forms are used for many types of interactions on the web. When referring to form accessibility, it means that all people with a disability are able to complete forms. There are many key elements to consider when creating accessible forms.
Logical Layout
Forms should be organized in a logical manner. Instructions, cues, required form controls, control formatting requirements, etc. should be clearly identified to users. Provide clear instructions about what information is being requested for each form control. Indicate required form controls with an asterisk and/or the word “required”.
Keyboard Accessible
Many disabled users can only use a keyboard to navigate and use the web due to their disability. screen readerand mobility disabilityusers, for example, navigate through forms using the “Tab key”. This is why it is important that you ensure your forms are keyboard accessible. There are some things that can make forms inaccessible with a keyboard, the most common of which is JavaScript. When using JavaScript to manipulate form data, set focus, change form elements, or submit forms, be sure to test the form to ensure it will be accessible via a keyboard. It’s good practice to always test your form for keyboard accessibility, no matter how it’s implemented, before releasing it.
Associate Form Labels with Controls
Text labels should describe the function of each form control. Place the form label on top or to the left of its respective form control. For check boxes and radio buttons, place labels to the right of the controls. Sighted users should be able to visually associate a text label with its corresponding form control. Non-visual users cannot make this visual association. Labels can, however, be associated programmatically with form controls using HTML markup. The
NOTE: Any non-label text content between the form controls is usually skipped over by screen readers. This is because screen reader users typically navigate a form by pressing the “tab” key to jump from form control to form control. Be sure to include important cues or instructions in associated labels or at the beginning of the form.
CAPTCHAS
CAPTCHAis another form element that is an issue for visually impaired and non-visual users and should be avoided if possible. Most of the time non-visual users have a difficult time understanding the audio CAPTCHA provided due to poor sound quality. Visually impaired users have a difficult time correctly identifying the letters and characters in the CAPTCHA due to the text type of the CAPTCHA’s contents. One solution for CAPTCHA is use a JavaScript checkbox that says something like, “I am a human”, or “I’m not a Robot”.
General Considerations
- When drop-down boxes are in a form, it’s good to keep them static. This is because screen readers may have a hard time accessing all of the options in the drop-down if it is not properly coded. If drop-down boxes are not coded to remain static, a drop-down box will refresh when a screen reader user arrows down to the first option in the box. This results in a screen reader user having to open the drop-down box and arrow down to the next option, possibly multiple times before they encounter their desired selection.
- It is also important to keep in mind that if you have a time limit for completing forms, provide an option to adjust, or extend the time limit in being able to complete a form. Another option is to have a save and resume feature if it’s a long form. This makes it easier for sight, mobility, and cognitive related disabled users to go back and completed at a later time.
Related Articles
Web Accessibility: Where to Begin
Motor Skill-Related Disabilities: Web Development Tips for Accessibility
Tips and Tricks for a More Accessible Website (Ideas from the Users)
Leave a Reply
You must be logged in to post a comment.