Accessibility: what, why and how?
Tags: webdev, beginners, programming, a11y
Published: 2023-03-01 07:57:21

If you are learning to code, you will come up against the concept of accessibility at some point, which is very important to take into consideration when building your World Wide Web project.

## What?

Accessibility is a crucial task (specially for designers and developers), who need to make sure that everybody can access sites information and functionality equally.

You will often find accessibility written as the acronym **a11y**. The number 11 simply represents the letter count between a and y. 

![a11y image explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j10o91zqdmw6k81s5ulr.png)

## Why?

Have you ever thought about how people with physical disabilities, situational disabilities and socioeconomic restrictions on bandwidth and speed access websites? By using assistive technologies like screen readers, screen magnifiers, speech input, assistive keyboards and braille displays. 

![Assistive technologies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd8ag4qzfpyjhwomse98.png)

Let's have a look at some facts about how internet behaviors are changing overtime and how important accessibility becomes in this matter:

- **[Two thirds](https://www.statista.com/topics/1145/internet-usage-worldwide/#topicOverview) of the global population are internet users**. China, India and the US are the countries with the largest digital population.
- Around [60% of the US population with disabilities](https://www.statista.com/statistics/368609/us-online-access-householder-disability-status/) live in a household with internet access.
- [WebAIM](https://webaim.org/projects/million/) conducted an accessibility evaluation of the top 1.000.000 websites in 2022 and detected around **51 million accessibility errors**. An average of 50.8 errors per home page.

![Accessibility issues graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3n81ce0bb5u5wrj6y8ix.png)

## How?

What can we do to make the World Wide Web more accessible to everyone? We can adapt our websites according to the [accessibility guidelines maintained by W3C](https://www.w3.org/TR/WCAG20/). The accessibility rules are called [ARIA](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties) (Accessible Rich Internet Applications), which collect the main practices. For example, some of them are:

👀 Use [semantic HTML elements](https://www.w3schools.com/html/html5_semantic_elements.asp) (**_header, article, section, footer_**, etc.), which offer more context and have a more specific meaning about the tags content, unlike non semantic HTML elements (div, span, etc.)

🖼️ Include alt attributes on the image tags: _img src=”#” **alt**=”The Guernica painting”_.

🧑‍🎨 Use [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), if necessary, which provide more context about a website's content: **aria-label**=”Artist”>Pablo Picasso.

🎨 Use sufficient [color contrast](https://contrastchecker.com/).

⚙️ Don't use only color to signify state, as it is very hard to imagine for people who suffer from a color vision deficiency.

⌨️ Make your website's content reachable via keyboard.

Aren't you sure if your web content is accessible? Check these [online tools ](https://www.w3.org/WAI/ER/tools/)to evaluate if your website meets accessibility guidelines.