Web Accessibility
Tags: a11y, webdev, adaptations
Published: 2022-04-21 05:39:25

I am a former special education teacher. During my time in the classroom, I have worked with students who were diagnosed with blindness, deafness, and other physical disabilities. In order accommodate the needs of these students, assignments had to be *accessible*. Students who were legally blind would need adaptive devices to magnify their work. Students who were deaf or suffering from hearing loss would require a tactile approach. These adaptations proved useful in the classroom, but what about the *web*?
<br>
### What *is* accessibility?
Before we jump into accessibility for the web, let’s take a closer look at what accessibility is. The [dictionary by Merriam-Webster](https://www.merriam-webster.com/dictionary/accessible) defines *accessible* as the capability of being reached, used, seen and understood. It also defines *accessible* as “easily used or accessed by people with disabilities : adapted for use by people with disabilities”. As mentioned earlier, I used methods of accessibility in my classroom. Now, let’s look at what it means for the web.
<br>
### Then and Now
![Early Internet Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0saxrgmac52oojzuvt45.png)

During the 90s, the internet was in its infancy, as was internet accessibility. Early websites were largely created using HTML markup which had functional results, however little options were available for people with disabilities despite accessibility being a founding principle of the internet. According to [thehistoryoftheweb.com](https://thehistoryoftheweb.com/accessibility-tools/), one of the earliest ways for developers to measure accessibility was a tool called *Bobby*, which allowed developers to get a comprehensive accessibility report on their website.

As principles of web development have grown through the present day, so have principles of accessibility. The advent of HTML5 introduced elements that would become critical to accessibility through the use of screen readers, which will be discussed later.
<br>
### Accessibility on the Modern Web
According to [a11y.coffee](https://a11y.coffee/intro/), the current Web Content Accessibility Guidelines (WCAG) are:

1. Perceivable: the user’s senses must be able to perceive the content.
2. Operable: users must be able use the website / interface.
3. Understandable: the information / website must be within users’ understanding.
4. Robust: information should remain accessible as the web evolves.
There are various methods available to users for taking advantage of web accessibility. 
<br>
#### Screen Readers and Speech Recognition
![Image of a girl using a screen reader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5wpm5jchgu9efagsqeq.png)
Screen readers are tools that provide verbal guidance on websites. These readers identify elements of a webpage and narrate them for the user. As mentioned earlier, HTML5 introduces elements that further assist screen readers and improve a website’s accessibility structure. Rather than using divs with classes or IDs alone, HTML5 uses tags such as `header, nav, article, section,` and `footer`. For tags that might be vague or don’t always have unique identifiers, using `aria-label` allows developers to add accessible names.

Speech recognition, on the other hand, takes human speech and transcribes into text which can be used for input on a website.
<br>
#### Keyboards
![Image of keyboard accessibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pldjkfr3hwz4uqiyy6jf.png)
Users can access parts of a website just by using their keyboard. This method can also work in conjunction with screen readers. As users cycle through elements on the webpage, the screen reader will read each highlighted section aloud.
<br>
#### Screen Magnification
![Image of screen magnification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iaia3umuit1kjfhnypf.png)
An accessible website will take advantage of a browser’s ability to magnify content. In terms of text size, a developer can set font sizes using rem units of measurement. For comparison, 1rem is equal to 16px font size.
<br>
#### Braille
![Image of Braille keyboard cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yqr5gwurtkgn9upa13b.png)
Using Braille keyboards or keyboard covers allows users with loss of vision to locate specific keys. This would then be used in conjunction with keyboard accessibility to give users more control over a website.
<br>
### Accessibility Needs Continue To Be Heard

The fight for an accessible internet is an ongoing, ever-changing climb. As accessibility options for users with special needs continue to be legalized, ways of making the internet accessible will become more prevalent. Developers should continue learning how to make their web creations usable by all so that everyone may benefit from the content therein. 

Andrew