Introduction To Web Accessibility
Tags: webdev, a11y, beginners
Published: 2023-01-28 23:00:47

## Introduction <a name="introduction"></a> 
Web accessibility has so many benefits that it offers online business owners and website owners. One of these benefits is that it helps boost SEO on a site. With accessibility, you could reach a wide audience. Web accessibility allows disabled people to visit and interact with your website. which will boost your site and drive more engagements. This article will cover:

- [What is web accessibility?](#whatis)

- [Importance of web accessibility](#importance)

- [Impact of web accessibility on disabled people](#impact)

- [Web accessibility guidelines](#web)

  - [Principles of Web Accessibility](#principles) 

  - [The different levels of conformance (A, AA, AAA)](#levels)

  - [Sufficient and advisory techniques](#techniques)

- [Tools for testing web accessibility](#tools)

- [Best practices for web accessibility](#practices)

- [Conclusion](#conclusion)


![a person using a black laptop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbq8q233om7eji2w86p5.jpg)


## What is web accessibility? <a name="whatis"></a>
Web accessibility means making the content on the web easily available for everyone to use. This includes,

- People who have a hearing problem or cannot hear at all.

- People who lack logic or intelligence to solve a problem.

- People with nervous disorders (relating to the brain)

- People with physical disabilities (the ones you can see)

- People who have problems speaking and seeing. 

It also includes:

- People who have challenges with their health; maybe they are sick and can't perform certain operations.

- Older people with decreasing abilities because of age.

- People who had an accident and sustained injuries.

- People who are limited in some way; maybe they are in a noisy place.

- People with limited access to bandwidth 

Web accessibility aims to make it possible for people with the above cases and any other case that denies them equal access to the internet to create and consume content on the web.

## Importance of Web Accessibility <a name="importance"></a>
Web accessibility is important in many fields. Here are some reasons why you should use accessibility right now:

**Huge market value**
According to the World Health Organization (WHO), about 1.3 billion disabled people are living in the world. This means that there is a strong market for disabled people to reach out to. Also, considering the poor accessibility on millions of websites in the world today, disabled people would always love to patronize any website that promotes accessibility and makes the site easily accessible.

**Improves the outlook of your site**
Web accessibility improves the user experience of your site. Earlier on, you came across many cases of people with special needs. Applying accessibility to your site would cover persons with disabilities, temporarily disabled persons, and persons who are in an uncomfortable place at the moment. If the regular users of your site who are not disabled can only use it when they are in a comfortable place, then it's only a matter of time before they move to a competitor that removes all those barriers. So implementing accessibility would improve the user experience of your site.

**It keeps you out of legal trouble**
When running a business, it is possible to get into legal trouble. Not making your site accessible increases that possibility. Companies like Netflix and YouTube have faced lawsuits based on the lack of accessibility on their sites. This compelled them to implement accessibility. Dominos had faced a lawsuit for failing to make the website accessible in the past. These lawsuits are usually settled with money. Instead of spending that money on accessibility legal battles, it is better to apply accessibility and avoid all the legal drama.

**Improves the reputation of your brand**
Applying accessibility goes a long way toward improving your brand's reputation. It could be by recommendation. People with disabilities usually have groups and communities they belong to. In that community, they could easily recommend your site to their members. Facebook has earned praise over the years for making the content on its site accessible. Also, people will love to patronise your brand when they realize how inclusive it is.

## The impact of web accessibility on disabled people <a name="impact"></a>
Web accessibility improves the general experience of users with disabilities. As a result, they will have no trouble creating or using web content. That way, they can create or use the content on the web with no difficulty. 

It also provides them with more online tools at their disposal, which they could use to make a living or buy things online and enjoy the internet's services just like everyone else. 

Finally, web accessibility has encouraged many disabled people who couldn't use the internet before to use it, reaching a wider audience.

**[Back To Top](#introduction)**

## Web Content Accessibility Guidelines (WCAG) <a name="web"></a>
The W3C organization provides accessibility guidelines to ensure that websites follow through on becoming accessible. These guidelines were developed by consulting with organizations and the W3C.
The guidelines aim to reveal requirements that developers, designers, writers, testers, and every other team would follow to apply accessibility.
These guidelines comprise principles, conformance levels, and techniques to make a website compliant with accessibility.

### Principles of Web Accessibility <a name="principles"></a>
The principles are used to determine whether a site is accessible. If a site does not follow the principles of accessibility, then it is not considered accessible.
According to W3C.org, the four principles of accessibility are:

**Perceivable:**
Web content, which includes text, images, and so on, needs to be presented so users can perceive and ingest the information.

**Operable:**
This means the web content and interface need to be operable by users with disabilities. The users should be able to use the web components without hindrance.

**Understandable:**
Users should understand the content on the site, and they should also understand how to navigate the site easily.

**Robust:**
The website should support assistive technologies and other devices used by users with disabilities to consume the internet.

### The different levels of conformance (A, AA, AAA) <a name="levels"></a>

The WCAG has levels of conformity that identify whether a website is following the accessibility guidelines, and they are:

**Level A:**
This is the ranking for minimum performance. This signifies whether a site has met the basic requirements for accessibility.

**Level AA:**
This is the ranking for midrange. This signifies that the website has met standards. Some accessibility laws require websites to be at this level of compliance. For a site to meet this level, it must have level A success criteria in place.

**Level AAA:**
This is the highest level of conformance. Like the previous level, to meet level AAA, the website must first meet level A and level AA success criteria before meeting level AAA. According to the W3C, this level is optional to meet, as they normally use Level AA as an accessibility benchmark.

### Sufficient And Advisory Techniques <a name="techniques"></a>
These are recommendations made by WCAG. On how to meet the success criteria, they regularly update these techniques with each advancement in technology and the world. These techniques could remove the challenges in the accessibility of a site. These techniques are:

**Sufficient Techniques**
Techniques that fit the success criteria for the guidelines. A website that follows sufficient techniques will address the barriers preventing accessibility. Examples of such techniques are using alternative text on images, using proper headings, adding captions to videos, and using well-detailed navigation links.

**Advisory Techniques**
These are techniques that do not meet the success criteria for the guidelines. They are suggestions that could help improve the accessibility of the site. Examples of such techniques include
using CSS to make large fonts instead of heading tags and adding a sitemap.

## Tools for Testing Web Accessibility <a name="tools"></a>
There are some tools you could use to test the accessibility ranking of your site. Ensure it meets the legal requirements and that people with disabilities can use your site to a particular degree.
Some of those tools are:

### [Web Accessibility Evaluation Tool (WAVE)](https://wave.webaim.org/)
This is an accessibility testing tool that was produced by WebAIM to test the accessibility performance of a site. You can use [WAVE as a web browser extension](https://wave.webaim.org/extension/). on Google Chrome, Firefox, and Microsoft Edge browsers. You could also [integrate WAVE as an API](https://wave.webaim.org/api/) or a [WAVE testing engine](https://wave.webaim.org/standalone).

### [Accessibility Engine (AXE)](https://www.deque.com/axe/)
AXE is an accessibility testing tool that you can integrate into a test environment when running tests. AXE was produced by Deque to solve the barriers to accessibility. It follows the guidance of WCAG to ensure a website meets conformance level A or level AA. AXE has a [vscode extension](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter), which could point out accessibility errors in the code while you are still writing code.

### [Firefox Accessibility Engine (Fangs)](https://www.standards-schmandards.com/projects/fangs.html)
This is an accessibility tool made by Mozilla for the Firefox browser. You can use the tool as an extension. This tool makes it possible for you to read your text the way a screen reader would read it. So you can improve the accessibility of your web page.

**[Back To Top](#introduction)**

## Best Practices for Web Accessibility <a name="practices"></a>
Here are some best practices you could apply to improve the accessibility of your site.

**Add alt text descriptions to images**
Use image descriptions to describe images when you use them. Try to describe them accurately so that they can be heard by a screen reader.

Example:
```
<img src="gif.png" alt="a woman sitting on an office desk facing her laptop in her office"/>
```

**Use properly descriptive navigation links**
When using links, avoid using words like "here" or "click here" to describe your links. As this is not perceivable, strive to use descriptive text and use the title of the topic as a link. For example, if you are referring your readers to an accessibility article, you would use "Understanding WCAG Guidelines" or any other name that best describes that link. Instead of "Read More". This is also good for SEO, as it helps the search bots understand your links and gives your page a higher ranking.

**Caption videos**
When you use videos, endeavour to add captions to your videos. This is a perfect case for accessibility, as it will benefit both people with hearing impairments and people who are in a noisy place or even people who do not understand your accent.

**Add a transcript**
Endeavour to add transcripts as an alternative when you make videos or audio. For people who cannot perceive the videos or audios.

**Use proper headings**
When creating content, strive to use headings when necessary. So assistive technologies would read something meaningful from your content. Use h1 for the topic and h2 for subtitles to convey the meaning of the content when they are being read.

**Run accessibility tests on pages**
There are accessibility tools, some of which I mentioned above, that you could use to run tests on your website to determine how compliant it is with accessibility.


**Do not use small fonts**
When you use small fonts on your website, older people and people with sight problems struggle to see. The best option should be to use the fonts recommended by WCAG, which are sizes 12–14.

**Create accessible tables and add labels to forms**
Add a proper description to your tables when you create them, or if possible, use markdown. This would help screen readers read the table and the content within it.  When creating forms that you expect your users to fill. Strive to add labels to forms so they will be descriptive for screen readers.

**Use screenshots sparingly**
Do not use screenshots to convey the meaning of your text. Always use text to describe. But if it is necessary to add a screenshot or you know that having a screenshot would help your site visitors understand your content better. Then you could use screenshots.

## Conclusion <a name="conclusion"></a>
That sums up the core concepts of web accessibility.
Web Accessibility has provided many benefits to everyone both disabled people and people who have barriers that limit them from using the web like everyone. Making your website accessible goes a long way in improving the content on the web. 
For more info on accessibility guidelines, check [Web Content Guidelines (WCAG) ](https://www.w3.org/WAI/WCAG21/quickref/)


**[Back To Top](#introduction)**