Making your website more accessible to everyone

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.

In this article, we enumerate some of the easiest ways to improve accessibility that doesn’t require two days of fancy javascript coding.

Without further ado, let’s start with the accessibility tips.

Forms

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.

Tab index

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 <form role="form"> is not necessary and should be avoided. Because the form tag already uses the form role.

Bad use cases

• <form role="form">
• <main role="main">

Acceptable use cases

• <div role="main">
• Some times we have to make a div clickable: <div role="button"></div>
• Got a template that is using <div> for the navigation and you don’t want to edit the whole styling? <div role="nav">

If you want to search for unnecessary aria role tags in your html you can use the w3 validator tool.

Links

Try to give a good description to your anchors so visually-impaired users can easily understand where the link is going to.

<!-- Bad -->
<p><a href="">Click here</a> to see our hotel photo gallery<p>

<!-- Good -->
<p>See our <a href="">hotel photo gallery</a></p>

Outlines

Quite sure you sometimes removed those ugly blue outlines from a button because they didn’t match your minimalist design. Isn’t it?

Nobody is telling you that you shouldn’t do it, but be sure to apply another visual feedback to the element (like a border color) or implement a workaround to identify keyboard users and apply an outline to these users.

If you want to learn more about identifying tab users you can read this nice post from David Gilberston.

Images Alt attribute

Seems an obvious one but how many times did you put alt="hero" or alt="cta" in your landing page images?

Such a nightmare for a disabled reader to understand what’s going on there.

Imagine you are describing the image to a blind friend. When you got it, put that (or a resumed version if it’s too long) in there.

Colors

Color contrast

Not all are screen readers. And not all of us can see the same amount of colors.

So, when doing a new coat of paint to your website take a few minutes to check if your design colors can be easily distinguished for every person.

Here’s a little contrast ratio cheatsheet to have in mind:

Normal text

• Bad: less than 4.5:1 ratio
• Good: from 4.5:1 to 7:1
• Great: above 7:1 ratio

Large text

• Bad: less than 3:1 ratio
• Good: from 3:1 to 4.5:1
• Great: above 4.5:1 ratio

Modern design apps and browsers like Google Chrome already implemented a color contrast checker within its color picker. So it’s not an excuse anymore.

If your development tools or browser do not have a color contrast checker, you can use sites like color.review which provides a nice way to check and improve your color matchings.

Do not only trust color

When emphasizing interaction with the elements of your site, do not only trust color.
For example, do not only use colors to indicate a required form field. Be sure to complement the color design with some visual elements like icons, asterisks…

There are nice tools like Colorblind website filters which allows you to see your website as if you had one of the most common eye color anomalies.

This is all for the moment. We give you some time to breathe and implement some of these accessibility improvements to your site.