“All technology is assistive technology.” — Sara Hendren, design researcher, Olin College of Engineering
The handle on your cabinets. The brightness slider on your phone. A zipper pull. The tear notch on a bag of chips. Stairs. Most things are designed with some kind of assistive measures to help people do stuff more easily. We as designers and builders of such things just tend to stop at helping a select group of people—usually the people most similar to us in terms of capabilities and needs.
For example, if we don’t typically have to haul a bike up stairs, we might not design stairs like this:
For this article, we’d initially set out to talk about how maybe “accessibility-first” design could be the next “mobile-first” design. How thinking more rigorously about constraints, and focusing on a wider array of constraints, might lead to better-designed products.
We still believe that’s likely the case.
Amazon, for example says this on its accessibility help page: “Some of our customers using access technology may find it convenient to visit our mobile site. It can be found at http://www.amazon.com/access.”
Compare the typical Amazon desktop experience…
…with their recommended “accessible” experience:
Clearly, accessible design has the potential to give everyone a more pleasant interactive experience. But before we can get to that place, my god, we should all at least meet basic compliance standards, so that’s what we’re going to focus on here.
Accessibility is a decidedly low bar, and we’re still side-stepping it.
We spoke with a few people with disabilities for this post, and we were gutted to find that designers, developers, and many content platforms are failing to do very basic things like using form labels as form labels (not placeholder text as form labels) or using alt-text to caption images for screen readers.
In fact, Medium, the website you are currently using to read this article, doesn’t allow authors to include alt-text for images. (If you’re an astute reader of this blog, you may have noticed that we’ve gone back to add descriptive captions to our blog post illustrations. This is why.) Interestingly, Instagram does.
Why are small things like this so important? From one of the folks we spoke to: “Fun experiment: every time you move your arms or wiggle your fingers, you get a painful electric shock. Try doing anything for more than an hour. For me that isn’t an experiment, it’s my real hecking life.”
In other words, doing anything that makes it easier to navigate a website means that you aren’t giving this person painful electric shocks.
So, let’s start with some empathy. Here’s a fantastic introduction to how technology opened up the world for Austin Seraphin, who has been blind since birth. (Laurel here. For what it’s worth, I almost always skip recommended videos, but this one’s powerful and Seraphin’s hilarious, so I highly recommend you check it out.)
“These things I just mentioned: transportation, banking, groceries, doing the laundry — these are not extra nice things to have. These are basic amenities that someone needs to have to live independently and with dignity. And that’s why it’s so important.” — Austin Seraphin, blind computer programmer
So, let’s try starting with accessibility when we design and code things. Here are a few easy ways to get started:
- Make things legible. You know what’s cool now, designers? BIG, BOLD TEXT. That’s right: high contrast colors and large font sizes. Let’s lean in to that and make our copy easier to read.
- Make forms as easy as possible to fill out. For starters, avoid using placeholder text as labels. It adds to visitors’ cognitive load and makes your form difficult for screen readers to parse. More here.
- Use header tags meaningfully. Nearly 70% of respondents to a 2017 WebAIM survey said they preferred to use headings to find information on lengthy webpages.
- Avoid pop ups or at least make them accessible. Pop ups are annoying even to those of us who can find the tiny “x” buttons that makes them go away. Can you imagine listening to a screen reader walk through navigation items and then suddenly repeating “LINK back to school S A L E img24077757 dot png” because someone created a sticky footer banner ad that is now the primary focus of the entire screen with no clear way to dismiss it?
- Use alt-text and aria-label to give images and icons context. Not every visual will need it, but lots definitely do. Here are some great guides on when to use alt-text and how to write it. And here’s one for aria-labels.
If you want to dive deeper, consider hiring people with disabilities to test your site or app for usability. AccessWorks is a recruitment channel specifically for people with disabilities, and We Are Capable is a remote work job board for people with chronic illness. Independent recruitment is always another option.
Lastly, if we missed anything, please let us know. If researching this article taught us anything, it’s that there’s a lot to learn.
Remember: all technology is assistive technology. Great design optimizes the solution, not the user.
Don’t let the fun stop here!
If you’d like to receive a bi-weekly email of interesting articles we write and recommend about the business of design, sign up for our newsletter.