Okay, we're going to take a break from the fun stuff with a less sexy topic, WEB ACCESSIBILITY!
Woohoo! Yeah! *Cheer!*
So, what is accessibility?
"Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general."
Okay. ...Wait, what?
Web accessibility means making websites easier to use for people with various disabilities. Some examples?
Visual Disabilities
Maybe you were born with low vision, or maybe you are legally blind. Or, you just have terrible vision (like me) and can't read a monitor if it's a foot in front of your face without your glasses. Maybe you're colorblind. "As many as 8 percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green color blindness," (National Eye Institute, NIH).
How do visually impaired users use the web? Usually it's a combination of expensive proprietary screen readers (JAWS, Windows Eyes), free and open source screen readers (NVDA), or modifying your browser settings (like zooming in).
Screen readers literally read every part your web page out loud. EVERYTHING. So, every time you load a page, it will read out your entire expanded dropdown menu navigation every single time. (Give it a try with NVDA and see what it's like!) Annoying, right?
So, be mindful of using best practices for HTML. Just by keeping clean, modern code, many parts of your website will be accessible by default. More often than not, making your website accessible makes it better for everyone.
So, without getting into too much detail, how can you quickly make your site accessible, particularly to users who can't see your website?
- Don't use images for your headers. Utilize header tags instead, like <h1>, <h2>, <h3>, etc.
- Provide "scope" when creating large tables so the screen reader can pinpoint what column or row the cell refers to. Navigating a table with 10 columns and 15 rows can be quite difficult if you don't know what kind of information you're looking at.
- Use alternative text (alt="alternative text goes here") for any important visual elements. I say important because you don't need a screen reader to tell you about a decorative picture in your nav bar, about special custom bullet points, or where you have a divider line. But, if you have an image that actually adds value or information to the page, please give it some alt text!
- Audio describe your visual content. It's kind of like having a transcript, but instead it describes what's happening in your video.
Another fun thing to do is look at your website using the free Chrome extension, NoCoffee. It simulates various visual disabilities and types of color blindness.
Motor/Physical Disabilities
This one is really broad. Some motor impairments may apply to those who don't have (use of their) hands, arms, fingers, or whatever else you may use to control your mouse and keyboard. Maybe you were in an accident and your hand is broken and in a cast, so you can't type for the next month. Maybe it's just really cold outside and you don't want to take off your warm, bulky leather gloves! Let's face it, the touchscreen-sensitive gloves aren't as warm!
Another more broad example would be a young child who hasn't developed fine motor abilities yet, and may have a hard time moving a mouse to click on a tiny link. (...Yes, this is getting less and less common as more kids are having access to more advanced technology, but not everyone is from a privileged and/or tech-savvy family.)
So, whether your are permanently or temporarily disabled, some easy fixes apply to you.
- Make clickable areas large enough to actually click on. If things on your page are easy to click, people are more likely to click on them. Don't just have the title to your article clickable. Make sure they can click on the image, or the title, or the 'Read More' link, or anything else they may remotely associate with that piece of content. Users will click anything, so make use of those clicks!
- If you utilize hover menus, flatten your navigation. Take out extra layers so you don't have more than 2 nested layers of navigation. Make sure people can actually hover through all your different layers to easily get to the page they need without having to start over and over again.
- A tough one - make sure you can navigate your website without the use of a mouse. Some people simple can't use their hands and feet, and navigate the web by using a sip-and-puff method. I dare you to try browsing your favorite sites using a system like this.
A good way to test some of these out? Have a kid try using your website. Children don't have as keenly developed fine-motor skills, and are more likely to make motor mistakes like this. Though this won't completely fix all your motor-related usability problems, it's a great place to start.
Cognitive Impairments
This one is a little harder to account for since there is a VERY wide range of cognitive impairments to account for. However, a few broad points can keep your site as accessible as you reasonably can have it.
A good place to start is to keep the reading level of your website around the "lower secondary education level," or roughly 12 years old. There are free resources available that can generally gauge what reading level your content is at. I recommend using multiple to get a more accurate idea.
If you have a site that uses a lot of big, complicated, specific words, there are ways you can include in-page definitions or additional resources to help people understand those words. Try using them out on any words pointed out by the free tools I mentioned earlier.
Auditory Disabilities
The solution for auditory disabilities is a little more familiar to most people. If you have a video, provide a transcript and/or closed captioning. No brainer, right? Kind of.
- Please remember to actually create closed captions and transcripts for your videos. And make them easily available. They're helpful to people with "temporary" auditory disabilities too, like when you forget your headphones at work and don't want to disturb your neighbors. Or when the TV at the gym doesn't play sound.
- Creating closed captions can get expensive. Factor that in to your budget next time you want to create a video, especially if it's a long one. There are many companies out there who will create these for you, or you can try to do it yourself.
For bonus points, you can even make these transcripts accessible for people without using a keyboard or mouse.
Speech Disabilities
Finally, we come to speech disabilities. Luckily the web makes this one very easy to get around. The biggest two things to worry about are:
- Voice-only input
- Phone-only communication
The solution? Add a web form to your site and let people email you or start chatting with you.
Additionally, you probably shouldn't build an interface using voice-only input, unless it's extremely obvious that you are developing something for voice only (think Alexa, Cortana, Google Assistant, Siri...). Even then, it's good practice to provide people some other way to accomplish the same tasks, even if it's through a different medium. Luckily, all of these voice assistants accept text-based input as well, just not through all of their hardware devices. However, some like the Echo Show are trying to overcome this!
Okay, now what?
Now you understand all the basics of web accessibility! Congratulations! It's up to you to push your developers to learn WCAG 2.0 compliance (since Web Content Accessibility Guidelines (WCAG) are the newer global standard, an upgrade from Section 508 guidelines), and have it built into their requirements when building new websites. Luckily, there are NUMEROUS free tools available to help guide you towards practical solutions to these common problems. Good luck!
Recommended by Caroline
Bureau of Internet Accessibility (BOIA)
This web-based accessibility suite can scan all the pages and media (PDFs, word documents, videos, etc.) on your domain and give you a health report based on different levels of accessibility (AA and AAA levels). It's a bit pricier, but it takes care of all your automatic scans, and makes manual testing (which you will ALWAYS need in addition to automated tests) much easier by letting you track progress page by page with comments.
Developer Tools
If you need a fast, familiar, and easy solution, just have your developers right click and inspect an element on a page using their favorite browser, or view the source code for a page. This is a fast and easy way to check the health of an element, as long as you know what you're looking for.
WebAIM Color Contrast Checker
Color contrast is going to make you miserable unless you build accessible color palettes into your design guidelines. You may as well do this now and have a list of what colors and variants can be safely used on which backgrounds. This free web-based tool tells you which foreground and background colors pass the minimum contrast requirement for low-vision users, based on the standard (AA) and more strict (AAA) guidelines.