The Web Content Accessibility Guidelines (WCAG) are an internationally recognised set of recommendations for improving web accessibility. The World Wide Web Consortium (W3C) is currently preparing to publish version 2.2 of WCAG and a working draft is available now. WCAG 2.2 builds on WCAG 2.1 by adding 9 new success criteria and an existing criterion has changed from Level AA to Level A. This extension of WCAG aims to better reflect the experience of people with disabilities by improving accessibility guidance for users with low vision, cognitive and learning disabilities and improving mobile accessibility. WCAG 2.2 was scheduled for release in November 2020, but is now expected to become the official standard in summer 2021. With these changes soon approaching, this session aims to help you understand WCAG 2.2. and what these changes means for your website. This session is for designers, developers, product owners and management teams from all sectors that have an awareness of WCAG and why it is important to create inclusive digital services. This presentation includes the following: Adopting WCAG 2.2 from 2.1 and how this affects UK Accessibility Regulations Outline of the WCAG 2.2 Success Criteria WCAG 2.2 practical examples and best practices

1. Breakfast Briefing
The path to WCAG 2.2
1
Keith Allan
Harjit Dhanda

2. @uservision
 As part of User Vision’s commitment to
inclusion we are celebrating the tenth Global
Accessibility Awareness Day (GAAD)!
 GAAD is a global event that shines a light on
digital access and inclusion for people with
disabilities.
2

3. @uservision
About us
3
Keith Allan Harjit Dhanda

4. @uservision
Agenda
4
 Introduction
 About us
 How does WCAG 2.2 affect current UK accessibility Regulations?
 WCAG 2.2
 New Success Criteria
 Practical Examples
 Best Practices

5. @uservision 5
How does WCAG 2.2 affect current
UK accessibility Regulations?

6. @uservision
Web Content Accessibility Guidelines (WCAG)
 WCAG- de-facto standard for web accessibility for 21 years
 Designed to be technology agnostic
 Currently on working draft of WCAG 2.2 (updating to WCAG 3.0 by 2023)
 Three levels of compliance - Level A, Level AA and Level AAA.
 The guidelines state that websites or mobile apps can be made more accessible by using the
POUR (Perceivable, Operable, Understandable and Robust) principles.
6

7. @uservision
Success Criteria
Each version of WCAG adds new success criteria to the previous version, therefore each iteration is
backwards compatible.
 WCAG 2.0 AAA is comprised of 61 success criteria
 WCAG 2.1 AAA is 78 (61 + 17 new success criteria)
 WCAG 2.2 AAA is 87 (78 + 9 new success criteria)
7
W3C encourages you to use the most recent version of WCAG when developing or updating
content or accessibility policies
Level A Level AA Level AAA

8. @uservision
Current Accessibility Regulations in the UK
Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility
Regulations 2018
 September 2019 - New websites
 September 2020 - Existing websites
 23rd June 2021 - Mobile applications
8
Accessibility statement
Comply with WCAG 2.1 Level AA

9. @uservision
Adopting WCAG 2.2 and how this affects UK
Accessibility Regulations
 Complying with WCAG 2.1 is a legal requirement for public sector websites
 WCAG 2.2 will be a W3C recommendation as of June 2021.
 Conforming to WCAG 2.2 better meets the needs of users with disabilities than previous versions.
 Addressing the new success criteria is a great way to exhibit your organization’s commitment to
accessibility.
9

10. @uservision
What’s new with WCAG 2.2?
10
Nine new Success Criteria One existing Success
Criteria upgraded from
Level AA to Level A
Better addresses needs of
people with cognitive and
learning disabilities, and low
vision

11. @uservision 11
• New Success Criteria
• Examples
• Best Practices
WCAG 2.2

12. @uservision 12
WCAG 2.4.7 Level A:
Focus Visible

13. @uservision
2.4.7 Level A: Focus Visible
This elevates the essential need for
keyboard focus indicators
13
Level AA Level A
Example from GDS of a text field receiving focus

14. @uservision 14
WCAG 2.4.11 Level AA:
Focus Appearance (Minimum)

15. @uservision
2.4.11 Level AA: Focus Appearance (Minimum)
15
This criteria ensures that the keyboard focus indicator is clearly visible and discernible.
 Contrasting area: Contrast ratio of at least 3:1
 Minimum area: The focus is greater than or equal to a 1 CSS pixel border or has a thickness of
at least 4 CSS pixels along the shortest side of the element and no thinner than 2 CSS pixels.
 Adjacent contrast: The focus has a contrast ratio of at least 3:1 against all adjacent colors or
has a thickness of at least 2 CSS pixels.
 Unobscured: The item with focus is not entirely hidden by other content.

16. @uservision
2.4.11 Level AA: Focus Appearance (Minimum)
16
Takeaway
Ensure the visible
focus stands out
from the background
and provides a strong
indicator of focus.

17. @uservision 17
WCAG 2.4.12 Level AAA:
Focus Appearance(Enhanced)

18. @uservision
2.4.12 Level AAA: Focus Appearance(Enhanced)
18
This is the enhanced (AAA) success criterion for 2.4.11 Focus Appearance, it defines a
higher level of visibility for the focus indicator.
 Contrasting area: Contrast ratio of at least 4.5:1
 Minimum area: The contrasting area is at least double the area of a 1 CSS pixel
perimeter of the unfocused component
 Unobscured: No part of the focus indicator is hidden by content.

