1 of 20

Introduction to WCAG

2 of 20

Agenda

Introduction to WCAG

WCAG Layers of Guidance

Evaluating ADA-compliance with WCAG

Audience Q&A

Conclusion and Next Steps

Purdue University Global Introduction to WCAG

2

3 of 20

Introduction to WCAG

4 of 20

What is WCAG?

The World Wide Web Consortium (W3C)’s Web Accessibility Initiative (WAI) created WCAG, or the Web Content Accessibility Guidelines
WCAG provides web content creators with specific, technical, and actionable standards to follow, as well as best practices and testing guidelines.
Several laws, such as Section 508 of the Rehabilitation Act, require websites to meet minimum WCAG standards to be considered “in compliance.” Content owners receiving federal funds (like Purdue!) must be able to provide accessibility documentation from an accessibility tester verifying that compliance to the Office of Civil Rights upon request.
WCAG standards are technology-agnostic.

4

The World Wide Web Consortium (W3C) created WCAG, or the Web Content Accessibility Guidelines. WCAG 1.0 was initially published in May 5, 1999. The original version had 14 guidelines. As new assistive technologies allowed new demographics to more easily access online content, WAI reevaluated the original document and released WCAG 2.0 at the end of 2008.
The current update, WCAG 2.1, was released in 2018. As more people started working and going to school online during the first two years of the COVID-19 pandemic, new accessibility issues became apparent. Several of those issues will be addressed in the next version of WCAG, which we’ll review in more detail in a future training session.
WCAG provides web content creators with specific, technical, and actionable standards to follow, as well as best practices and testing guidelines. For example, for each standard, users can find documentation, code examples, and testing criteria.
Several laws, such as Section 508 of the Rehabilitation Act, require websites to meet minimum WCAG standards to be considered “in compliance.” Content owners receiving federal funds (like Purdue!) must be able to provide accessibility documentation from an accessibility tester verifying that compliance to the Office of Civil Rights upon request.
WCAG are technology-agnostic and intended to be applicable across all current and future web technologies, such as HTML pages, PDF and word documents, video players, and more.

5 of 20

Glossary

Layers of Guidance:

Principles: the four main aspects of web accessibility that form the foundation of WCAG 1 and 2.
Guidelines: a list of goals under each principle.
Success Criteria (SC): measurable standards for each guideline.
Techniques: sufficient and/or recommended methods to meet each success criterion.

Authoring Tool: the software or services “authors,” such as web developers, designers, writers, etc. use to produce web content. Examples include websites that let users add content like Reddit or Facebook, multimedia authoring tools like Storyline, and content or learning management systems such as Brightspace.
Input Devices: the tools used to operate online content. Examples include the keyboard, mouse, and/or touchscreen devices. In my speaker notes, I’ve included a few links to videos of people using various input devices.
User Agents: the browsers, media players, plug-ins, assistive technologies, and other programs or software that present web content to the end users.

5

First, let’s go over the WCAG-specific definitions of a few key terms.

WCAG is broken down into four layers of guidance, starting with the four basic principles that form the foundation of WCAG 1 and 2. Under each principle is a list of guidelines, or goals. Each guideline has at least one measurable standard, or success criterion. Finally, each success criterion has one or more techniques for success.

“Authoring tools” are the software or services “authors,” such as web developers, designers, writers, etc. use to produce web content. Examples include websites that let users add content like Reddit or Facebook, multimedia authoring tools like Storyline, and content or learning management systems such as Brightspace.

“User agents” are defined as “any software that retrieves and presents web content for users. This includes “web browsers, media players, plug-ins, and other programs–including assistive technologies–that help in retrieving, rendering, and interacting with web content.”

“Input devices” are whatever tool the our students use to interact with our course content. Examples of input devices include the keyboard, mouse, and touchscreen devices. I’ve included some links to people using various types of input devices in my speaker notes, if you’d like to see them in action.

Watch examples of some less common input devices in use (all links go to youtube.com): sip and puff devices, alphabet boards, switches, voice recognition software, and refreshable braille devices.

6 of 20

WCAG Layers of Guidance

7 of 20

The Four Principles

Perceivable: Content is presented in ways users can perceive
Operable: Interface components and navigation must be designed to be operable with various input devices
Understandable: Users can understand how to operate interface components and the information presented
Robust: Content can be interpreted by a wide variety of user agents, including assistive technology

Purdue University Global: Introduction to WCAG

7

You may have noticed in my test documents and reports that I list out any violated WCAG success criteria. While I definitely don’t expect any of you to memorize all of their names and numbers (I certainly haven’t) it’s worthwhile to have a general understanding of how the violations affect the end user experience on web content. Therefore, I’m going to go over how exactly WCAG is structured.

