(Bayer Herbert (1900–1985), The Lonely Metropolitan, 1932)

Accessibility tips from a designer who actually needs them

Hey there! I’m Olivia, the UX Design Intern at SMAKK. I have an eye disease called Stargradts this has given me first-hand experience in accessibility tools and empowered me to take accessibility into account while creating new designs. Here at SMAKK we had a chance to work with an amazing company called Two Blind Brothers. As a team, we learned so much from working on this project. Not just from the company’s founders (who also have Stargartds), but we learned from each other about the best practices in each of our concentrations. Now we want to share our knowledge with you!

Laying down the law:

First things first, accessibility isn’t just about those of us who are differently abled. Accessibility is about all of us and like everything else it exists on a spectrum. The cold hard truth is we are all going to get old one day, lose our vision, need hearing aids and have a whole lot of arthritis in our hands from all the texting that we do. Why not prepare for that now?

If you want to look at this from a bottom line perspective, it’s silly to ignore a whole segment of the population. The last US Census, in 2012, showed that 19% of Americans have a disability, that is 56.7 MILLION people. If you aren’t accounting for 56.7 million users in your products and websites then you’re skipping out on 56.7 million potential customers. Accessibility shouldn’t be last thought at the end of your development phase. You need to be thinking about accessibility from the start, not just in Q/A.

So, how do you get started?

Get Involved:

Take a couple of hours to explore the accessibility tools on your computer and mobile devices. Do you know what features there are and how they work?

  • Have you ever tried to use a screen reader?
  • Can you pinch to zoom on your page? Can you also zoom by keying in command+?
  • Does everything still work properly when you zoom or do you always have to press command+?
  • Try changing the font size on your phone for a day and see how it feels, you will quickly notice that many apps and sites fail to account for something as simple as that.

Ask:

Later on in your process when you have prototypes or are in the development process don’t be afraid to ask people with disability needs for their opinion. Invite them to participate in usability testing. They want to make the world easier for themselves as well and are incredibly willing to help. If you don’t know anyone with a disability ask your Luddite of a grandmother to help instead, I bet she would love to spend more time with you, and maybe she’ll bring cookies.

What’s Often Overlooked:

  • Never forget to have alt text. Alt text is HTML speak for the copy that shows up in place of an image if your site doesn’t load all the way. Always have accurate descriptions of images and visuals in your code so screen readers can describe it to the user.
  • Always provide a non-audio version for any video or audio content. This can come in the form of subtitles or a transcript. This won’t just help the hearing impaired but also improve the content’s social media shareability. For example, Facebook’s video default in your newsfeed is mute, you have to opt-in for sound and many people don’t. Think of all the likes you could be missing out on!
  • Don’t rely on color for everything, especially in your information hierarchy and calls-to-action. (BTW red/green is the most popular color blindness). Especially pay attention to this if you have an audience that skews heavily male, that Y chromosome isn’t all it’s hyped up to be. A great tool is using illustrator’s color blindness filter. Here’s a how-to guide.
  • If you change the image of the cursor on your site make sure you upload a vector file of at least 50 px. A lot of people who are visually impaired enlarge their cursors and it makes a small image look blurry, and I may be blind, but I’m still judging you.
  • Contrast is key. Break out your color wheels and brush up on color theory because the contrast is incredibly important for legibility and conversions. If your users can’t see the “add to cart” button, they obviously won’t ever buy anything.
  • Many people don’t use a mouse to navigate, so make sure you can navigate the site using your keyboard. Try it for yourself or make your intern do it (trust me we won’t mind!), this is incredibly important for those with different motor skills and the visually disabled.
  • If you have an app, is it Siri™ compatible? A lot of disabled people rely on our AI to do things for us that it would take us twice as long to do without it. Plus, who wouldn’t want Siri™ to stop saying “Sorry. I don’t know what you mean by that.”
  • As a last check try inverting your screen colors to negative. Does everything still look good and feel balanced? A lot of people change their screen filters to greyscale or invert. For many visually impaired it really helps improve the contrast when you are reading a lot of text. In my case I always use the inverted setting, my eyes are very light sensitive and the darker screen really helps me to stay on the computer when I need to go into vampire mode. I know all the developers out there know what that is like.

Here comes the “but”:

Don’t forget disabilities aren’t always physical, they can be emotional as well. Try and give trigger warnings for upsetting content. It is always better to “opt-in” to seeing a graphic or disturbing image or story than wishing you could opt out when it’s too late.

If you want to see how we used these philosophies in practice check out our Two Blind Brothers case study!