Some time ago, I was asked at work to Make sure the website is accessible. I had no clue what that task meant. Now I am trying to make my code accessible by default and would like to summarize some basics about web accessibility if you are just starting out.

What is web accessibility?

It’s about real people being able to use websites, apps, and digital technology. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

• perceive, understand, navigate, and interact with the Web
• contribute to the Web

Why should we care?

There are so many reasons for making the Web accessible but the main motivation is usually that most countries around the world have adopted the United Nations Convention on the Rights of Persons with Disabilities. It means that in many countries there is a legal requirement to make websites accessible. There are guidelines and standards that should be followed so the Web is actually accessible (WCAG, ATAG, UAAG - more about these in another post).

• Australia, Canada, The United States, and United Kingdom base their policies on WCAG 2.0
• The European Union bases the policies on WCAG 2.1

Basics checks

Browser extensions

Browser extensions are our best friends when trying to quickly check how accessible our site is. The checks are fast and work directly in your browser.

WAVE

WAVE extension provides a colourful showcase of accessibility errors, warnings, features etc. The only disadvantage is that the report adjusts your layout so it might get difficult to see what is actually going on.

axe

axe extension for Chrome and for Firefox works very similarly as WAVE. You can access it from the developer console. It does not change your layout but in my opinion, it might get a bit more difficult to actually find where the error is. Axe offers explanations and possible fixes (even more than WAVE) which is something I really appreciate.

ChromeVox screenreader

For more elaborate checks, you can use ChromeVox screenreader extension. It's probably a better idea to use a built in screenreader but I find ChromeVox very useful for quick checks. Be careful as having this extension installed might slightly improve your layout 😉

This is a post to get you started with some quick and dirty checks to improve your website's accessibility. Obviously, the best way is not to have to do this and start with accessible design and implementation right away. More about that in other posts.