Advocating for Web Accessibility
Tags: webdev, a11y, programming, learning
Published: 2023-05-24 02:39:16



### Embracing web accessibility and building the web for **_everyone_**

Jump to section

- [What is it?](#section-1)

- [Why does it matter?](#section-2)

- [Assistive Technology](#section-3)

- [SEO Benefits](#section-4)

- [How can I be more accessible?](#section-5)

The web is an enormous place filled with almost any **information** you could ever imagine. Data around every corner, beautiful websites, social media, and more. With a **resource** of this magnitude, we have made sure to make it usable by **everyone**.

#### What is accessibility in web development?
<a id="section-1"></a>
 
Web accessibility, in simple terms, allows people with disabilities to:

- Navigate the web

- Absorb information from the web

- Add to the web


![Person using a computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqmfq668v3aivonvus1c.jpeg)

#### Why does accessibility in web development matter?
<a id="section-2"></a>

While it is still fairly new (in the grand scheme of things), imagine life today without the web... 

So many people depend on the web **every day**, whether it be for work, school, personal means, or anything else. Without **accessibility** from the start, select groups of people are **denied the ability** to utilize one of our greatest assets.

Also, there are many **benefits**, aside from the obvious of course, that come from developing with **accessibility** in mind. For example, making your content **accessible** also helps with [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) which helps all parties involved.

When creating anything for the web, the ideal goal is for **everyone** to be able to interact with what you made (theoretically). Forgetting accessibility **automatically** cuts out a large group of potential visitors to your content, which is **not good** for anyone involved.

#### Assistive technology for people with disabilities
<a id="section-3"></a>

Web accessibility pertains to **all** disabilities:

- Hearing

- Visual

- Mental

- Verbal

- Physical

There are many different forms of assistive technology that help people to utilize the web. Some of these include (but are not limited to):

- [Screen readers](https://en.wikipedia.org/wiki/Screen_reader#:~:text=A%20screen%20reader%20is%20a,as%20speech%20or%20braille%20output.)

- [Screen magnification software](https://en.wikipedia.org/wiki/Screen_magnifier)

- [Speech input software](https://www.techtarget.com/searchcustomerexperience/definition/speech-recognition#:~:text=Speech%20recognition%20software%20can%20translate,voice%20commands%20instead%20of%20typing.)

![five people's thumbs up raised in the air](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acx911tvghzxrt4czd5c.jpeg)

#### SEO with accessibility
<a id="section-4"></a>

As I mentioned before, developing with **accessibility** in mind will **enhance** [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) of your site. Search engines have many **complex algorithms** that are constantly updating and changing with the web. One thing that is certain, though, is that **semantically** written HTML will provide a **higher SEO** percentage to your site. This in turn provides you with a higher chance of your site being visited.

An easy way to check your **SEO** ratings (if using Chrome browser) is to run a quick check with [lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). You can run this tool from the Chrome devtools, command line, or even as a node module. This will also give you other helpful **metrics** from your site like your site's overall **performance**.

![Google lighthouse screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6eambifp32gg6bagfal.png)

#### Best semantical practices for accessibility
<a id="section-5"></a>

As a web developer, there are several practices that should be done by default in order to achieve maximum accessibility. Good practice includes but is not limited to:

- Give labels to all form items

- Add "alt" text to all images

- Write code in order using semantic elements

- Try to use as few div elements as possible

- Help users where possible (I.E. avoid and correct their mistakes)

- Write adaptable code to different technologies and viewports

- Utilize [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) on non-standard interactive elements

Make sure on your next project you remember to think about accessibility! Help to create the web for **everyone**. 

### Resources

[Front End Happy Hour](https://www.frontendhappyhour.com/episodes/a11y-cocktail/)
[W3](https://www.w3.org/WAI/)
[MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes)
[Wikipedia](https://en.wikipedia.org/wiki/Search_engine_optimization)