Digital accessibility is achievable only if every facet of web design is accessible to everyone. Though when you start designing an accessible website, your focus stays on WCAG standards. However, despite adhering to defined guidelines, there are chances of missing something. That missed factor can become a reason behind the inaccessibility of your website; if not fully then partially.
Lately, the US government has made it compulsory to adhere to accessibility guidelines. But then also there are a profound number of websites/applications that are inaccessible.
Just like other facets/elements of a website, forms are also an integral part of website accessibility. They can be placed for registration, business query/quote, orders, surveys, etc. and in case of their inaccessibility, you will lose potential customers or sale. Thus, creating accessible forms is equally important.
This article will help you to make your website forms accessible to everyone.
YOU MAY ALSO LIKE: Accessible Audit of your website
Tips to make accessible forms!
Creating accessible forms using HTML is simple. If you are following some of the best practices for form creation, your website/application will be having such forms that are accessible to everyone.
Keyboard navigation should be perfectly working!
As we know that many people who suffer from vision or any sort of motor impairment, use keyboard navigation to fill online forms. Moreover, there are several users who don’t have any such physical problems but prefer using keyboards only to navigate through. In keyboard navigation, the tab key helps users to jump between different links and sections.
To ensure tab key execution properly, you should use
Semantic HTML Form Elements
Semantic elements are code that clearly show their purpose for instance <form> or <button>. So, the tab key will automatically move between all the form fields if you will code a website with correct semantic HTML elements.
However, if you will use JavaScript, non-semantic elements will not be able to act properly, and keyboards or screen readers will not interpret the form fields correctly.
Focus style
There should be visible cues that help users to know on which form field tab is selected. For instance, if a user selects a field using the tab key, it should get highlighted by a visible color. The below form from Skynet Technologies ‘Contact Us’ page shows how a field is selected through tab key and the field is clearly visible since it is highlighted with different color.
And make a note that focus styling doesn’t harm your interface design. However, it enhances the look if you choose the right color contrast.
Use clear visual labels to instruct the number format!
In forms, there are fields that need to be filled with numbers such as phone numbers, those fields should not have placeholder light-colored text because they create trouble for users who have low vision issues. They cannot distinguish light-colored text and the form field because of low contrast. Also, screen readers don’t detect placeholder text.
The text also disappears once the user selects the field. Thereby, they might find it difficult to remember text. Thus, this design is not advisable when it comes to accessible website forms. Instead of the above-shown design choose
Or
These designs have absolutely clear text and instructions that are clearly visible.
Always consider screen readers while coding forms!
Each label tag (<label> and </label>) should be written in a way that makes your form accessible via screen readers. Also, don’t forget to make the label clearly visible.
So, when you make a label with text formatting,
<b>Full Name</b> <input type="text" name="name" id="full-name">
Screen readers render it like,
Here, screen readers will not be able to connect the text with the form field. Therefore, use <label> to connect these two (text and form field) by following the below-given methods.
You can connect form field <label> with <input> by matching the label's for="" attribute with the input's id="" attribute.
<label for="full-name">Full Name</label> <input type="text" name="name" id="full-name">
Or code the input within the <label> tags.
<label> Full Name <input type="text" name="full-name"> </label>
YOU MAY ALSO LIKE: Screen Reader Accessibility
Instructions for screen readers can be given using ARIA labels!
ARIA is nothing but HTML attributes that contain instructions and information for screen readers. So, these attributes can be used to make labels clearer. However, you should use it only if native HTML is not making accessible labels. ARIA attributes help to make forms available to users who rely on screen readers to hear the form.
For instance, a field “Search” that is clearly visible, but to make it readable by screen readers, you need to use ARIA attributes:
<input type="text" name="search" aria-label="Search"> <button type="submit">Search</button>
ARIA attributes and native HTML both helps in providing accessible labelling, it's just that in some places you need to use HTML and some labels require ARIA attribute.
Similarly, the ARIA attribute can also be used to provide instructions.
<label for="DOB">Date of birth:</label> <input type="text" name="birthdate" id="DOB" aria-describedby="DOB-help"> <span id="DOB-help">MM/DD/YYYY>/span>
It looks like this:
Here, the attribute aria-describedby directs screen readers to use matching input as a description, which is id=”DOB-help”. And due to this ARIA attribute, the screen reader will announce the value “MM/DD/YYYY” associated with the designated id.
And there are many more attributes. Read ARIA documents to know more about these attributes.
YOU MAY ALSO LIKE: Multiple Language Website Accessibility
‘Fieldsets’ and ‘Legend’s to structure multiple choice options!
Multiple choice questions are fields in the form that require logical structure and to do that <fieldset> and <legend> tags can be used, especially if questions have radio buttons or checkboxes.
If you will not use these tags, people relying on screen readers might not get to know questions with correct options.
Here is to know that <fieldset> tag is used to convey the information that a group of inputs belong together, and the <legend> tag works as a label for that group of inputs.
In the absence of <legend> tag in your code, the screen reader will be only reading the labels for each input such as cat, dog, elephant, and monkey, and not the question. So, if a visually impaired user will listen to an incomplete question or confused text, how they will be able to answer the question?
Thus using <fieldset> and <legend> tags in code becomes essential if there are multiple-choice questions in the form.
Other than these practices, you may also try a few like,
- Avoid using drop-down menus because they are difficult to operate and users suffering from motor issues can find it problematic.
- Don’t use icon fonts since they are not readable via every software or assistive technology.
Don’t rely only on visual clues to indicate error messages. Instead, write helpful messages that can help users to understand what mistakes they are doing for instance,
YOU MAY ALSO LIKE: ADA Tax Credit
Wrapping up
The above-given tips are to help you to create accessible website forms and improve the user experience of your website. Don’t just add forms without focusing on their accessibility. They can be one of the significant reasons for increased bounce rates and decreased conversions. Identify your website’s accessibility barriers and fix them to outreach your audiences.
Skynet Technologies, an associate member of the International Association of Accessibility Professionals, is dedicated to fostering global accessibility. Partner with us for a seamless website WCAG accessibility remediation including audit, ADA compliant website design, remediation, maintenance, consulting, training, and security monitoring services. Contact us at [email protected] or complete the form for further details.
