What’s WCAG?

Web content accessibility guidelines (WCAG) are a set of guidelines written by the World Wide Web Consortium (W3C) to establish expectations that every website should follow. These guidelines are regularly updated as the W3C adapts them for new assistive technologies that people with disabilities use to access web content.

The current version, WCAG 2.2, outlines the success criteria for up to three WCAG compliance levels: A, AA, and AAA. These standards for website accessibility include supporting screen readers, using predictable navigation, and offering captions for videos. While WCAG 2.1 is the standard, 2.2 is understood as the latest update in progress.

With Vimeo, you can safely include video content that meets accessibility guidelines and ensures the best viewing experience for your entire audience.

Discover Vimeo’s accessible player →

Why is WCAG so important?

Meeting web accessibility criteria is about more than just following some tips — it’s an essential ingredient in good web design. Here are just a few benefits you can expect from complying with the WCAG.

A larger audience

People with disabilities or visual impairments use assistive technologies like screen readers and adaptive keyboards to navigate web content. If your site doesn’t provide alt text or alternative navigation options, these potential customers can’t engage with it. That makes for a frustrating experience for them and a smaller user base for you.

A better website

Intuitive navigation, easily readable text, and translation options are important accessibility considerations, but they’re also good web design choices on their own. If you begin with WCAG in mind, you’ll find that the website you create is better for it, and your audience will appreciate its usability.

Legal compliance

In Title II of the ADA, the Department of Justice specifically outlines how public spaces, including websites, must accommodate people with disabilities. Meeting at least AA conformance helps you avoid significant fines, lawsuits, and negative publicity.

Check out more of Vimeo’s accessibility practices →

The 4 guiding principles of WCAG 2.2

To help web accessibility guidelines resonate, WCAG outlines four guiding principles that make criteria easier to understand. They’re often abbreviated POUR, which stands for the following four accessibility pillars.

1. Perceivable

To make your content perceivable, it must be highly readable. This means using plain language, including alt text and live captions, and ensuring proper color contrast. The more complex your website, the more you’ll have to help people with disabilities read and navigate it.

2. Operable

An operable website makes every interaction accessible through methods like keyboard navigation and screen readers. To test whether your website meets these accessibility criteria, try navigating through it with just your keyboard and using a screen reader to check whether it can detect every piece of text.

3. Understandable

Keeping a website understandable means making it consistent and predictable so people with disabilities can intuitively follow the intended user experience. Unless you’re making an experimental art piece, overly complex or unintuitive websites won’t feel fun for anyone.

4. Robust

A robust website supports various assistive technologies and guarantees that alt text, captions, and navigation options are made to a high standard. It isn’t enough to just insert these features — they must all offer a robust experience that matches a regular UX as closely as possible.

Your checklist to ensure WCAG compliance

With the POUR principles in mind, it’s time to narrow down all success criteria you must meet for at least AA WCAG compliance. If you implement all of the following, you’ll be well on your way to providing accessibility to all visitors.

Use plain language

Your web content should be readable and understandable to a wide audience. Avoid technical jargon and complex sentence structures that would exclude people with learning disabilities. Also, don’t use ableist words like “cripple,” “lame,” or “spastic.” There are better words to use that won’t offend anyone, like “hinder,” “impaired,” or “unpredictable.”

Include captions and transcriptions

Include captions and transcriptions for any videos you use on your site and double check that they’re accurate. Make them easy to find and test your site with screen readers so you know if these options work as intended.

Use accessible fonts

Use modern, readable fonts that lessen the impact of dyslexia and reading disabilities. You can still use decorative serif fonts, but check any that you use against WCAG’s font guidelines, which include guidance on spacing and character ambiguity.

Provide options to resize text

Offer a menu where website visitors can increase text size so those with visual impairments can have a pleasant reading experience. It’s best to offer three options that increase the text size in 25% increments, like 12pt, 16pt, and 20pt.

Add adjustable timing options

If your site has animations, timed interactions, or video content, offer a menu that allows users to adjust their timing if they wish. That way, they’ll remain accessible to users who need more time to navigate or interpret them.

Check keyboard accessibility

Test your web content with accessibility testing tools to ensure its accessibility through keyboards and other alternative navigation controls. The Tab key is often used to cycle through options, so check that using it properly moves through all the possible interactions on each web page.

Add toggleable flashing animations

Try not to rely on animations or videos that quickly change between highly contrasting colors or images, because it’s possible that you could trigger seizures in some users. If you’re using these animations for a specific reason, make sure to include a warning before they play (with appropriate captions).

Provide alternative text

Your video thumbnails should specifically call attention to the fact that clicking them will begin a video. Include alt text for every image on your website. Screen readers will read these descriptions to website visitors, so make sure they accurately and thoroughly describe the image.

Ensure consistency in navigation

Set up your navigation menus and options to follow a predictable pattern. Every interaction should lead to the page a user would expect, and the navigation methods should stay the same throughout. That also applies to interacting with a video, where you need to make sure viewers can fast-forward, rewind, and pause every video the same way.

Use familiar design patterns

All your layouts, forms, and interactions should follow a consistent pattern that users can follow. That doesn’t mean you can’t get creative with them, but there should be a predictable design language to maintain accessibility. If one page is wildly different to navigate than all the others, it may throw some users off.

Provide translation options

Include a drop-down menu that offers your web content in different languages so multilingual readers can choose the best language for them. Do the same with your video content and use audio dubbing tools to translate your video into multiple languages.

Learn more about Vimeo’s AI translator →

Simplify WCAG video compliance with Vimeo’s fully accessible player

WCAG conformance doesn’t need to add friction to your web design process. Instead, think of it as a guiding principle that helps you discover the best way to make your web content readable. There are several tools that can help you do this, and Vimeo is proudly one of them.

Vimeo’s online video player is engineered to meet WCAG 2.2 AA standards. It offers audio descriptions, translations, captions, and adaptive controls for various assistive technologies. With Vimeo, you can safely include video content that meets accessibility guidelines and ensures the best viewing experience for your entire audience.

Get started on your WCAG compliance journey with Vimeo today.

Sam Lyon