If you’re like the 2016 version of me, then you think you have a decent handle on web accessibility. You put alt attributes on all your images (though you don’t give much thought to the actual text) and you make sure your sites can be used with a keyboard (except for overlays sometimes). Then the day comes when you’re given a 100 page accessibility audit from a client and a deadline for all issues to be fixed. What is high contrast mode, you ask yourself, and why does it matter if these links are implemented in a list?
Ian is an Engineering Manager based out of Toronto. Currently he works at BiblioCommons, where he leads the development of a multi-site WordPress application used by public libraries in over twenty cities including St. Louis, Chicago, and Boston. He has also had some successful side projects including gradient-animator.com, a CSS generator for animated gradients. In his free time he enjoys watching old movies and hopelessly cheering for local sports teams.
Terminology is important, it helps each of us to understand exactly what we are talking about.
Disability: a physical, mental, cognitive, or developmental condition that limits a person’s ability to engage in certain tasks or participate in typical daily activities.
What’s important here is to pay attention to the word typical, this is key. Disability can be very contextual.
For example, a person with a seizure disorder might not identfy as having a diability depending upon its severity and if they use public transportation. The same person, in a rural area, might identify as having a disability if they can’t have a driver’s license.
Disabilities can also change over time. We can develop disabilities as we age, due to an accident, or if we develop a health condition. This can also work in reverse. For example, those with some health conditions or mental illnesses can improve with medication and/or therapy. These individuals might not identify as disabled due to their improvement.
Assistive Technology: tools that help people perform tasks that might otherwise prove challenging or impossible.
Accessibility. The 11 stands for the 11 characters inbetween “a” and “y” (a***y)
In the US, the Americans with Disabilities Act (ADA) of 1990, amended in 2009, is the legislation that governs accessiility.
Web Content Accessibility Guidelines (WCAG) defines how to make the web more accessible to people with disabilities. WCAG 2.1 is the current standard and has more for mobile, low vision, and cognitive disabilities. Their guidelines are broken into tiers, where most aim for level AA.
Accessible Rich Internet Applications (ARIA) is a tool at your disposal to meet WCAG standards (aria-hidden and aria-labeledby as examples), however, this should not be your first tool of choice. Using HTML elements to their semantic specifications is what you should be doing first. As an example, don’t use “<div class=“button”…>” as divs are not focusable by default. A much better method would be to use a button and then apply a style.
Our physical spaces come with a lot of affordances which exist to help people with disabilities. For example, wheelchair ramps, stair railings, buttons to open doors, etc.
However, we all use and take these for granted. These public affordances didn’t always exist. In fact, most of this didn’t exist even in the 1960’s.
Although this major shift in public opinion occurred several decades ago, we can still see renovations and retrofits occurring to public spaces. The Toronto subway stations are a prime example. The stations were built in the 60’s and are today retrofitting elevators, a very slow and expensive process.
This is a standard curb with an approx 5 inch drop for this wheelchair.
To fix the above wheelchair problem, curb cuts were invented. For the first time, wheelchair riders are able to get around town on their own.
The idea that improvements we make for users with disabilities end up making things better for everyone.
Many people don’t actually realize curb cuts were initially designed for wheelchair riders. People assume that they exist to help with strollers, luggage, pull carts, etc.
While the curb-cut effect benefits everyone, its important to remember that these affordances are essential for people with disabilities.
Here we have the path a wheelchair must take to get from one corner at an intersection to another without curb-cuts. Crossing the street is no longer a simple matter for a wheelchair rider.
Today, we’re in the midst of a similar push for disability right, but this time for our digital spaces.
Now that you understand a little bit of accessibility history, let’s look at some ways to improve the accessibility of your website.
Ian didn’t want to mention WCAG very much, while its incredibly helpful he feels its best to start looking at concepts before looking into the exact requirememnts you need to meet to accomplish that goal.
So where do you start with accessibility? Your keyboard.
Make sure the user can tell which element has current focus
Example isues could be:
Everyone needs to know the basics and be aware of accessibility concerns and needs to create a better solution for a websites intended users.
Two recommended training:
Always test for accessability. Reach out to local accessibility communities for feedback as well as assistance in testing.
Document your accessibility improvements as much as possible to ensure accessibility is consistent throughout all aspects of a project and are clearly understood by all team members.
A great example of this is eBay’s accessibility documentation.
Create a slack channel for internal communication regarding accessibility. This is a space where you could ask for feedback, share resources, or generally have accessibility discussions.