Accessibility: Attention to Details

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:

Here's a screenshot of a lighthouse 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.

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 about it.