Let's talk about Web Accessibility
Most web applications are developed for users with no disabilities, under the assumption that all users have the same physical abilities and resources, when in fact it's the opposite. The circumstances of our users will vary from having internet issues to being physically disabled, and here is when Web Accessibility comes into play, so you can optimize your web app and adapt it to all audiences.
Web Accessibility (a11y for short) refers to designing/developing web apps so people with some kind of physical disability, situational disability, and socio-economic restriction (like low internet speed) can use them. Web Accessibility encompasses all disabilities that affect web navigation, including:
- 👁 visual
- 🧠 neurological
- 👂🏽 auditory
- 🖐🏽 physical
- 🗣 speech
The first time I heard about this concept, I was surprised by the number of people who are restricted to fully use web applications. My first guess was that around 1% to 5% percent of the population has a disability, but this was far from reality. According to the Centers for Disease Control and Prevention in 2019, 26% of the adult population in the United States is somehow disabled. Yes, Web Accessibility is not a luxury but a necessity.
As you can see, if you don't consider Web Accessibility on your web app, you will miss a lot of users. Also, remember that Web Accessibility will help you eliminate barriers for users with situational disabilities to interact with your application. Some examples of situational disabilities are:
- Older people with changing abilities due to aging.
- People using small screens (phones, smartwatches, etc.).
- People with broken bones or lost glasses.
- People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to the audio.
- People using a slow internet connection due to expensive bandwidth.
Now, let's work on how to assess and improve Web Accessibility. There are multiple ways to do it, but my favorite one is to use Google Chrome DevTools. Follow these simple steps:
- On your web app press F12
- Go to the Lighthouse tab
- Make sure Accebility is selected
- Press Generate report
The report will tell you what is wrong with your web app and it will guide you on how to fix the issues. Some recommendations that the report may give you are to increase the font size, change the background color to have better contrast, add alternative text to the images, and more. Another good way to test Web Accessibility in our web app is to disconnect the mouse and the screen and to navigate using a screen reader. I know it is hard, but it's definitely a good test.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee
