Strada is a small (though mighty!) company. Unlike larger companies, we don’t have a dedicated webmaster. But we are dedicated to creating good content for our site visitors. And we’re dedicated to learning web accessibility standards.
Web accessibility standards can be challenging to understand and implement. Maybe you don't know much about coding. Maybe you’re using a Content Management System (CMS), like we use WordPress, to blog or run a company or organization page. Sure, I have Codecademy bookmarked. Someday I’ll learn more about CSS and HTML. Until then, I am so glad I stumbled upon WebAIM’s “Web page Accessibility Evaluation tool,” or WAVE. So glad, in fact, that I wanted to share this tool with you and dedicate a whole post to its features.
WAVE tests your webpage against web accessibility standards. Then it identifies what you need to fix and explains why. And, it's free!
Meeting web accessibility standards even if you’re not exactly a webmaster
We’ve blogged about web accessibility standards and their importance before. In our last post on the subject, we gave tips for formatting text for the web. But web accessibility standards go far beyond text formatting. The World Wide Web Consortium (W3C) -- “an international community that develops open standards to ensure the long-term growth of the Web” -- sets the Web Content Accessibility Guidelines (WCAG ). Their process is collaborative with a far-reaching scope. Their Web Accessibility Initiative (WAI ) publishes WCAG here. WCAG is largely meant to be a technical, updated resource for web developers. Navigate to WCAG 2.0, begin to read, and you might find yourself overwhelmed. (Bypass blocks? Keyboard traps?) So what’s a blogger to do?
Know the rules, even if you don't know how to change them
I think it’s important to familiarize yourself with the web accessibility standards outlined in WCAG. The WCAG document is broken into four principles: perceivable, operable, understandable, and robust. W3C gives a nice summary of web accessibility principles here. The specifics of what to change and how to change will be easier to understand if you can align your site goals with the basic principles.
Figure out what you can and can't change
Your next step should be to find the low-hanging fruit. What can you implement to meet web accessibility standards right away? Don't sell yourself short! Some standards are simply aspects of the composing and page design process -- are your headers and links descriptive? Does info come in a logical order? Do you explain acronyms? If you familiarize yourself with those kinds of standards, you’ll be able to implement them every time you sit down to make a post.
There are a few standards that may require a professional to work on your webpage. For example, we intend to outsource ensuring Accessible Rich Internet Applications to a web consultant. And I'd like to learn more from a professional about skip links as well.
But other web accessibility standards involve things that you can easily fix on your site, coding knowledge or no. Later in this post, I’ll talk about one example: making sure you have a high enough contrast between colors. This makes text and images more visible. If I can do it, you probably can too.
Pick one to get started
If you’ve digested some of the web accessibility standards and principles, you might already have an idea of what you need to check for on your website. Make a list and pick one to start with, even if you're not exactly sure how to make the change. I guessed that our text was not dark enough against our white page background, but wasn’t really sure. WCAG 2.0 guideline 1.4.3 says that, at a minimum “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1” except in a few cases. Their glossary further expounds on the meaning of contrast. But I’ll confess. I still didn't quite know how to find out if our text color met the criteria or not. Enter WAVE.
How to Use WAVE to Solve a Contrast Problem
Identifying the problem
WAVE felt wonderfully intuitive for me to use. First, I input our webpage’s address:
Voila! A list of some of our webpage’s accessibility errors and alerts pops up in WAVE’s sidebar:
Since I’m trying to get a verdict on our text font color contrast, I click “Contrast” in WAVE’s top bar. Then if I click the red flag in the sidebar, I can find descriptions of each contrast error. Contrast error in this case means there’s not enough of a light difference between an element of text or an image against its background. (Note: there are also a Styles and No Styles tabs in the top bar. So much to explore… and fix!)
Understanding the problem
It’s helpful to be familiar with WCAG, but if you’re not, WAVE has you covered. I click the “i” icon next to an error to get more info:
Enter your text here...
If I go back to the red flag “Details” section, I can click on any error. WAVE brings me to its instance on my webpage:
Fixing the problem
Here’s when WAVE’s “Contrast Tools” come in handy. I can experiment with colors to meet the WCAG standard. By clicking lighter or darker beneath the foreground or background color in the WAVE sidebar, I can check if the contrast ratio passes or fails the standard.
We start out with a gray text font (hex #777777) against white. I push “darker” in the Contrast Tool window until the sample passed both tests. Now I know our new gray text font can be (hex #595959).
Even with limited knowledge of coding, I do know how to make minor changes like font color to our CSS in WordPress. In the backend of WordPress, I navigate to Appearance > Editor to get to our stylesheet. Then, under Typographical Elements, I replace #777777 body color with #595959.
WordPress has a guide to custom CSS editing here, though you may want to call in a pro. Either way, at least you know how to use WAVE to find out what to ask for and why.
Resources for the Web, on the Web
WAVE can’t catch everything, but it’s a great place to begin. As you familiarize yourself with various web accessibility principles, you’ll be able to separate out what actions you can take yourself and what you might collaborate on. WebAIM and WAI are great resources that can help you learn more.
If you hit a web accessibility standard that you don’t know how to meet on your own, reach out! If, for example, you’re wondering how to caption or audio describe your videos to meet WCAG guideline 1.2, check out our post on DIY captioning, or talk to our accessible media department. Call 866-758-0194 or email email@example.com.
Ellie has been a TypeWell transcriber with Strada since 2015. A former teacher, she has an MFA in writing, and she lives in Upstate New York.