Author: Melanie Mudge
Unless you’ve spent a lot of time learning about and working in web accessibility, it can be confusing to understand what exactly is required and which standards apply to your website, app, social media, and other digital content. You may be aware that WCAG matters, but trying to make sense of it all can be a steep learning curve. Trust us when we say we get it!
That’s why we, your digital content accessibility experts at Scribely, are going to break it down for you and remove some of the guesswork surrounding images, video, and audio so that you can be confident that you’re on the right track.
Note: For this article, we will only be focusing on the WCAG criteria that pertain to images, video, and audio. Many of the criteria in WCAG pertain to the technical operation and navigation of a digital space, which will not be covered here.
What Is WCAG?
Just as the Americans with Disabilities Act Standards for Accessible Design explain how to make physical spaces accessible to disabled folks, the Web Content Accessibility Guidelines (WCAG) establish standards for making digital spaces accessible. They’re developed and updated by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative.
Because technology is always changing, WCAG is always evolving to incorporate those changes. As of this writing, WCAG 2.1 is the latest approved version of the guidelines, though 2.2 is due to be released soon and 3.0 has been in development for quite some time.
How Does WCAG Work?
All of the WCAG guidelines are organized around 4 principles (Perceivable, Operable, Understandable, and Robust, aka POUR) that are the basis for making web content accessible. If these principles are not met, then a digital space (website, app, device) is not usable for disabled people.
- Perceivable. Is this content and the user interface presented in a way that users can perceive? This includes everyone, which means that all disability types (e.g. visual, auditory, physical, information processing) should be considered.
- Operable. Is the interface and navigation operable using a variety of methods (e.g. mouse, keyboard, voice control)?
- Understandable. Is the information and the operation of the interface understandable? This means that it should use plain language and shouldn’t rely on things like color, sound, or other sensory cues that not everyone has access to.
- Robust. Is the information robust enough to be reliably interpreted by a wide range of technologies, especially assistive technologies like screen readers and refreshable Braille displays?
WCAG 2.1 also defines testable success criteria for determining whether the guidelines have been met. These are broken into three levels based on ease of achievement and number of users they help.
- Level A (30 criteria). Basic accessibility or minimal conformance. Meeting this level’s criteria means the majority of your users will be able to access and navigate your content, but you may still be liable in accessibility lawsuits.
- Level AA (20 additional criteria). Strong accessibility or good conformance. Makes your content accessible to most of your users. This is also widely considered legally acceptable conformance, meaning that if you meet this level’s requirements, you would likely not be held liable in a lawsuit.
- Level AAA (28 additional criteria). Optimal accessibility and conformance. Your content is accessible to almost everyone. It’s not always possible in every situation to meet Level AAA requirements, which is why this level is mostly for highly specialized contexts.
Each of the levels builds on the previous one, so in order to meet Level AA, you also have to meet all criteria in Level A. This also means that partial conformance is not possible. To declare your website or app as being Level AA conformant, it has to meet all criteria for all elements.
But—and we can’t stress this enough—don’t let perfect conformance distract or discourage you! Remember, the goal of WCAG and of accessibility efforts is to make digital spaces accessible for more folks, not to check items off a list. Therefore, some accessibility is better than no accessibility. So if your app or website meets all the criteria for Level A and 15 of the 20 criteria for Level AA, that’s still a much more usable app than one that meets none of the Level AA criteria. Aim for progress, not perfection.
Where Do I Start with Accessibility?
If you did the math in the last section and were immediately overwhelmed by the 78 total criteria, don’t panic yet. Yes, 78 criteria is a lot, and yes, all of them matter because it means giving real humans the ability to access content and spaces. But as mentioned, the final 28 criteria of Level AAA are only recommended for specific contexts. And most people, whether they realize it or not, aren’t actually starting from scratch, especially if they’re using a web platform like Webflow or if they’ve hired designers and developers who are somewhat versed in accessibility.
So we’re giving you permission to ignore the old adage of “Go big or go home!” and to live by “Slow and steady wins the race” instead. Do that by starting with smaller goals, like achieving Level A conformance, and working your way up. You can even break it down further from there by choosing only some of the criteria in Level A to begin with.
Since the operation and navigation of a digital space can be really complex and may require more time and resources, we like to recommend starting with visual and audio content accessibility. Writing alt text isn’t nearly as involved as fixing how your entire app works and therefore can be a quick, easy win that makes a big difference for your users.
With that in mind, in the next sections we’ll break down all three levels of conformance for images, video, and audio. This will give you a clearer picture of what’s needed for each level of conformance for each of the three types of content. Finally, we’ll offer suggestions for where to start with each type of content.
WCAG Criteria for Images
Level A (basic):
- A text alternative (e.g. alt text or extended description) that serves the same purpose is provided for all non-decorative images and image buttons.
- A decorative image is not linked and is not essential to understanding the content and purpose of a page.
- Complex images will require more in-depth descriptions. These can either be in-context or on a separate linked page.
- All purely decorative images have an empty ALT attribute (alt="").
- If an image is a control for something or accepts user input, it has a name that describes its purpose.
- This name can be hidden in the code so that only assistive technology reads it.
Level AA (strong):
- User interface components (e.g. buttons, menus) and graphical objects (e.g. charts, graphs, icons) have a contrast ratio of at least 3:1 against adjacent color(s).
- Exceptions are made if the appearance can be modified by the user or if a particular presentation is essential to the information.
Level AAA (optimal):
No additional criteria.
Where to Start
As mentioned previously, it’s best to start at Level A. Luckily, for images this simply means adding alt text to your images. To do this, assemble an internal team or hire an external vendor to describe the images on your home page, best-selling products, and future social media image posts. From there, create a plan and budget to implement workflows for making all new images posted to the web accessible.
Not sure how image description works? Check out our Alt Text Masterclass blog series for tips and tricks on alt text and extended descriptions, or let the experts at Scribely train your team!
WCAG Criteria for Audio
Level A (basic):
- A text alternative (e.g. transcript) is provided for pre-recorded audio.
- A transcript for audio must include speaker labels and descriptions of relevant audio moments.
- The audio player offers a way to control the volume of auto-playing audio, independent of overall system sound.
- Embedded audio is descriptively identified in accessible text on the page.
Level AA (strong):
No additional criteria.
Level AAA (optimal):
- Sign language interpretation is provided for all pre-recorded audio.
- An alternative that presents equivalent information is provided for all live audio content.
- Examples: A live text captioning service for a video conference or a transcript of a press release.
For audio that’s primarily speech (podcasts), at least one of the following is true:
- There are no background sounds; or
- The background sounds are 2 seconds or shorter; or
- The background sounds can be turned off; or
- The background sounds are approximately four (4) times or 20 dB quieter than the foreground speech.
Where to Start
Start by incorporating audio transcripts into your workflow for all new audio recordings. Once the audio is finalized, either create your own transcripts manually or use an auto-transcribing service. Just make sure that all transcripts are reviewed for accuracy by a human before publishing. Once that’s implemented, create a realistic plan for adding human-reviewed transcripts to all pre-existing audio recordings.
WCAG Criteria for Video
Level A (basic):
- Captions and either an audio description or a transcript are provided for pre-recorded video.
- A video transcript includes speaker labels, descriptions of relevant audio moments, and descriptions of relevant video moments.
- Embedded video is descriptively identified in accessible text on the page.
Level AA (strong):
Everything in Level A plus the following.
- Captions are included in live broadcasts.
- Audio description is provided for pre-recorded video.
- There are two options for this: 1. The video player offers a way to turn the audio description on and off; or 2. A link to the audio described version is provided in close proximity to the video player.
Level AAA (optimal):
Everything in Level AA plus the following.
- Extended audio description is provided for pre-recorded video where pauses in foreground audio aren’t long enough to allow for sufficient audio description.
- Extended audio description adds pauses into the video for audio description, so this would require a separate version of the video.
- An alternative that presents equivalent information is provided for all pre-recorded video.
- Example: A transcript that also describes what is happening visually.
Where to Start
Since Level A conformance requires either transcripts or audio description for videos, decide which you’d like to provide (both are required for Level AA). Then add human-reviewed auto-captions and transcripts or audio descriptions to your workflow for any new video content. From there, go back and add human-reviewed captions and transcripts or audio descriptions to any popular existing video content.
Did you know? Scribely offers full-service image accessibility solutions, including audio description, transcripts, and captions.
Make Accessibility a Priority
We hope that this breakdown makes it easier to know what is needed to make your visual and audio content more accessible. As overwhelming as WCAG can be, it’s important to remember that the point of the guidelines is to give everyone equal access to an essential public space: the Internet. Billions of disabled folks around the world face barrier after barrier when navigating the web, often rendering it completely useless and denying them access to content, information, essential services, community, and so much more. But through your diligent efforts and commitment, you can be part of removing digital barriers and creating equal access for all.
Don’t let WCAG’s complexity and technicality keep you from increasing your content’s accessibility. Scribely’s content accessibility experts can help you reach your goals through consulting, training, and other services. Contact us today to see how we can help you take accessibility from overwhelming to done.
