The importance of accessible websites

Why is accessibility essential?

For a lot of us, an accessible website is a given. But did you know that between 15 and 20% of all website visitors don't have a care free experience online? This is usually due to a vision, hearing, motor or cognitive disability. But as developers, we believe that everyone has the right to an enjoyable experience online. Therefore, websites need to be user-friendly for those with and without a disability. Read this article to find out how you can create an optimal experience for all users, as a front-end developer.

First of all, some basic terms should be tackled. We start with A11y, which is pronounced as “Ally” and stands for Accessibility. When researching web accessibility, you will read about the Web Content Accessibility Guidelines (WCAG). This is a general set of guidelines and criteria to design high-quality, inclusive websites.

Next up: aria-attributes. These attributes should sound familiar to you as well. They are put in place to optimize the readability of websites for screen readers. Finally, it’s important to touch on the POUR principles, that focus more on website content. POUR represents four elements that need to be taken into account when developing a website: Perceivable, Operable, Understandable and Robust. You can read more about each principle here.

Sounds fair but where do I start?

The internet offers countless amounts of guidelines and best practices to make your website as inclusive as possible. When trying to get an understanding of online accessibility, an overload of reading material doesn’t help. Don’t worry, we’ve got you covered. 

Google’s A11ycasts are a good place to start.  This is a video series that elaborates on some important basic principles in a simple and concrete format. A second useful source is the checklist of The A11y Project, based on the criteria from the WCAG Guidelines. This list comes in handy to test the level of inclusivity of your own websites. In case you wish to learn more about the use of aria-attributes, MDN provides an extensive (but clear) overview. 

All very interesting but no time to fully dive into all the theoretical stuff? Say no more! Here are some key steps for you to get a head start today:  

• Make sure to maintain enough colour contrast between text and background. 

• Pay attention to the correct semantics and a logical order of your HTML.

• Give each image element an alt-attribute. 

• Add a corresponding label to all input elements. 

• Aim for a website that allows navigation with the tab key + always make it clear which element is being focused on.

Conclusion

We can hear some of you think: “This seems like a huge effort for something that most visitors will never even need”. Now, think about the number we mentioned at the beginning of this article. You can already expect that at least 15% of your visitors will be grateful for your 'accessibility functionalities'.

By focusing on accessibility, you are making a difference for those who are still being overlooked too often when it comes to user-friendly websites. So, as a front-end developer, you can build towards a future where websites will be accessible for each and everyone of us. Sounds great, doesn’t it? Because honestly: nothing more annoying than a complicated website!