Nine percent of the U.S. population has a disability. With numbers like that, accessibility shouldn’t be an afterthought, it should be a priority. The WCAG is working to make that goal a reality. But as with any robust set of guidelines, making them understandable can be an undertaking. That’s where we come in.
Here’s a breakdown of the WCAG: what it is, the four principles that drive it, and some steps you can take to make your website more accessible.
What is the WCAG?
The Web Content Accessibility Guidelines or WCAG are a detailed set of guidelines for making online content more accessible to people with disabilities. The first iteration, WCAG 1.0 was drafted on May the 5th, 1999. It was followed by the WCAG 2.0 almost a decade later on December 11th, 2008.
Both sets of guidelines are focused on standardizing coding and design practices with accessibility in mind.
WCAG Principles
The WCAG can be broadly broken down into 4 principles. These are descriptors that web content must achieve to be considered accessible.
Web content must be:
- Perceivable
- Operable
- Understandable
- Robust
Let’s dive into each of these principles in depth to better understand them.
Perceivable Content
To be considered accessible, content must be perceivable in some way using 1 or more of a person’s senses. To ensure content is perceivable, you should:
Provide Text Alternatives for Non-Text Content
Non-text content can include anything from images to video to audio. The key here is that people who can’t perceive graphical or audio content—blind or deaf people, for example—need to be able to understand the graphical or auditory information in a way that’s accessible to them.
Some examples of text alternatives include:
- Suitable alt text on all images
- Transcripts of video and audio content
- Form elements that have text labels that describe their function
By providing suitable text alternatives, you’re ensuring content can be accessed by those using assistive devices such as screen readers or braille displays.
Provide Alternatives for Time-Based Media
Time-based media is multimedia with a duration. This includes audio and video content. Much of this section can be broadly covered by providing text-based alternatives, but there are some extra steps you can take to provide alternative means of understanding time-based media.
These include:
- Providing an equivalent sign language video alongside audio content
- Including closed captioning on all video content
Providing alternatives for time-based media ensures that your content is accessible to Hard of Hearing of Deaf people.
Create Content That Can Be Presented in Different Ways
This guideline requires that content be able to be consumed by users in different ways. This ensures you\’re accommodating to the various needs of your users.
This can include ensuring visual relationships between content can also be understood programmatically. For example, a table of content should be structured using the correct HTML elements so that the content is understood by screen readers and other assistive devices.
You should also ensure that instructions for understanding content or operating controls don’t rely on one sense. For instance, a call to action that says Click the big red button wouldn’t be accessible to those who can’t see the styling of said button.
Operable Content
Operable content refers to the ability of users to control UI elements. These elements can include buttons, form elements, or text input.
You should:
Make All Functionality Accessible via a Keyboard
This guideline specifies making core website functionality available via keyboard in addition to other means such as a mouse.
Some examples of keyboard controls include:
- The ability to tab through form controls
- The ability to close pop-up windows using only a keyboard
- The ability to remap or turn off single character shortcut controls
All this ensures that users who rely on keyboard controls can properly navigate and access an asset’s functionality.
Provide Users Enough Time to Read and Use Content
This guideline covers situations where functionality might have a time limit. For instance, online purchases often need to be completed within a set time limit for security reasons.
To ensure you comply with this guideline, you should:
- Give the user controls to adjust, extend, or turn off time limits
- Provide the ability to turn off or move blinking content (eg: countdown timers)
- Provide the ability to re-authenticate a session without losing user data
These points serve to ensure your users are given ample time to use and read your page or asset.
Don’t Design Content in a Way That Is Known to Cause Seizures or Physical Reactions
This guideline refers to content that, if maintained, could cause seizures in those with conditions such as epilepsy. It also refers to content that could affect users with physical reactions as a result of conditions such as vestibular disorders.
To comply with this guideline, you should:
- Not build any content that flashes more than three times per second
- Allow users to disable any visible animations
Following this guideline will ensure the safety and wellbeing of your users.
Make It Easier for Users to Operate Functionality Through Various Inputs Beyond Keyboard
Conformance with this guideline ensures users are able to interact with web assets using different methods other than a keyboard or mouse. This can include a touchscreen, voice control, or device motion.
Understandable Content
Your content must always be understandable to your users. This means you should:
Make Text Content Readable and Understandable
Your content should be easily understood in the language expected by your users. Where harder words or niche slang is used, clear definitions should be provided.
Make Web Pages Appear and Operate in Predictable Ways
This point refers to the usability of a website. All controls should be intuitive and understandable. For example, link rollover states should be employed and navigation controls should be consistent and easy to use.
Help Users Avoid and Correct Mistakes
This guideline refers to aiding users when inputting information. For example, when inputting text fields, clear warning messages should be displayed if incorrect information is entered.
Robust Content
Your content must be developed using well-established web standards. This ensures your content will work across different browsers right now and also works to future-proof your projects.
To do this you should:
Maximize Compatibility with Current and Future User Agents, Including Assistive Technologies
Your content should be well-formatted so that browsers can successfully parse it. Well-formatted content also ensures that other user agents such as screen readers can access the information being presented.
To aid with this, ensure:
- Your HTML is valid
- The name and role of interface components is programmatically determinable
- You’re using semantic elements correctly
All of these points will work to future-proof your content and ensure that the widest range of people can access it in the present.
Make the WCAG Understandable
Making the WCAG understandable is no easy task. They’re a detailed set of guidelines intended to aid in accessibility and accessibility is a varied subject. Hopefully, this breakdown has helped you get a better understanding of the WCAG.
Want help auditing your website for accessibility? Get in touch today and see how we can help you.