An Introduction to Web Accessibility

I'll admit, I'm new to the world of accessibility. It's something that I had heard of and knew was important but I didn't actually know how to implement it.

If you're a member of twitter and most especially the tech twitter community you'll have seen the recent voice feature that's been implemented as well as the backlash it has received. If not, the new feature allows users to record a tweet instead of typing it. This is really cool, right? It allows people to diversify how they communicate their thoughts.

Well, the problem is, it excludes a whole community of users who have hearing difficulties. For platforms that rely on sound, there is usually an option for captions/subtitles so that no matter a user's situation, they can enjoy the provided content. So it is understandably upsetting that a global company like Twitter has left accessibility as an afterthought.

Simply put, accessibility is a necessity. As a developer at the beginning of my journey, these are practices I want to learn now, rather than correct later. I think it's important to have empathy at the forefront of the work you create because at the end of the day it makes a better product for everyone.

What type of developer do you want to be? If you're like me then join me on this journey to learning about web accessibility and learning how to implement it.

So, let's start from the beginning, what exactly is web accessibility?

In a nutshell, web accessibility is providing a web app for a user that, regardless of whether or not said user has an impairment, enables them to access the app's content without any difficulties.

"Surely, if a person can visit a website in the first place it's accessible". Well no, not really. A real-life example of this is where a wheelchair user wants to visit a restaurant because it's had such popular reviews and it advertises a 'No Booking Necessary' service. It turns outs, even though they can get into the restaurant, there isn't any seating area available for them because of the way the restaurant is laid out - all the chairs and tables are extremely close together. It should be obvious why this is a problem. A wheelchair user needs space to navigate around the restaurant before making it to and from their seat or the lavatory. Let's say they do manage to squeeze into a place, they're still not really able to enjoy the food because they're uncomfortable and the experience overall becomes a negative one. The head chef or restaurant owner probably never meant to discriminate against the wheelchair user, after all, they want everyone to experience their food. However, they did and whether or not the food was good it no longer matters because the overall experience and comfort for the wheelchair user were poor.

If you apply this example to an actual website, the 'No Booking Necessary' service is equivalent to saying "Anyone can use this site". The chairs and tables are the structure of the website. The food being served is the website's content and of course, the head chef or restaurant owner is the developer. Each and every part contributes to the user experience. There's an important lesson here. It's also a simple one. Try to think about and accommodate for all possible types of users who may wish to have access to your website. You don't want to leave a user frustrated.

Typically, there are many types of impairments people can have, and three levels of severity. An impairment, in terms of web development, can be classified as:

1. Sensory (mostly vision and hearing)
2. Motor / Physical
3. Cognitive.

The severities in which they are categorized are:

1. Situational (based on the current environment)
2. Temporary (most likely stemming from an injury)
3. Permanent (a continuing condition either from birth or through injury).

An app's accessibility can be implemented through focus, semantics, and visual design. Focus is typically looking at where the user is located on the app and how to help the user know where they are and what they are on. Semantics dives into how to logically layout an app so that it makes sense to a user who may not be navigating through the app in a 'traditional' way. The visual design aspect relates almost entirely to CSS. Can it be viewed on any browser? Is it responsive? Is there suitable contrasting throughout the app? Can text be read properly?

I'll be covering these topics in more depth in later posts once I learn more. For now, one thing to be aware of is some of the assistive technologies out there to help implement these features. Assistive technology includes but is not limited to screen readers, braille displays, magnifiers, voice control, and eye-tracking.

That's it for now! Here is a small list of some of the resources I (currently) have and will be using to understand and implement accessibility.

Udacity Web Accessibility Free Course

The a11y Project

Carnegie Museum's Web Accessibility Guidlines

JFHector(and others)'s Guide