WCAG 2.

2
It’s ooooooh so close! 508

AUDIT

ARIA
ADA
WCAG
WCAG 2.2 is here! (?)
• A Very Brief History of WCAG
• WCAG 2.2
• New criteria
• Other changes
• WCAG 2.2 in Regulations
• Future of WCAG
• Questions & wrap-up
Melanie Philipp (she/her)
Director of Services Methodology, Deque Systems
Member of W3C’s AGWG since 2017
Deque’s Advisory Committee Representative to the W3C
Wilco Fiers (he/him)
• Principal product owner, axe-core & axe-linter,
Deque Systems Europe
• Project Manager WCAG 3, W3C
• Facilitator ACT Task Force, W3C
A Brief History of…
The Web Content Accessibility Guidelines
Introducing WCAG
• Guidelines published by the World Wide Web
Consortium (W3C)
• Developed and maintained by the Accessibility
Guidelines Working Group (AGWG)
• Advises “content authors” on how to make e
o te t accessible to people with disabilities
• Written to be “technology agnostic”
• Has been adopted by regulations across the globe
• Has three levels: A, AA, and AAA
A Timeline of WCAG Development
1997 - 1999: WCAG 1.0
2001 - 2008: WCAG 2.0
2017 - 2018: WCAG 2.1
2020 - 2023: WCAG 2.2

WCAG 3.0
2016: Research begins
2021: WCAG 3.0 First Draft
What’s New In WCAG 2.2
WCAG 2.2 - Highlights
•
•
•
•
•
•
 e ess riteri
Improving Mobility Accessibility
2.4.11 & 2.4.12 Focus Not
Obscured - AA & AAA
2.4.11 & 2.4.12 Focus not Obscured (AA & AAA)
erso ote “Hey, stop hiding my keyboard focus!”

ry When navigating by keyboard, the focused

element must not be (completely) covered by other content.

Ho it e s Helps people who rely on a keyboard to

navigate a web page by ensuring focusable elements are not
(completely) covered by other content.

t to o Ensure when an item gets keyboard focus, it is at

least partially visible (or fully visible for AAA).
2.4.11 & 2.4.12 Focus not Obscured - Example
2.4.11 & 2.4.12 Key Concepts 1
Common failures:
• oo ie o se t er If focus can go behind it before it is
dismissed.
• ti y e er If the header covers focused elements while
shift+tabbing back up the screen.
• e If it stays open when focus is moved away and cannot be
dismissed while focus is not on it.
• t i et If it opens automatically OR if it is user-opened but
cannot be dismissed while focus is not on it.
2.4.11 & 2.4.12 Key Concepts 2
If the interface is configurable so that the user can move toolbars and
non-modal dialogs around, only test the initial positions of the
user-movable content.
For example: a drawing application opens with toolbars set in default
positions, but the user can move the toolbars to other locations while
working.
2.5.7 Dragging Movements - AA
2.5.7 Dragging Movements - AA
erso ote “Errrrrgh! I can’t do this drag and drop! I need
another way to do this!!!”

ry Drag and drop movements cannot be the only way to

do something with a pointer such as a mouse or a finger touch.

Ho it e s Helps people with mobility disabilities who struggle

with performing precise dragging motions by providing alternative
ways to do the same thing.

t to o For any action that involves dragging, provide a simple

pointer alternative.
2.5.7 Dragging Movements - Example 1
2.5.7 Dragging Movements - Example 2
2.5.7 Key Concepts 1
What is “Dragging”?
“An operation where the pointer engages with an
element on the down event and the element (or a
representation) follows the pointer until an up event.”
Think of this as moving something from one place to
another in the UI.
A dragging movement has four actions:
• Tap or click to establish a starting point, then
• Press and hold that contact while...
• Perform a repositioning of the pointer, finally...
• Release the pointer at the end point.
2.5.7 Key Concepts 2
It is possible for a Dragging function to pass SC
2.1.1 Keyboard and still fail 2.5.7 Dragging
Movements.

A Dragging feature that has a

keyboard-accessible equivalent may not work
using only clicks or taps.
2.5.8 Target Size (Minimum) - AA
2.5.8 Target Size (Minimum) - AA
erso ote “I need buttons big enough that I can press
the right one!”

