Marcus
Be sure to check out Part One for an introduction to why Web Accessibility is important. In this post we’ll be discussing how you can start to turn your site from inaccessible to accessible.
As a designer, I can tell you right now that one of the biggest trends on the web these days is to design mobile first. We call that Responsive Design (*coughcough* which you can read more about in my Responsive Design series *coughcough*), and it’s about approaching design with the idea that not everyone views the Internet from the same type of device and therefore you need to consider all different screen types.
Web accessibility is a very similar idea.
The reality is that no matter how much research you do, you can never truly know your entire audience. Not every person who uses HBO Now, or Google, or Cosmo (what? I have a friend who reads it sometimes) is the same, and that shouldn’t matter. If there’s one place on this planet that should be equal for everyone it is the Internet. That equality is something that you need to keep in mind when designing responsively, because you want every user to have the same experience. For example, what happens if your user has a slow internet connection? You need to consider the images that need to be loaded, and you want to include text in case the image won’t load. As it turns out, you’d want to do the same thing to accomodate a blind or visually impaired user as well. See, you’re already working with accessibility and you didn’t even know it!
Of course, things are waaaaaay more complicated than just sticking in some help text for every image on your site and calling it a day. That text that is included needs to be informative and readable by text-to-speech and screen reader programs — it can’t just read “catpic.jpg”. You would want alt text that looks something like this:
Doing the Kessel Run in less than twelve meowsecs.
Obviously, blindness isn’t the only disability out there. You also need to consider those with dyslexia, low vision, color blindness, hearing impairment, deafness, and cognitive disabilities as well as physical disabilities … and each of those has its own spectrum. No one website is 100% compliant and can include everyone (yet), but it’s important to include as many people as you can as we move towards a more accessible internet. It’s the INternet. INclude, not EXclude.
That seems daunting, right? How do you design a site that complies with so many different things? How do you make it so everyone can use it? What happens if I’ve already built my site? Do I have to start all over? Here’s some good news: you don’t have to start from scratch. Because of the importance of web accessibility to not only the government (again, see Part One), but to medical websites and the Internet as a whole, there are a lot of tools that you can find on the Internet to help you to make your current site welcoming for even more people. In this post, we’ll cover three quick ways for you to improve content and design on your website and make it more accessible.
The Colors, Duke! The Colors!*
They say hindsight is 20/20. That’s great and all, but foresight — and just plain old sight — aren’t so perfect. Everyone has different ranges of eyesight, from nearsighted to farsighted to blind and everything in between. There are also other eye-related problems, such as difficulty with differentiating colors. For those with certain types of color blindness it can be nearly impossible to separate green from red (which honestly is how I feel at Christmas time). Having the right contrast between colors, no matter how different or similar, is important so that more people can access your content. Even individuals without color blindness can still have a hard time reading certain things if the contrast is too slight, due to the simple fact that everyone’s eyes are different.
One way to assist in your web accessibility crusade is to head to WebAIM and check out the Color Contrast Checker (or 3C, as the cool kids call it). Here you can input the hex codes for text on your site and the corresponding background, and in return it spits out a value that tells you the contrast ratio and whether or not it passes certain tests set by Web Content Accessibility Guidelines (WCAG). If your color palette fails, you can tweak each color until the ratio is within range and you pass. Then it’s just a matter of heading back to your site and updating the colors. Viola! You’re already on your way to make the Internet a better place for everyone. A nondescript colored star to you, my friend.
Sing Us a Song, You’re the Keyboard Man
Hypothetically, if you were to want to go back to the homepage of this site, how would you do that? You would probably grab your mouse, move your cursor up to the Bōwst logo or the word ‘Home’, and click away. But how would you do that without a mouse? The fact is, not everyone can use a mouse; this could be due to blindness or a physical disability, and those shouldn’t be hurdles for getting access to a website.
Libraries have wheelchair access and elevators for people who need assistance, right? Your website should be the same way. One way that you can help users to navigate around your website sans plastic rodent is to enable keyboard navigation. Many websites already have some form of this enabled (depending on the browser in use), but there are additional measures that can be taken to allow full functionality using only the keyboard, allowing users to tab through menus and select pages they want to see, or manually go through drop down menus, or select highlighted words that are meant to be links. Everything needs to be accessible to everyone whether they are using a mouse or not.
WebAIM can help you better understand the potential problems with keyboard navigation and how to avoid them, but you can do something right now that will allow you to see quickly if your site is keyboard accessible. Go to the site and start tabbing from the navbar. Heck, you can test this one right here if you want. We’re not afraid. You’ll notice that the first tab will reveal a “Skip to main content” link that will allow users to bypass the nav and move down the page to the next section.
Keyboard navigation is also important when thinking about how carousels, sliders, and modals work on your website. Make sure that those are also navigable by any user, not just those with a sextant and a talking parrot (or a GPS I guess, for you modern explorers).
(Closed) Caption Adaption
Images, and subsequently video, have become an integral part of the Internet and in many ways, our daily routines. We previously discussed adding alt text to images to allow them to be readable by screen readers, but what about video? There are two things that can be done to help make video content on your site more accessible.
- Captions. You know, those things you see on screens at your favorite bar, the airport, or anywhere you can’t easily hear what the people onscreen are saying. That’s what captions are for, and they allow those who have trouble hearing (or cannot hear at all) to be able to view and understand what’s happening onscreen. YouTube provides auto-captioning on their videos, but it’s not the best and it can be confused, so sometimes it’s best to provide captioning yourself in the form of…
- Transcripts. Having a written account of a video or podcast is key for including those who are hard of hearing, deaf, or those who just don’t have access to audio. They do not have to be word-for-word, and they can include additional descriptive text to provide additional context. Transcripts also allow for a searchable version of the audio, not only providing better SEO, but also giving those who use screen readers more control over the speed at which they consume the content.
If you are going to create captions for your video, they should be in time with the audio. In other words, the words on the screen should be in step with the words that the person being captioned is saying. It should also be one-for-one in terms of capture. There are times that captions don’t actually equate to what is being said, which means things can be lost in translation (see: English captions on any anime or video game, or just watch a show on Netflix with the captions on and note the differences). Make sure the experience you are providing is equivalent for everyone. Lastly (and this may seem like a no brainer, but we’ve still got to say it), make sure the captions and transcriptions are readily and easily accessible for anyone who needs them. You can find more about captions, transcripts, and audio descriptions at WebAIM.
…And We’ve Only Just Begun…
These are only a few simple examples of how to make your websites more accessible. Even then, we’ve only covered a small portion of the spectrum of accessibility needs. The key thing to take away is the idea of equivalent use. Everyone should be able to have access to the same content. Period. Help us make a better internet by incorporating these measures into your own sites. Users are the biggest part of the Internet. I mean, there are billions of them, and how many developers/designers out there? Yeah, it pales in comparison. Web accessibility doesn’t end here. Stay tuned for our next addition to the series where we continue to discuss designing for accessibility!
*Only 90s kids will get that reference
