Okay, let’s be honest. Developing the perfect accessible website is too difficult and time-consuming. And of course, non-viable for solo developers or small companies. But there are some measures that you can easily implement to improve the navigation experience of visually-impaired and screen reader visitors.
Without further ado, let’s start with the accessibility tips.
Forms are one of the most common elements in a website. They are usually involved in important functionality in your website like sending a contact form or storing some data into the database.
Such great power comes with great responsibility. We should make our forms easily accessible to screen readers and visually-impaired users.
Form control labels
Be sure that every form control (input, textarea, select…) has a little happy label friend. You can do so with a for="" attribute in your label tag and a matching id="" attribute on your form control.
Yeah, but… Labels look ugly in my design.
Not an excuse. You can visually hide the label, and the screen readers are going to still be able to read them. Only be sure not to use display: none; or visibility: hidden since elements with those styling properties will be ignored by screen readers as normal browsers do.
You can play with opacity and height/width of the element to visually hide the label.
Did you know that you can use the tabindex="" attribute to set the order of tab navigation in your webpage?
If you are using a fancy layout be sure to set up a tab order for your form controls that makes easy to navigate through with the tab key.
Want to remove an item from the natural tab order but still maintain the focus() event? Then use a negative tabindex tabindex="-1" .
Fieldsets and legends
Mostly used for related input groups like radio or checkbox buttons. But you can also use it to group sections of your form controls.
For example, if the user is sending his personal and billing information through a form, you could make a fieldset for personal information and another for the billing details.
Accessible Rich Internet Applications
Aria tags are one of the most underrated accessibility elements in our html documents. Usually missing and sometimes overusing them.
The first rule is to try not to use aria tags. Just use the appropriate html tags such as header , footer or table since aria tags should only be used to add accessibility to html elements that aren’t natively accessible. This means, for example, that