ry Controls must have a minimum size or spacing

around them to provide a touch area of 24x24 CSS px. There
are multiple exceptions.

Ho it e s Helps people with mobility disabilities activate

controls without accidentally activating an adjacent control.

t to o Ensure targets meet a minimum size or have

sufficient spacing around them.
2.5.8 Target Size (Minimum) - Examples
2.5.8 Target Size Key Concepts 1
e tio i
A 24 px diameter circle centered on the target does not touch another
target nor a 24 px diameter circle placed on the center of any other
adjacent targets.
2.5.8 Target Size Key Concepts 2
e tio i e t
The function can be achieved through a
different control on the same page that
meets this criterion.
2.5.8 Target Size Key Concepts 3

e tio i e
The target is in a sentence or
its size is otherwise
constrained by the line-height
of non-target text.
2.5.8 Target Size Key Concepts 4
e tio ser e t o tro
The size of the target is determined by the user
agent and is not modified by the author.
Examples include: browser default sized radio
buttons, checkboxes, <select> elements, date
pickers, etc.
2.5.8 Target Size Key Concepts 5
e tio sse ti
The size or presentation of the control is
essential or is legally required for the
information being conveyed. Examples:
sse ti Maps where the position of location
pins is essential to accurately show places on
the map.
e y re ire If a government legally
requires an online form to visually copy a
paper form exactly, the size of controls would
be determined by the design of the form.
Axe DevTools Demo
Go to the Demo page
Open axe in the Developer Tools
Make sure to be logged in
Under Settings ⇾ Rules and Issues
select WCAG 2.2
Analyze the page
2.4.12 Focus Appearance - AAA
2.4.13 Focus Appearance - AAA
erso ote “Where in the world is my keyboard focused?”

ry When an element has keyboard focus, the focus

indicator must meet minimum criteria for size and contrast with
the unfocused state.

Ho it e s Helps people who rely on a keyboard to navigate a

web page clearly identify where the focus is by providing a visible
focus indicator with good contrast and size.

t to o Use a focus indicator of sufficient size and contrast.

2.4.13 Focus Appearance - Examples
2.4.13 Key Concepts 1
Focus indicator must:
• Be at least as large as the area of a 2 CSS pixel thick perimeter of the
unfocused component.
• Have a contrast ratio of at least 3:1 between the same pixels in the
focused and unfocused states.
2.4.13 Key Concepts 2
Exceptions:
• The focus indicator is determined by the user agent and cannot be
adjusted by the author.
• The focus indicator and the indicator's background color are not
modified by the author.
 e ess riteri
Improving Cognitive Accessibility
3.2.6 Consistent Help - A
3.2.6 Consistent Help - A
erso ote “Help! I can’t find how to get help
on this web site!”

ry WHEN a help feature appears on multiple

pages, it is provided in a consistent location.

Ho it e s Helps people locate help or support

provided by a website.

t to o Put help in the same place when it is on

multiple pages.
3.2.6 Consistent Help - Examples
3.2.6 Key Concepts
This Criterion does NOT require that help be provided.

It requires that IF help is available on multiple screens, it is in a

consistent programmatic location, for example, in the same relative
code order within a page area such as the header or footer.

The help location may change as the viewport size changes, but it must
be consistent across pages at the same viewport size.
3.3.7 Redundant Entry - A
3.3.7 Redundant Entry - A
erso ote “Don’t make me enter don’t make me enter, the same
info twice the same info twice.”

ry Do not require people to enter (ex: type or dictate) the same

information more than once during a process.

Ho it e s Helps people with cognitive disabilities minimize mistakes

and successfully complete a ti ste ro ess by not requiring
information entered in one step to be entered again in a later step.

t to o Don't ask for the same information more than once in the
same session.
3.3.7 Redundant Entry - Example 1

A form on an
e-commerce website
allows the user to
confirm that the billing
address and delivery
address are the same
address.
3.3.7 Key Concepts 1
If info is needed a second time, provide a way to
select the info without retyping it such as:
• Selecting and populating a field, such as from a
drop-down
• Checking a checkbox to populate inputs with
the same values as previously entered (e.g., my
billing address is the same as my shipping
address).
3.3.7 Key Concepts 2
Exceptions:
• Re-entering the information is essential