There are four main accessibility principles identified in WCAG. The first principle, Perceivable, requires information and user interface components to be presentable to users in ways they can perceive. The second principle, operable, requires that all user interface components and navigation must be operable with various input devices. The third principle, understandable, requires that information and operation of the user interface must be understandable to users. Finally, the fourth principle, robust, requires that content can be interpreted reliably by a wide variety of user agents, including assistive technologies.

8 of 20

13 Guidelines: Perceivable

8

Guideline	Definition
1.1 Text Alternatives	All non-text content must have a text alternative
1.2 Time-based Media	Text-based alternatives must be provided for all time-based media
1.3 Adaptable	Content can be presented in different ways without losing information
1.4 Distinguishable	Users can see/hear content and the foreground and background are clearly separate

Under Perceivable, the guidelines are: text alternatives, time based media, adaptable, and distinguishable. Screen readers are only able to read text-based content, and can’t read text within images or videos. Therefore, all non-text content, including time-based media such as videos or audio content, must have a text-based alternative. This includes alt text for images, captions and transcripts or audio descriptions for videos, and transcripts for audio. Other users with disabilities may turn off a website’s styles to make it easier to read the text-based content on the screen. The content should be adaptable enough that this change of presentation will not affect the user’s ability to perceive the content on the page. Finally, it’s important to make it as easy as possible for sighted/hearing users to be able to see and hear the content on the page. This means ensuring that colors in the foreground and background have a sufficient color contrast ratio so colorblind students can still interact with the course content.

I’ve included a screenshot of the Colour Contrast Analyser results for black text on a white background.

9 of 20

13 Guidelines: Operable

9

Guideline	Definition
2.1 Keyboard Accessible	All interactive components are operable by a keyboard
2.2 Enough Time	Users are provided with enough time to read and use content
2.3 Seizures and Physical Reactions	Content is not designed in a way that is known to cause seizures or physical reactions
2.4 Navigable	Users are provided with ways to navigate or find content
2.5 Input Modalities	Users can operate functionality through inputs other than the keyboard

10 of 20

13 Guidelines: Understandable

10

Guideline	Definition
3.1 Readable	Text content is readable and understandable to the target audience
3.2 Predictable	Web pages appear and operate in predictable ways
3.3 Input Assistance	Methods are provided to help users avoid and correct mistakes in interactive elements

This error message is a good example of 3.3 Input Assistance.

11 of 20

13 Guidelines: Robust

11

Guideline	Definition
4.1 Compatible	Content is compatible with current and future user agents such as assistive technology

Use an online validator, like this one created by W3C, to ensure your online content is well-formed.

Finally, there is only one guideline under robust: Compatible, which requires that content is compatible with current and future user agents. I know this sounds vague! Basically, this guideline exists to make sure content is well-formed.

Popular user agents like Firefox, Chrome, or Adobe Acrobat have evolved to be able to “correct” certain types of accessibility and formatting errors so the end user can still have an accessible experience. For example, some users (like me!) use keyboard controls to navigate content online but don’t need a screen reader to perceive the content on the page. Without the screen reader, the only way I know an element has keyboard focus is if the element has a visible focus indicator. Luckily, the current versions of Chrome and Firefox have built-in keyboard focus indicators, although it is not standardized and some browsers do it more successfully than others. That means, if an element on the page can receive keyboard focus, it can still have a visible focus indicator even if the content creator didn’t specifically add one. However, if the end user is using an outdated or less popular browser with a keyboard but without a screen reader, they will have no way of knowing which elements on the page have keyboard focus until they actually interact with the element.

WCAG was designed to be technology-agnostic, though, and not everyone uses up-to-date or current software. Also, because technology is constantly evolving, future students may view our course content with a user agent that doesn’t currently exist. Well-formed content is more likely to work without “backend help” from the user agent.

This is one of the few accessibility tests than can be fully automated. Markup validators verify online content is correctly formed and doesn’t have any errors that may prevent the user agent from correctly presenting it.

12 of 20

Success Criteria (SC)

The numbering before each SC indicates the Principle and Guideline it falls under ([Principle].[Guideline].[Success Criteria]).
Three levels of conformance are defined: A (lowest), AA, and AAA (highest).
Our goal is to meet all WCAG 2.1 AA success criteria.

12

The numbering before each SC indicates the Principle and Guideline it falls under ([Principle].[Guideline].[Success Criteria]). So, for example, if I report a violation of success criterion 1.3.5 Identify Input Purpose, even without knowing the name of the SC, you can see by the numbering that the violation falls under the Principle Perceivable and the Guideline Adaptable.

Success criteria as designated as Level A, Level AA, and Level AAA, with Level A referring to the lowest level of conformance and Level AAA referring to the highest level of conformance. Most organizations, including Purdue, require Level AA compliance. This means that all Level A and Level AA success criteria must be met for the page to be considered in compliance.

Included is a screenshot of SC 1.2.1 Audio-only and Video-only (prerecorded).

13 of 20

Sufficient and Advisory Techniques

