WCAG 2.1 UX Scotland 2019

Web Content Accessibility Guidelines
(WCAG) 2.1
Ed Chandler and Gayle Whittaker
June 2019
1

@uservision @edwardchandler @WhittakerGayle 2
We believe that
the best experiences
are shaped by a
deep understanding
of human behaviour

@uservision @edwardchandler @WhittakerGayle
Web Content Accessibility Guidelines (WCAG)
The de facto
standard
Now on its 3rd version
(WCAG 2.1 – June 2018)
78 Success Criteria4 Principles 3 Levels
A AA AAA

WCAG 2.0 vs WCAG 2.1
4
Adding 17 new criteria
on top
WCAG 2.1 builds on WCAG 2.0 All WCAG 2.0 success
criteria remain the same

Focusing on the Principles of Accessibility
Information is made
available to users
Users understand the
meaning of
information and can
act on it, knowing
what the outcome
will be
Users can interact with
and use the site as
intended
PPerceivable
OOperable
Code must be robust enough
that it can be interpreted
reliably by a wide variety of
technologies (e.g. browsers
and assistive technologies).
UUnderstandable
RRobust
First three are very user focused

How has legislation effected Accessibility?
EU web accessibility directive legislation
This includes health, security,
councils, government
agencies and education.
Aims to bring all public
sector websites and apps up
to an accessible standard

17 New Success Criteria in WCAG 2.1
Mobile Cognitive Low Vision
8 4 5

New Success Criteria in WCAG 2.1
A 5
AA 7
AAA 5
By conformance level
17

The new level A and AA
success criteria

1.3.4 Orientation (Level AA)
Content displays in the orientation (portrait or landscape) preferred by the user

1.3.5 Identify Input Purpose (Level AA)
Use the HTML autocomplete attribute for edit boxes
Label

This includes name, street, address, telephone, birthday and other input purposes

1.4.10 Reflow (Level AA)
Your website and user interface components must be responsive – no loss of content
or functionality occurs

100 to 400% with reflow

100 to 400% without reflow

1.4.11 Non-text Contrast (Level AA)
Provide good colour contrast for all user interface components

1.4:11
x

Graphical objects
(to understand content/function)
must have a contrast ratio of at
least 3:1 against adjacent colours
Think about charts, graphs, icons,
and other graphics that—without
contrast—would be tough to
identify.

1.4.12 Text Spacing (Level AA)
Enable users to increase text without losing content or functionality

Normal spacing Increased spacing
https://codepen.io/stevef/pen/YLMqbo

1.4.13 Content on Hover or Focus (Level AA)
Content that appears on hover or focus is dismissible, hoverable and persistent

1.4.13 Content on Hover or Focus (Level AA)

2.1.4 Character Key Shortcuts (Level A)
Allow users to turn off or reconfigure shortcuts that are made up of only character
keys

Keyboard shortcuts for Gmail – single-letter commands to create, archive, delete or
reply to messages

2.5.1 Pointer Gestures (Level A)
Ensure that content can be operated using simple inputs on a wide range of pointing
devices

Motion with fingers to operate a
webpage on your mobile device –
action like this might be impossible for
some users with motor impairments
Ensure you can complete task using
single-finger operation

2.5.2 Pointer Cancellation (Level A)
Make it easier for users to prevent accidental pointer input
Down events cannot be used to complete
a function – moving cursor or focus away
it would cancel trigger/submission
Use onclick instead to perform the action

2.5.3 Label in Name (Level A)
Ensure that the words which visually label a component are also the words associated
with the component programmatically
Call to Action

<button>
Add to Trolley
<span class="sr-only">
Charcoal Portable Round
BBQ</span>
</button>
Ensure that the words which
visually label a component are
also the words associated with
the component programmatically
– accessible name begins with the
text of visible label

2.5.4 Motion Actuation (Level A)
Ensure that functions triggered by moving a device or by gesturing towards
the device can also be operated by more conventional user interface
components

4.1.3 Status Messages (Level AA)
Make users aware of important changes in content (that are not given focus), and to
do so in a way that doesn't unnecessarily interrupt them

https://www.youtube.com/watch?v=v72nu602WXU

https://www.w3.org/WAI/WCAG21/quickref/

@uservision @edwardchandler @WhittakerGayle 46
1. WCAG is necessary but not sufficient for creating an inclusive user
experience
2. Design to accommodate all user needs
3. Embrace the creative challenge
4. Design with inclusivity in mind, from the outset
@uservision
www.uservision.co.uk

Activity: Roles and Responsibilities Task Set
Whose responsible for
the new success criteria?
whose responsibility is
inclusive design?

Head of UX / Digital

Product / Project Manager

UX Designer

Developer

QA Tester

Creates interactive components that are unique and
easy to identify

Identifies what feedback is required for interactions

Creates (and uses) an accessible colour pallete

Creates accessible Images and media

Creates a consistent navigation

Creates consistent designs for components

Provides controls for moving content / media

Creates and delivers an accessibility strategy

Raises awareness of accessibility

Develops the business case for inclusion

Advocates accessibility from ground up

Procures trusted suppliers

Determines budget and resources

Ensures accessibility is delivered at all stages

Teams are brought together to discuss [accessibility]
issues as they arise

Ensures that code matches the logical focus order of the
information presented.

Associates forms and links with appropriate labels

Identifies page language

Uses appropriate mark-up to convey meaning and
structure

All links and controls can be accessed using the Tab key
on the keyboard

Reviews and tests websites for accessibility

Benchmarks websites against WCAG

Writes test cases incorporating accessibility

Understands and uses assistive technologies

1.3.4 Orientation

1.3.5 Identify Input Purpose

1.4.10 Reflow

1.4.11 Non-text Contrast

1.4.12 Text Spacing

1.4.13 Content on Hover or Focus

2.1.4 Character Key Shortcuts

2.5.1 Pointer Gestures

2.5.2 Pointer Cancellation

2.5.3 Label in Name

2.5.4 Motion Actuation

4.1.3 Status Message

WCAG 2.1 UX Scotland 2019

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WCAG 2.1 UX Scotland 2019

Similar to WCAG 2.1 UX Scotland 2019 (20)

More from User Vision

More from User Vision (20)

Recently uploaded

Recently uploaded (20)

WCAG 2.1 UX Scotland 2019