What is web a11y and why is it important?
Tags: a11y, webdev, sass
Published: 2020-10-01 13:20:00

The term **a11y** stands for accessibility. A11y is known as numeronym with 11 representing the count of letters between the first and the last letter of the word "accessibility". Some other examples of numeronym are W3C, Y2K, etc. 

## What is web a11y? 
The web is designed to work for all, irrespective of their hardware, software, location, language, physical disabilities or situational disabilities. In other words, it just means that the web should be accessible to all no matter what. 

> The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect. - Tim Berners-Lee, inventor of the WWW

Web a11y has been into the practice since the late 90s, but even 20 years after its inception, it is being treated as an added feature of the website. Making the website accessible, making it easy to use for all the people is an **[inclusive](https://en.wikipedia.org/wiki/Inclusion_(disability_rights))** practice. Every web engineer should make sure that their websites are usable by people with disabilities or impairments. 

## But why is it so important? 
The very same question was asked to me when I spoke at National Institute of Technology Goa in Jan 2020 (back when things were normal). And a few months before that, even I had the same question. 

Most of the young developers are clueless about it as there is no awareness around web a11y. Out of so many courses and sessions I attended on web development, not a single one shed light on accessibility. And this is the major reason why developers are not used to making their websites accessible.

According to the World Health Organization, there are more than 2 billion disabled people, that is 37.5% of the world's population. (2019 data [source](https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2019-facts-and-figures/))  

<ul>
<li>1.3 billion people are affected by some form of blindness and visual impairment. This represents 17% of the world’s population.</li>

<li>466 million people have a disabling deafness and hearing loss. This represents 6% of the world’s population.</li>
</ul>

And to help people with such disabilities use our website without any hassles and not to make them feel left out is the duty of web developers. In some countries like Australia, Canada, Ireland, Italy, Japan, Spain, Sweden, US and UK, digital accessibility is a right protected by law and depriving someone of access is illegal. 

## Okay. Then how do I make my websites accessible?
Disabled people rely on assistive technologies like screen-readers, braille displays, etc, to carry out tasks on the internet. Websites should be developed in a way that they are compatible with all such assistive technology. 

To make the websites accessible you have to use the semantic tags wherever required, use alternate text for images, use only 1 `h1` tag per page, have a right colour contrast, etc. Let me know in the comments below if you would like me to write a detailed blog on building accessible websites.

I have listed down three things that will help you in making the websites accessible. 

<ol>
<li>I have developed a <a href="https://github.com/salil-naik/a11y.css" target="_blank">CSS tool</a> that detects the accessibility errors on the website. All you need to do is link it to your page and it will show all the errors. The errors will disappear as you rectify them.</li>

<img src="https://dev-to-uploads.s3.amazonaws.com/i/g3tpuc28s2bxtqgulw58.png" alt="screenshot of the website showing a11y errors" />
<figcaption>The blured images and **A11Y:HREF should ...** indicates the a11y error on the website.</figcaption>

<li>You can also use <a href="https://developers.google.com/web/tools/lighthouse/?salil-naik-blog" target="_blank">Lighthouse</a> in Chrome Dev Tools to run the accessibility audits. It runs a series of audits against the page, and then it generates a report on how well the page did.</li>

<li>This <a href="https://www.a11yproject.com/checklist/?salil-naik-blog" target="_blank">checklist</a> by A11yproject uses The Web Content Accessibility Guidelines (WCAG) as a reference point. It covers almost all the a11y concerns.</li>
</ol>

Thank you!