If you’re looking into the topic of web accessibility, one thing will show up again and again — the Web Content Accessibility Guidelines, or WCAG. If you’re new to accessible web design, these guidelines can be a bit intimidating—it’s tough to know what to prioritize and where to start. On a practical level, how much of this stuff does one need to know?
I realized that I can’t be the only one wondering what matters most when it comes to the WCAG, so I decided to write the article I wished I had at the beginning. This guide should help you understand the purpose of the WCAG, how to navigate it, and its practical use.
Go ahead and open up the current set of WCAG guidelines in another tab while we work through the basics. When we talk about the structure of the WCAG, a lot of these points will make more sense in context.
We’re using 2.1 as it’s the latest finalized version (2018). The updated version 2.2 is available for reference but not yet finalized.
Please note that, in the following discussion, we are not attempting to provide direct business or legal direction when it comes to the design of your site. Standards vary from one region to another. We just want to offer you a quick, streamlined overview of some of the WCAG’s key principles.
The WCAG in Context
We’ll skip the history of the WCAG’s development for now — while fascinating, it’s largely irrelevant to our walkthrough. All you need to know when you’re getting started is that the WCAG was developed by the World Wide Web Consortium (W3C) — the same organization that helps standardize the modern web.
On a practical level, the WCAG were some of the earliest accessibility standards developed for the web. The WCAG were created to be an international standard; numerous countries either based their own web accessibility requirements on the WCAG or legally mandate WCAG compliance for government sites, public utilities, and many other businesses.
How you should use the WCAG will be determined by your specific context. If you’re operating in a country that requires your business to adhere to WCAG standards, you’ll obviously want to follow these guidelines exactly. If you’re in a country that follows a different legal standard, the WCAG is still a great starting point to make your page accessible.
Even if you are not required to adhere to the WCAG, you may need to comply with a related or similar web accessibility standard. United States Government websites, for example, need to adhere to Section 508 of the Americans with Disabilities Act, which has a great deal of overlap with the WCAG. If you want to learn more about a particular accessibility principle, sometimes the easiest thing to do is investigate the WCAG guideline describing it. There will be numerous resources and explainers available for any of those guidelines if you are unclear about how to implement them.
The WCAG itself was created to help web designers and content creators with everything from basic websites to complicated web apps. If you’re an amateur website creator or a small business owner, it’s unlikely that you’ll be custom coding your entire website for compliance yourself. Use the WCAG to help you select a WordPress theme and to make informed design choices.
The What of WCAG
The ‘Guidelines’ themselves are a list of features that make a website accessible. These guidelines, organized according to four principles. In practice, this lets the WCAG group related ideas together regardless of the accessibility device or technical consideration involved in the process.
Each guideline includes one or more success criteria. These are specific, actionable qualities that designers can use to evaluate their site’s overall accessibility. Each success criterion is prioritized according to the effect it has on site access: level A criteria are absolutely required to make a page accessible, while level AA and level AAA help with more general problems or specific disability groups, respectively.
An Example Guideline
Let’s take a look at one of the most straightforward entries to direct this a bit: Guideline 2.3 and one of its success criteria.
Guideline 2.3 Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions.
As you can see, the guideline is broadly written. A designer can easily read it and know what goal they are trying to achieve, but will need more information to know what counts as a success. The success criteria that follow offer actionable, concrete steps to achieve this goal.
Success Criterion 2.3.1 Three Flashes or Below Threshold — Level A — Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
The criterion is specific and measurable. When you view this entry within the WCAG 2.1 documentation page, there are links to clarifying entries, in depth reference guidelines you can follow, and situation-specific notes relevant to the criterion.
As a level A criterion, the WCAG signals this as a requirement for a safe, accessible site. The other success criteria for guideline 2.3 are additions to the same general idea.
Summary of the Four Principles
The WCAG’s guidelines are organized according to four general principles:
Perceivable: every aspect of the site that exists to inform, or that someone can interact with, needs to be perceivable by all users. So, information displayed visibly needs to also be describable in alt-text for screen-readers. If your site has information in a video, you need subtitles available so that someone can learn what they need even if they cannot hear it.
Operable: Anyone should be able to use every part of your website. This includes things like keyboard interaction for individuals not using a mouse and other navigability issues.
Understandable: Aim for clarity in both design and content. Web pages should be easy to use, so don’t become so ‘out there’ with your design that the page becomes unusable.
Robust: There is only one guideline here and it focuses on compatibility. You want to make sure anyone can access and use your site across a variety of devices, ranging from old computers to screen readers and other assistive technology.
I hope the above has helped provide you with an introduction to the WCAG. Remember, accessible design is a process, not a one-time task. Constantly monitor your site, fix issues as they come to your attention, and you’ll be able to keep your site accessible to all visitors.
Say goodbye to slow loading times and hello to high-performance websites with our new WordPress VPS Hosting plans. Experience 40x faster WordPress page load speeds on purpose-built servers that guarantee 99.99% uptime.
High-Performance VPS Fully-Managed Support Free SSL & Dedicated IP Advanced Server Caching
