5 Resources for WCAG 2.0 Compliance
Whether you own, design, or optimize websites, you’ve most likely heard about web accessibility and perhaps even some of the laws and best practices that support the creation of accessible content. Let’s talk about what accessibility is, other than a word that seems impossible to spell correctly (about a third of the below misspellings of the word were used just while writing this post), and what it means for web creators.
What is website accessibility?
In short, web accessibility means that your website ought to be Perceivable, Operable, Understandable, and Robust (POUR) for all users. Not only is a website’s accessibility significant for its users, but it can also make a significant impact on a site’s SEO performance. For someone in SEO, accessibility means that if content is difficult for some users to access, it may be difficult for search engine crawlers. There’s some evidence to suggest that even if Google can access and parse web content, it may regard content that doesn’t meet WCAG standards as a sign of poor user experience, which can impact search performance as well. This means that Google may not be able to gather needed information to accurately present the site in search results in a meaningful way. This is one of the reasons why accessibility is a core component of UpBuild’s SEO Audits, as it’s part of the foundation for optimized performance. That said, the SEO benefits aren’t the main reason to place focus on web accessibility.
Why is web accessibility important?
There are over one billion people living with disabilities worldwide, and the advances in assistive technologies and practices have impacted lives all over the world. Two of those lives include my dad, who is severely red-green colorblind, and my mom, who was born 85% deaf and has worn hearing aids since the age of three. My parents often joke that their relationship is built on what my dad said to my mom and what she thinks she heard. This is a surprisingly apt metaphor for the relationship between how a site is designed and what a user actually experiences.
Being so close to two people who experience the world so much differently than most of us do, I’ve seen firsthand the difference made when people and institutions take action and make an effort for the betterment of everyone’s experiences. For instance, my mom is now able to enjoy going out to the movies (or she was prior to 2020), something she wasn’t really keen on doing before theaters started offering closed-captioned shows (unfortunately, she still isn’t keen on science fiction, one of my dad’s and my favorite genres).
Not only can inaccessibility hinder a user’s experience and your website’s SEO, but if your site is deemed inaccessible by the World Wide Web Consortium, or W3C, there can be various legal ramifications potentially resulting in lawsuits and expensive settlements. This legal trouble is not as rare as you might think, a recent notable example being a series of lawsuits against over 75 websites belonging to art galleries across New York in 2019.
At this point, I hope we can agree that accessibility has proven itself important, both in common decency and in relation to website usability and performance. The unfortunate reality is that although our hearts and our minds might be in the right place, fully understanding web accessibility takes time, sometimes even years. That doesn’t mean we can’t start optimizing for accessibility right away; there are many ways that even web beginners can start prioritizing accessibility. How, then, do we go about getting started with understanding, testing, and improving site accessibility? The following resources have helped me along the way and I hope you find them useful as well.
1. Optimizing Your Website for Accessibility by The A11Y Project
This webinar presented by the team at The A11Y Project, a digital accessibility resource platform, is a great first step in comprehending web accessibility and the principles of accessibility (Perceivable, Operable, Understandable, and Robust) as defined by W3C. These principles are broken down into the Web Content Accessibility Guidelines (WCAG 2.0) and are rated in three levels of accessibility conformance – A, AA, AAA or Silver, Bronze, and Gold if the current WCAG 3.0 draft becomes ratified.
For those of us who learn best through demonstration, I highly recommend this as a comprehensive introduction to web accessibility. The presenters in the A11Y webinar succinctly break down the POUR principles and provide applicable examples of good vs. poor accessibility practices.
2. Web Accessibility Evaluation Tools List by W3C
Once you understand the basics, it’s time to find some tools that can help you design, test, and improve your site’s accessibility. You could perform a simple Google search for accessibility tools; however, I recommend this list as a starting point. Since the list is managed by W3C — the governing entity for web accessibility compliance — it is highly comprehensive, with over 350 tools from different regions of the world, in multiple languages, and with various capabilities and features. Furthermore, unlike Google search results, this list can be easily cross-filtered by criteria such as Guidelines, Languages, Type of Tool, Supported formats, Assists by (e.g. step-by-step guidance or generating a report), Automatically checks (single pages or whole sites), and License (e.g. Open Source).
To give you an idea, I’ve filtered the above view with WCAG 2.0, English, Online tool, Displaying information within web pages, Single web pages, and Free Software. This provided me with three results that match my specifications, from which I then get quick information about these tools and can even share the list or individual items with others.
3. WAVE Browser Extension by WebAIM
WAVE is a set of tools developed by WebAIM to help test individual web pages for accessibility errors and features. The WAVE browser extensions for Firefox and Chrome are free to use and they provide quick on-page reporting. Because I use this tool regularly, I’ll call attention to some specific features that I appreciate about WAVE.
- Visual markers. If you take a look at the WAVE analysis snippet above from Vanspace3D.co (shout out to my fellow free spirits), you will see icons of various designs and colors. WAVE uses these color-coded categories and icons to identify specific errors and features within a site so that you can find and identify issues quickly. You can find details about individual icons in the Reference section of the sidebar or all icons via their icon documentation page.
- Code-specific identification. At the bottom of each WAVE report, you’ll see a green tab that reads “</> Code”. Click on this tab and select any WAVE Icon under the Details category to see the corresponding line of code highlighted in this window. This allows you to directly see what code is being flagged and how it needs to be addressed based on the WAVE Icon. For people who understand being at the “combination Pizza Hut and Taco Bell,” you’ll know why people who like high-level visual representation alongside in-the-weeds technical details love this feature.
- Built-in Checklists. Who doesn’t love a good checklist? I know I do. Next to each flagged element and category in the sidebar under Details, you’ll notice a blue check box. Check or uncheck elements or categories to see them flagged and unflagged on the site as you assess or resolve elements.
4. Creating an Organizational Accessibility Strategy by Pope Tech
As much as we would love to think of accessibility as a one-and-done action, it isn’t, and often it can take months or years (not to mention ongoing improvements) to achieve complete accessibility. In this blog post from Pope Tech, an enterprise accessibility solution endorsed by WebAIM, they discuss how an overarching strategy is important to successfully achieve and maintain accessibility, especially when dealing with multiple sites or very large sites.
After completing the first step of their post by determining your scope (number of web pages), the next two steps take a divide-and-conquer method to address issues flagged through the WAVE software.
First, resolve sitewide Errors & Contrast Errors. I mentioned earlier that there can be legal ramifications for having an inaccessible site, and this is where these two icons come into play. Errors and Contrast Errors are what will get your site into the most trouble as they identify areas of your site that make content inaccessible; luckily, these errors are also usually the easiest to resolve and resolution can often be automated. Additionally, when you begin fixing these, you gain a basic knowledge of what makes content inaccessible. On this base knowledge, you can build as you move up to more difficult areas of accessibility.
Next, manually test key pages for Alerts, Features, Structural Elements, and ARIA. Once you have a foundation for accessibility with sitewide elements, it’s time to move onto more difficult items. These items require manual testing because you’ll need to confirm whether the tool is flagging them as false positives and if what is currently used on-site is sufficient. That is why Pope Tech recommends testing and implementation on high-performance pages first. Typically, these will be landing, product, and content pages.
This strategy not only allows you to gradually learn accessibility, but it’s a sustainable and scalable way of addressing accessibility on your current or future site.
5. ColorCube by Ooomph
In previous posts, we’ve discussed how color contrast impacts conversions and how you can improve color contrast for accessibility and SEO. In the latter post, we demonstrate the use of two color contrast tools, Tanguru’s Contrast Finder and WAVE’s built-in color contrast tester. Since color contrast is important to SEO and is also one of the first issues you’ll face in web accessibility, I’d like to spotlight ColoCube as one more resource to add to your accessible color design toolbox.
ColorCube, created by Ooomph and found on GitHub, is a way for you to test a series of colors in one place by entering a list of colors as well as a light and a dark color for text and or backgrounds. Once you’ve entered your color choices, you will see a ratio chart like the one below.
The left hand column labeled “Original” houses the entered colors from your list and their corresponding hue, saturation, and lightness (HSL) levels. In the “Modify” column, you can adjust the HSL levels to see the output in the columns on the right labeled “With light” and “With dark” meaning the light and dark colors you entered. The direct contrast ratio shown above the color box is your chosen color against the light or dark choice. To the right of each contrast box is the adjusted contrast ratios with different text sizes. If the ratio meets the WCAG standards, you will see a green checkmark on the right. If not, there will be a red “X” and the box will have a diagonal strikethrough. In the last column you can customize a background color with your original color displayed as text.
Accessible websites begin with accessible web design and being able to compare and adjust several colors at once makes this tool valuable for even very robust and complex brands or websites.
Beyond WCAG Compliance
Having the knowledge and tools to make your site accessible and avoid settlement letters is very important, but is it the ultimate goal? When I think of the distinctions between “doing the bare minimum” and “creating a good user experience,” I recall the early days of closed captioning. Early on, when less conscientious captioners roamed the land, you might have started up a show or movie just to find that the black subtitle text block scrolled right across the faces of the actresses and actors. Or, the text provided flat-out didn’t match what was being said or conveyed — not exactly a viewer-friendly experience. In a similar fashion, a site that technically conforms to the WCAG requirements still might be difficult for users to navigate or might otherwise create an undesirable experience. For instance, if you have completely submerged your site in ARIA name labels, it would not only slow your site down, but it would be like me introducing myself as Tiffany and then going on to say “Hi, my name is Tiffany.”
There is a lot to learn about the tenets of web accessibility. Someone could probably spend a lifetime on it and still not know every little detail, especially since the web and assistive technologies are both constantly evolving. Even so, there is always more that we can do to improve accessibility for clients, for SEO & web development professionals, and most importantly, for users. It is a belief and practice that benefits everyone and to which everyone can contribute in some way.
If there is a resource, tool, or methodology you have found useful for tackling web accessibility, let us know in the comments below.