19. @uservision 19
WCAG 2.4.13 Level A:
Page Break Navigation

20. @uservision
2.4.13 Level A: Page Break Navigation
20
For web content with page break locators, a
mechanism is available to navigate to each
locator.
 Ensure electronic publications have page
numbers and those numbers match any
corresponding version.
 Electronic publications include e-books and
digital content

21. @uservision
2.4.13 Level A: Page Break Navigation
21

22. @uservision 22
WCAG 2.5.7 Level AA:
Dragging

23. @uservision
2.5.7 Level AA: Dragging
23
All functionality that uses a dragging movement for operation can be operated by a
single pointer without dragging, unless dragging is essential.
If a dragging movement is required (e.g., when
adjusting a slider), provide an alternative means of
dragging such as tapping or clicking.

24. @uservision
2.5.7 Level AA: Dragging
24
Alternative to dragging movement
provided
- single tap/ click
- or using standard keyboard
gestures.
Positive example from Microsoft Teams

25. @uservision
2.5.7 Level AA: Dragging
25
Positive example from Energy Saving Trust website: A dropdown menu
is provided as an alternative method to using the slider

26. @uservision 26
WCAG 2.5.8 Level AA:
Target size (minimum):

27. @uservision
2.5.8 Level AA: Target size (minimum):
27
Targets can easily be activated without accidentally activating an adjacent target.
Targets have an area of at least 24 by 24 CSS pixels, except
where:
 Spacing: The target offset is at least 24 CSS pixels to
every adjacent target
 Inline: The target is in a sentence or block of text
 Essential: A particular presentation of the target is
essential to the information being conveyed.

28. @uservision
2.5.8 Level AA: Target size (minimum):
28
Examples from WCAG 2.2 documentation

29. @uservision 29
WCAG 3.2.6 Level A:
Consistent help

30. @uservision
3.2.6 Level A: Consistent help
Ensure users can find help for completing
tasks on a Web site.
Access to at least one form of help is
included in the same relative order on
each page:
 Human contact details
 Human contact mechanism
 Self-help option
 A fully automated contact mechanism
30
GDS pattern on contact information

31. @uservision
3.2.6 Level A: Consistent help
31
The ‘Further support’ help option can be easily located as it is consistently positioned at
the top of the page and for each stage of the form.
Positive example from Energy Saving Trust website

32. @uservision 32
WCAG 3.2.7 Level AA:
Visible controls

33. @uservision
3.2.7 Level AA: Visible controls
33
Ensure that user interface components (controls) can be found easily by people with
cognitive disabilities, vision loss, and mobility and motor impairments.
 Control should be visible without requiring pointer
hover or keyboard focus,
 or a mechanism is available to make them persistently
visible.
Positive example of button
element from GOV.UK

34. @uservision
3.2.7 Level AA: Visible controls
34
When composing an email, the toolbar
remains persistently visible. You don’t
need to move your pointer for the
toolbar to appear.
Positive example from Gmail

35. @uservision 35
WCAG 3.3.7 Level A:
Accessible Authentication

36. @uservision
3.3.7 Level A: Accessible Authentication
36
Ensure there is an accessible, easy-to-use, and secure method to log in and access
content.
 Provide an alternative way to authenticate that
doesn’t require a cognitive test

37. @uservision
3.3.7 Level A: Accessible Authentication
37
Example of inaccessible authentication
Google reCAPTCHA

38. @uservision
3.3.7 Level A: Accessible Authentication
38
Authenticate using device face scan Pin code authentication
Positive example from Bank of
Scotland online banking app
Positive example from Outlook email

39. @uservision
3.3.7 Level A: Accessible Authentication
39
Positive example from Medium.com

40. @uservision 40
WCAG 3.3.8 Level A:
Redundant Entry

41. @uservision
3.3.8 Level A: Redundant Entry
41
Ensure that users can successfully navigate multi-step processes.
For steps in a process, information previously entered by or provided to the user that is
required on subsequent steps is either:
 auto-populated, or
 available for the user to select
Exception: When re-entering the information is essential.

42. @uservision
3.3.8 Level A: Redundant Entry
42
Example from Gov.uk where the user is asked to enter repeated information
Takeaway
Avoid asking users to
enter repeated
information unless
necessary.

43. @uservision
3.3.8 Level A: Redundant Entry
43
User can specify that the billing
address is the same as the shipping
address instead of re-entering it.
Positive example from Amazon.com

44. @uservision 44
Summary

45. @uservision
Start your WCAG 2.2 journey today
45

46. @uservision
Resources
46
- Web Content Accessibility Guidelines (WCAG) v2.2: https://www.w3.org/TR/WCAG22/
- What’s new with WCAG 2.2 Working draft: https://www.w3.org/WAI/standards-
guidelines/wcag/new-in-22/
- Understanding WCAG 2.2: https://w3c.github.io/wcag/understanding/
- Global Accessibility Awareness Day Events:
https://globalaccessibilityawarenessday.org/events/

47. 55 North Castle Street
Edinburgh
EH2 3QA
United Kingdom
Tel: 0131 225 0850
@UserVision
www.uservision.co.uk
Thank you!
Upcoming courses and Events:
• CPUX-F 8-10 June
• Web Accessibility for Developers 23-24 June
• Web Accessibility for Designers for 21 July
hello@uservision.co.uk
uservision.co.uk/training