This document provides an overview of WCAG 2.1, which defines guidelines for making web content more accessible. It discusses the four principles of WCAG 2.1 known as POUR, which stand for perceivable, operable, understandable, and robust. Each principle is defined and an example is given to illustrate how it helps ensure accessibility for people with disabilities or other limitations. The overall purpose of WCAG 2.1 is to establish a standard for web accessibility that can be used by designers and developers to learn about guidelines and test accessibility.

1. WCAG 2.1 and
POUR Principles
A11Y AND INCLUSIVE DESIGN SERIES
@ALENAHUANG

2. 1. About WCAG 2.1
2. The POUR Principles
Let’s get started!
What will this guide cover?

3. About
WCAG 2.1

4. Web Content Accessibility Guidelines (WCAG)
2.1 is a guide that defines how to make the
Web more accessible. It is developed by
organizations and individuals around the
world, working to create a standard for Web
accessibility.
Designer and other team members can use
WCAG 2.1 as a resource to learn about
guidelines, how to apply guidelines, and how
to test accessibility through success criteria.
What is WCAG 2.1?

5. Web accessibility is essential in ensuring that
all users are able to access content and to
overall have a great user experience.
Not only does it benefit those with disabilities
but also for...
• People with different devices, with various
sizes and input modes
• People with changing abilities
• People with temporary disabilities
• People with situational limitations
Why is WCAG 2.1 important?

6. Web Content Accessibility Guidelines (WCAG)
2.1 states that the four principles of web
accessibility are...
1. Perceivable
2. Operable
3. Understandable
4. Robust
These principles are the high-level guidelines
that are considered in the design process.
WCAG 2.1: POUR Principles

7. POUR Principles
WCAG 2.1

8. Definition
• The design must be presentable to users in
ways they can perceive
Examples of Perceivable
• Those who are deaf or hard of hearing may
benefit from reading closed captions on a
video
Those with low vision may benefit from
responsive design as it enhances text
readability
1. Perceivable
POUR PRINCIPLES

9. Definition
• The design must have functionality that
works through various modes
Examples of Operable
• Users have full control over an app through
different modes like utilizing the mouse,
keyboard, voice commands, and touch
screen
2. Operable
POUR PRINCIPLES

10. Definition
• The language, design, and functionality
should be clear
Examples of Understandable
• Language is simple for all users with diverse
reading levels
• Design is logical and predictable to different
types of users
3. Understandable
POUR PRINCIPLES

11. Definition
• Content must be able to be interpreted by
various agents, including assistive
technologies (AT)
Examples of Robust
• A website allows for voice commands and
screen readers
4. Robust
POUR PRINCIPLES