Accessibility: Attention to Details
Tags: a11y, webdev, lighthouse
Published: 2021-02-15 01:15:08

##What is a11y?
**a11y** is an abbreviation for "_accessibility_" (a + 11 letters + y). The purpose of accessibility is to ensure as many people as possible are able to utilize a product or service. In the digital landscape, that means making websites that are able to be navigated by those with some disability or impairment.


##Let's take a look at a real world example
The Governor's Pub; one of my favorite places to eat around State College, has a website. How does it stack up in terms of a11y? Let's see:
![picture of The Governor's Pub webdev results](https://dev-to-uploads.s3.amazonaws.com/i/7kw6fp7xcnsleepzbpcv.png)
Here's a screenshot of a [lighthouse](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fyallahtacostatecollege.com%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext#performance) report, which grades a website based on different categories relating to accessibility.
> Not too bad, right? It shows a score of 82 right there.

Well, not quite. While on the surface we interpret the term "_disability_" as someone with some physical impairment such as being blind or deaf, when we're talking about the internet, that term extends to those with slow internet connections or those using nontraditional devices.

When loading a website, having a slow connection **is** a disability. So how can we help that? One suggestion given in the report to help performance issues is to serve images in different formats that are better with compression.
![Image depicting the expected time savings by using different image types](https://dev-to-uploads.s3.amazonaws.com/i/19tsxzffr6muyca2ztna.png) 
![Image showing details on time savings of images](https://dev-to-uploads.s3.amazonaws.com/i/jmo8ef9rqbigoutrlbgb.png)


##Unlabeled Links
One of the greatest tools for blind and visually impaired computer users is the **screen narrator**; which reads all of the text that appears on screen. However, not all elements of a website can be read verbatim. In our case we can see that there is an improperly labeled link. Here is a code snippet of a button that says "_Order Online_" which sends you to another service where you can order food:
```
<img src="/uploads/2/5/2/6/25262348/editor/online-900.jpg?1586087123" alt="Picture" style="width:auto;max-width:100%">
```
When using screen narrator, it says "_Picture_" rather than "_link to order online_" or something more useful and informational. To fix this, links should contain **alt text**. Here is a more helpful link:
```
<img src="/uploads/2/5/2/6/25262348/editor/online-900.jpg?1586087123" alt="Link to order online" style="width:auto;max-width:100%">
```


##Navigation Trap
One of the biggest issues I found during my audit of this site is that the embedded Facebook content can trap a user inside of it almost indefinitely. 

What do I mean by that? Well, when a blind user is on a website, they use the tab key to navigate and listen to what the screen narrator is telling them is on the page. Think of it like listening to the options given by a call center robot. 
>"For more options, press 9"

Now imagine if that robot started reading every single sub-option before ever getting to the main option that you need. That's pretty much what's happening with this. The worst part about it though, is that it is blocking the "_contact us_" link at the bottom of the page. When making reservations to eat out, this can be an especially useful link for a blind person. 

An easy workaround for this would be to simply reorder the page and move the _contact_ button up higher, at least above the Facebook content.

##What Now?
It's our responsibility to assure that our services are usable by as many people as possible. Beyond just being kind, these people are prospective patrons! It benefits us **all** to work together.

That's about all I have to say for this blog post. Be kind, be accessible, and stay safe.

P.S. I also made a [video](https://youtu.be/EMbJsHTUqWw) about it.
{% youtube EMbJsHTUqWw %}