• The information is required to ensure the security of the content

• Previously entered information is no longer valid

3.3.8 & 3.3.9 Accessible
Authentication - AA & AAA
3.3.8 & 3.3.9 Accessible Authentication - AA & AAA
erso ote “I have dyslexia. Typing two-factor authentication
codes by hand is very hard or impossible for me.”
ry There must be an authentication path that does not
require tasks such as: memorizing a password, transcribing codes or
words, or solving a puzzle.
Ho it e s Helps people with cognitive disabilities to not be
blocked from authenticating because the authentication method
relies exclusively on “cognitive function tests”.
t to o Provide a path that doesn’t make people solve puzzles,
recall information, or transcribe something to log in.
3.3.8 & 3.3.9 Accessible Authentication - Examples
3.3.8 Key Concepts 1
A o iti e f tio test requires a person to remember,
manipulate, or transcribe information. Examples include:
• e ori tio such as username, password, set of
characters, images, patterns, answers to security
questions.
• r s ri tio such as typing in a passcode
• Use of correct s e i

• Performance of tio s
• o i puzzles
A HAs Exception: CAPTCHAs that use recognizing
common objects pass the AA-level Criterion.
3.3.8 Key Concepts 2
Two simple ways to support Accessible
Authentication requirements include:
• Do not block password entry by browsers or
password managers
• Do not block copy and paste
3.3.8 Key Concepts 3
This requirement applies to all steps or paths
including:
• Multi-factor authentication steps

• Steps to recover an account or change the

username or password
4.1.1 Parsing - A
4.1.1 Parsing
WCAG 2.2: 4.1.1 Parsing is marked as “Obsolete and Removed”

WCAG 2.1: Will be republished with a note in 4.1.1 saying it is

automatically met by using HTML

WCAG 2.0: Same note as 2.1 but only seen in the Errata doc and
Understanding doc
WCAG 2.2 in Regulations
Notable Adoption of WCAG 2.X
pre-2012: Accessibility for Ontarians with Disabilities Act (AODA)
2012: ISO/IEC 40500
2014: EN 301 549
2016: Web Accessibility Directive (European Union)
2017: Section 508 (revised) of the US Rehabilitation Act
2019: European Accessibility Act

A more complete list can be found on w3.org/WAI/policies/

WCAG 2.2 and Upcoming Regulations
• EU EN 301 549 refresh, expected available 2023 & required 2025
• Web Accessibility Directive (WAD)
• European Accessibility Act (EAA)

• United States:
• ITI VPAT templates with WCAG 2.2:
• May be available approximately a month after 2.2 is finalized
• Section 508:
• No action scheduled at this time (currently on WCAG 2.0)
• DoJ has published NPRM on Accessibility of Web Information and
Services of State and Local Government Entities
• Revises Title II of ADA to reference WCAG 2.1
• Not planning to pick up WCAG 2.2 initially
Future of WCAG
Future of WCAG 2
• WCAG 2.2 does not replace 2.0 and 2.1
• WCAG 2.X will have a long life to come
• WCAG 3.0 is years away from Recommendation
• WCAG 3.0 will not replace WCAG 2.X immediately
• AGWG Task Force for WCAG 2.X maintenance
• After WCAG 2.2 is complete
• Address >600 open Github issues on WCAG 2.X
Rules for WCAG (ACT)
Accessibility Conformance Testing (ACT)
Non-normative rules to reduce interpretation differences
Standardized accessibility test cases
Transparency about how test tools & methodologies work

List of all ACT Rules:

w3.org/WAI/standards-guidelines/act/rules/
ACT Implementation in tools and methodologies:
w3.org/WAI/standards-guidelines/act/implementations/
WCAG 3 Work in Progress
• Address gaps that proved difficult with WCAG 2’s structure
• Better reflect “real-world” accessibility
• Update for modern technologies

Latest working draft published on 24 July 2023

w3.org/TR/wcag-3.0/

No expected release date yet, not expected before 2027

Connect with us
@dequesystems
dequelabs
deque-systems-inc
dequesystemsinc