For each success criterion, sufficient and advisory techniques to meet required standards are provided.
Advisory techniques go beyond what is required by the SC. Sufficient techniques should be followed to for content to meet each SC.

13

14 of 20

Evaluating ADA-compliance with WCAG

15 of 20

Office of Civil Rights (OCR) Audits

OCR conducts audits on federally-funded online content to ensure compliance with WCAG standards.
Purdue underwent an OCR audit this year. The process was extensive, and we had to provide the following information:

A list of the top 25 courses based on enrollment numbers.
VPATs or other accessibility reports detailing any WCAG 2.1 A and AA violations for each tool used within those 25 courses
A brief explanation of how the tool is used and any development notes or accessibility concerns (for example, they wanted us to note if a tool is due to be replaced or if there are any outstanding accessibility issues.
An overview of the accessibility review process.
Any accessibility-related student complaints or concerns.

15

OCR conducts audits on federally-funded online content to ensure compliance with WCAG standards.
Purdue underwent an OCR audit this year. It took use several weeks to prepare a response because of the sheer volume of documentation we needed to provide. In our response, we had to provide the following information:

A list of the top 25 courses based on enrollment numbers.
VPATs or other accessibility reports detailing any WCAG 2.1 A and AA violations for each tool used within those 25 courses
A brief explanation of how the tool is used and any development notes or accessibility concerns (for example, they wanted us to note if a tool is due to be replaced or if there are any outstanding accessibility issues.
An overview of the accessibility review process.
Any accessibility-related student complaints or concerns.

If that required information sounds familiar, you’ve probably used the third-party tools request form recently. Please be sure to answer all of the questions in the third-party tools form, because that information may be needed to complete future audits.

16 of 20

Accessibility Reports

Voluntary Product Accessibility Templates (VPATs) have a standardized format. All WCAG 2.1 success criteria are listed, separated by level, and the tested content’s level of conformance is indicated for each standard. There are five levels of conformance:

Supports: the criterion is met.
Partially Supports: the criterion is met in some but not all instances, or the ADA-compliant content is not a sufficient alternative.
Does Not Support: the criterion is not met.
Not Applicable: The criterion is not relevant.
Not Evaluated: The criterion was not evaluated. This is only used for AAA success criteria.

Accessibility Conformance Reports (ACRs) are not standardized and come in a variety of formats. These reports contain a list of WCAG violations found in the evaluated tool. In some ACRs, like my test documents, the evaluator provides additional details about the violations, such as suggested fixes or links to documented techniques.

16

Voluntary Product Accessibility Templates (VPATs) have a standardized format. All WCAG 2.1 success criteria are listed, separated by level, and the tested content’s level of conformance is evaluated and indicated for each standard. There are five possible responses in the level of conformance column:

Supports: the criterion is met.
Partially Supports: the criterion is met in some but not all instances, or the ADA-compliant content is not a sufficient alternative.
Does Not Support: the criterion is not met.
Not Applicable: The criterion is not relevant.
Not Evaluated: The criterion was not evaluated. This is only used for AAA success criteria.

Accessibility Conformance Reports (ACRs) are not standardized and come in a variety of formats. These reports contain a list of WCAG violations found in the evaluated tool. In some ACRs, like my test documents, the evaluator provides additional details about the violations, such as suggested fixes or links to documented techniques.

17 of 20

Conclusion and Next Steps

18 of 20

Key Takeaways

The four principles of web accessibility are Perceivable, Operable, Understandable, and Robust. This is the foundation for WCAG.
Our goal at Purdue is to meet all WCAG 2.1 A and AA success criteria.
VPATs and ACRs are test reports that indicate if a website, tool, or application is in conformance with all applicable WCAG success criteria.

18

I know that was a lot of information you won’t need in your day-to-day work, but I hope it has given you a better understanding of what ADA compliance actually means on a technical level. All of my test documents are based on WCAG criteria. Accessibility documentation from third-party vendors helps me determine whether a tool meets all applicable WCAG SC. The accessibility best practices I’ve mentioned in previous trainings are based on the sufficient and advisory techniques for each SC. WCAG is and will continue to be an essential consideration for all online content creators.

So, what do I hope you’ve learned in this training? I have three key takeaways:

The four principles of web accessibility are Perceivable, Operable, Understandable, and Robust. This is the foundation for WCAG.
Our goal at Purdue is to meet all WCAG 2.1 AA success criteria.
VPATs and ACRs are test reports that indicate if a website, tool, or application is in conformance with all applicable WCAG success criteria.

19 of 20

Next Steps

In our next training session, I will review the Perceivable Level A Success Criteria. Additionally, I’ll show you how to make the following types of content meet the relevant WCAG 2.1 success criteria:

Images
Video-only or audio-only content
Video content with audio
Text
Lists
Tables
Audio controls

To learn more about WCAG, please visit W3C’s Understanding WCAG 2.1.

19

20 of 20

Questions?