How to make your website accessible

I believe one of the most important things to consider when designing a website is its accessibility. Designing a website to be universally accessible allows products to be more widely used. In fact, Google's mission "is to organize the world's information and make it universally accessible and useful."

What is accessibility?

Some people may have special needs or have impairments that make it difficult to use some products. When you design your site with accessibility in mind, it will allow all kinds of users to use your product.

Some common impairments can include

• Visual
• Hearing
• Motor Skills
• Photosensitive Seizures

People with these kinds of impairments can enable special settings to help them use their devices more easily. I like to use VoiceOver when testing which is used by those with visual impairments. When VoiceOver is enabled, the device will read out text when an item is tapped.

How can I check how accessible my site is?

Chrome makes it super easy to run an audit of your site. In the developer tools, there is a lighthouse tab which will let you run an audit of the current page you're on.

It will list all the elements that need to be correct.

Keep in mind that only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

5 Simple Ways to Make Your Site More Accessible

1. Add Alt Text to Every Image

Alt text is what screen readers read out when an image is tapped. This will give the user some context as to what the image is.

<img src="https://imgur.com/d8dzF1V" alt="Picture of my 10 year old cat" />

2. Only One H1 tag on the Page

This is a common mistake a lot of websites have. I see a lot of people using more than one <h1> tag on the page. Reserve the h1 for for titles of or main topic of the page. This article explains some of the common usecases for h1, h2, and h3.

3. Use semantic html tags

Another common mistake is using the wrong html tag in the wrong place. Let's look at the following example.

<button onclick="navigateToHome()">Home</button>
<a href="/">Home</a>

While these two may look and act same, this won't behave the same when using a screen reader. The screen readers will actually announce the type of element you're touching. So when you're touching a button, the screen reader will announce "Home Button." Similarily, the screen reader will announce "Home Link" when you tap on the anchor tag. (What the voice reader announces will vary depending on the device and OS).

4. Preserve Functionality for Users Using a Keyboard

Some users do not use a mouse to navigate through your page. One way to test if all the elements on the page are reachable by a keyboard is to press the tab key.

Sometimes you might want to control the sequence in which elements should be focused. This can be achieved by tabindex. tabindex=-1 means the element cannot be reached by keyboard. A positive index means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. For example, tabindex=1 will be focused on before tabindex=2.

5. Use Aria Labels When Appropriate

There are times where you properly use semantic html tags, but you want assistive technologies to read something different. For example, a lot of websites use an "x" as a close button. An easy way is to use the "x" key.

<button onclick="close()">X</button>

The problem with this is that the screenreader will announce "X Button" which would be confusing for those who can't see the page. To get around this, you can use an aria-label which is basically like an img's alt text.

<button aria-label="Close" onclick="close()">X</button>

In the follow up example, the screen reader will announce the button as "Close Button" which is much more useful than "X Button."

Conclusion

Hopefully you now have a better understanding why we should design for accessibility. These key takeaways will both make your site more usable for more people, but it will also help search engines understand your site better. How accessible are your products? What changes have you made to improve the accessibility of your product? Share your thoughts and experience in the comments section below.