Review and analysis of WCAG 2.1. Covers basic changes from WCAG 2.0, support by US and EU legal standards, and suggestions for implementation. Includes role-based analysis of A & AA success criteria primary ownership, knowledge or training required by them and the first deliverables they are likely to introduce them. Also has high level overview of all 17 criteria placing them in 3 groups with suggestions on how to incorporate them.

1. Bill Tyler
Sr. Digital Accessibility Engineer
Accessibility Center of Excellence
Optum Technology
Accessibility Twin Cities Meetup Monday, July 30, 2018
Putting
WCAG 2.1
into Practice

2. My Experience
35+ yrs. of UI/UX Design and Development
12+ yrs. in medical devices
16+ yrs. in plans and providers
2X dot-com survivor
Started Web 1996
Started in Accessibility 2002
Full time Accessibility Engineer since December 2013
Material Presented
Analysis of WCAG 2.1 starting with working draft of September 2018
Background
2

3. Agenda
WCAG 2.1 Overview
• WCAG 2.1 and 2.0 Overview
– What is the difference?
– Who’s adopting it and when?
• US
• EU
– Do I need to adopt it?
• WCAG 2.1 Analysis
– Who owns them?
– What are they?
– When are decisions made?
• Putting WCAG 2.1 into Action – Lightning Round
– 17 Criteria Recommendations
– 3 Easy Groups

4. Low Earth Orbit Review
WCAG 2.1 and
WCAG 2.0

5. WCAG 2.1 – June 5, 2018
Update of WCAG 2.0
• https://www.w3.org/TR/WCAG21/
Focuses on 3-4 main areas
• Mobile technologies
• Low vision
• Cognitive disabilities
• Speech recognition
1 New guideline: GL2.5 Input Modalities
17 New success criteria
• 12 A and AA (5 A, 7 AA)
• 5 AAA

6. WCAG 2.1 = 2.0 + New Stuff
WCAG 2.1 leaves all of WCAG 2.0 intact
• “Everything you know about 2.0 still applies”
• 2.0 criteria are unchanged
– No criteria renumbering
– Understanding documents
• Conformance process is the same
– A and AA required for WCAG 2.1 conformance
WCAG 2.1 adds to WCAG 2.0
• 2.1 criteria numbers come after existing 2.0
– 2.1 single-A criteria follow 2.0 AAA
– Some related criteria are not numerically close

7. WCAG 2.1 Release Impacts – W3C
WCAG 2.1 is the official new standard of the W3C
Future Releases of WCAG 2.x
• 2.2 incremental update
• 2.3 a possibility (TBD)
WCAG 3.0 AKA “Silver”
• Total rework of WCAG to cover ALL digital products
– Not just Web Content (WC)
• Removed WC to become AG or Accessibility Guidelines
– “AG” is the periodic table entry for “Silver”

8. WCAG 2.1 Success Criteria are Final But…
WCAG 2.1 recommendation applies only to the criteria
• WCAG working groups still working on 2.1 documents
Understanding documents, techniques are rough and
incomplete
• SC1.4.10 Reflow doesn’t even have CSS formatting or navigation
– as of 7/6/2018
• Many still have editing notes and comments in them
• Future techniques are mentioned but not written
– Variable amount of detail

9. WCAG 2.1 for the Rest of Us – United States
Does not immediately affect most US standards
• Sect. 508, Sect. 1557 still tied to 2.0
• US Access board has to start official process to update to 2.1
• Reference: “Does WCAG 2.1 Replace 2.0? When should you adopt WCAG 2.1?” by
Jonathan Avila, June 27, 2018
– https://www.levelaccess.com/wcag-2-1-replace-2-0-organizations-adopt-2-1/
Medicaid Mega-Rule could advance with “successor versions”
§ 438.10 Information requirements.
(a) Definitions
Readily accessible means electronic information and services which comply with modern
accessibility standards such as section 508 guidelines, section 504 of the Rehabilitation Act,
and W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 AA and successor versions.
• Source: Federal Register / Vol. 81, No. 88 / Friday, May 6, 2016 / Rules and Regulations pg
27865
– https://www.gpo.gov/fdsys/pkg/FR-2016-05-06/pdf/2016-09581.pdf
• Updated by US government but subject to implementation by states

10. WCAG 2.1 for the Rest of Us - Europe
EU standards likely to officially change December 2018
• Subject to implementation by member countries
• Focus is on EU Public Sector sites and applications
– Probably will affect private sector soon after
EN 301 549 Target Dates
• 9/23/2018 – Transposition of standards into EU member state laws
• 9/23/2019 – New EU Public Sector Websites
• 9/23/2020 – Existing EU Public Sector Websites
• 6/23/2021 – Mobile Applications for EU Public Sector
Source: “EU Directive on the Accessibility of Public Sector Websites and Mobile
Applications” by Léonie Watson, Thursday, April 26, 2018
– https://developer.paciellogroup.com/blog/2018/04/eu-directive-on-the-accessibility-of-public-sect
/

11. WCAG 2.1 for the Rest of Us – Private Sector
No Update to Legal Status
• No lawsuits or other precedents have been established beyond
WCAG 2.0 to date though this could always change
Early Adopters
• Some companies or organizations may update their standards
faster than the governments
2019
• Likely start for real WCAG 2.1 implementations

12. WCAG 2.1 – What to Do
Learn it now
• Completed preliminary internal training
Plan to incorporate soon
• Update checklists, policies, training and other materials
Monitor updates that impact your business
• Things will likely change

13. Who owns them?
What are they?
When are decisions made?
WCAG 2.1
Analysis

14. Analysis Process – Ownership Roles
Question 1: Who owns it, and to what level?
The Roles…
• 5 Roles total, 4 apply to WCAG 2.1
• Standard
agile role
• Project
initiator
• Requirements
definer
• Result
approver
• Business
liaison
• Requirement
author
• Wireframe
creator
• UX/Usability
expert
• Presentation
owner
• Style expert
• Layout
creator
• Design
enforcer
• Style guide
author
• Design comp
artist
• Image file
producer
• Author of all
text “large
(section) and
small (words)”
• Content
proofreader
• Includes time-
based media
• Script writer
• Audio and
video file
creator
• Front-End
Programmer
• Last stop
before testing
• Primary target
for all defects

15. Analysis Process – Ownership Levels
Question 1: Who owns it and to what level?
The Levels
• Not Standard RACI model
– Responsible
– Accountable
– Consulted
– Informed
• Levels of Ownership Used
– Primary – THE OWNER ultimately responsible for the decision
– Secondary – Actively involved with primary owner
– Contributor – “Gives some input” but is not deeply involved

16. Analysis Process – Types
Question 2: What is it?
• Accessibility-specific Knowledge
– Something only found in accessibility literature
• Best Practice
– Something found in other domains, typically the one of the primary owner
• Standard Feature
– Something so common people make the right choice without knowing it
– Found some in WCAG 2.0
– None found in WCAG 2.1

17. Analysis Process – Introduction: Deliverables
Question 3: When is it made?
• When is the decision first made?
– Identify first deliverable or point in product lifecycle
– Also identify secondary and less common cases
• 6 Deliverables
1.User Story / Requirements core specifications and functionality
2.Wireframes structure of page, interface, interactions
3.Style Guides site presentation, branding, colors, logos
4.Design Comps page or feature final presentation
5.Content text, terminology, includes video and audio
6.Code front-end development: HTML, CSS, JavaScript

18. Analysis Process Details
Want to know more?
• That’s another presentation
– Rethinking Accessibility: Role-Based Analysis of WCAG 2.0
• Accessible by Design (2018)
– bit.ly/2HJea3e
• CSUN (2017)
• Minnebar (2015)
• UXPA-MN (2014)

19. Who owns them?
What are they?
When are decisions made?
WCAG 2.1
Analysis
Results

20. Analysis: 2.1 Ownership
User Experience Designers still #1
• UX Designer: 8 criteria (67%)
• Visual Designers: 3 criteria (25%)
• Content Author: 1 criterion (8%)

21. Analysis: 2.1 Type
Best Practices still edge out Accessibility
• Best Practices: 7 criteria (58%)
• Accessibility-specific Knowledge: 5 criteria (42%)

22. Analysis: 2.1 Deliverable
Still NOT the code…
• User Story / Requirements : 8 criteria (67%)
• Style Guide: 3 criteria (25%)
• Content: 1 criterion (8%)

23. Lightning Round
17 Criteria
3 Easy Groups
Putting
WCAG 2.1
into Action

24. WCAG 2.1 Success Criteria Levels A and AA
1. SC1.3.4 Orientation (AA)
2. SC1.3.5 Identify Input Purpose (AA)
3. SC1.4.10 Reflow (AA)
4. SC1.4.11 Non-Text Contrast (AA)
5. SC1.4.12 Text Spacing (AA)
6. SC1.4.13 Content on Hover or Focus (AA)
7. SC2.1.4 Character Key Shortcuts (A)
GL2.5 Input Modalities
8. SC2.5.1 Pointer Gestures (A)
9. SC2.5.2 Pointer Cancellation (A)
10. SC2.5.3 Label in Name (A)
11. SC2.5.4 Motion Actuation (A)
12. SC4.1.3 Status Messages (AA)

25. WCAG 2.1 Success Criteria Levels AAA
1. SC1.3.6 Identify Purpose (AAA)
2. SC2.2.6 Timeouts (AAA)
3. SC2.3.3 Animation from Interactions (AAA)
4. SC2.5.5 Target Size (AAA)
5. SC2.5.6 Concurrent Input Mechanisms (AAA)

26. WCAG 2.1 Success Criteria in 3 Parts
17 Success Criteria can be placed in 3 Groups
1.Responsive Design: 7 Success Criteria
– Should address main issues
– Requires looking beyond presentation: Think Desktop!
1.Presentation: 6 Success Criteria
– Good decisions make these easy
1.ARIA & Attributes : 4 Success Criteria
– More metadata
– Old and New Stuff
• Grandfathered keystrokes
• Future standards

27. 7 Criteria
Responsive
Design
Success
Criteria

28. Responsive Design Success Criteria
Responsive Design can directly support these criteria
1.SC1.3.4 Orientation (AA)
2.SC1.4.10 Reflow (AA)
3.SC1.4.12 Text Spacing (AA)
4.SC2.5.1 Pointer Gestures (A)
5.SC2.5.2 Pointer Cancellation (A)
6.SC2.5.4 Motion Actuation (A)
7.SC2.5.6 Concurrent Input Mechanisms (AAA)

29. Responsive Design Criteria – Presentation
Normal Responsive Design addresses these
1. SC1.4.10 Reflow (AA)
– The “Responsive Design” Criteria (not SC1.4.3 Orientation)
– No Horizontal Scrolling
1. SC1.4.12 Text Spacing (AA)
– Extends SC1.4.4 Resize Text
– Same clipping/overlapping presentation issues

30. Responsive Design Criteria – Mobile Inputs
Remember the Desktop! – Preserve keyboard support!
Responsive Design makes these criteria “added UI”
1. SC1.3.4 Orientation (AA)
– Don’t lock orientation!
1. SC2.5.1 Pointer Gestures (A)
– Add gestures as added option to keyboard option
1. SC2.5.2 Pointer Cancellation (A)
– “Up” not “Down” events – including mouse (and keyboard)
1. SC2.5.4 Motion Actuation (A)
– Like SC2.5.1, add motion as added option
• SC2.5.6 Concurrent Input Mechanisms (AAA)
– Don’t disable desktop options

31. 6 Criteria
Presentation
Success
Criteria

32. Presentation Success Criteria
Good design makes these easy
1.SC1.4.11 Non-Text Contrast (AA)
2.SC1.4.13 Content on Hover or Focus (AA)
3.SC2.2.6 Timeouts (AAA)
4.SC2.3.3 Animation from Interactions (AAA)
5.SC2.5.3 Label in Name (A)
6.SC2.5.5 Target Size (AAA)

33. Presentation Design Criteria – Part 1
1. SC1.4.11 Non-Text Contrast (AA)
– Icons, Controls, Charts and Graphs need minimum contrast too
– Test right along with SC1.4.3 Contrast (Minimum)
1. SC1.4.13 Content on Hover or Focus (AA)
– Straddles P and O: More “Operable” than “Perceivable”
• Overlapping content drove location
– 3 Requirements in One
• Dismissable – Clear without losing focus
• Hoverable – Support “hover tunnels”
• Persistent – Keep visible until user un-triggers, dismisses or not applicable
1. SC2.2.6 Timeouts (AAA)
– Tell users how long you’ll keep their data on inactivity
– If you can do it, 20 hour minimum

34. Presentation Design Criteria – Part 2
4. SC2.3.3 Animation from Interactions (AAA)
– Just say “No” to paralax scrolling and animations
4. SC2.5.3 Label in Name (A)
– Make displayed text and actionable name the same
– Put display text first (best practice in Note [1])
– Unique names at start (best practice not listed)
4. SC2.5.5 Target Size (AAA)
– Existing best practice your designs should already have
– Apple, Google and Microsoft agree
4.Apple: “minimum tappable area of 44pt x 44pt for all controls”
5.Google: “48dp minimum touch target size”
6.Microsoft: “touch target size to 9 mm square or greater (48x48px…)”

35. 4 Criteria
ARIA &
Attributes

36. ARIA & Attributes Success Criteria
These criteria are a mixture of the old, new and future
1.SC1.3.5 Identify Input Purpose (AA)
2.SC1.3.6 Identify Purpose (AAA)
3.SC2.1.4 Character Key Shortcuts (A)
4.SC4.1.3 Status Messages (AA)

37. ARIA & Attributes Success Criteria: Part 1
1. SC1.3.5 Identify Input Purpose (AA)
– Now: Implement Autocomplete
• Officially: Section 7. Input Purposes for User Interface Components
• Actually: HTML 5.2 Autofill (see note in Sect. 7)
– Future: TBD
1. SC1.3.6 Identify Purpose (AAA)
– Now: Landmarks and a little ARIA
– Future: COGA
• COGA: Cognitive and Learning Disabilities Accessibility Task Force
• COGA: COGnitive Accessibility

38. ARIA & Attributes Success Criteria: Part 2
3. SC2.1.4 Character Key Shortcuts (A)
– It’s all about single-key accidents like SC2.5.2 Pointer Cancellation
– No keyboard shortcuts? No problem.
– Want keyboard shortcut? Use access key
3. SC4.1.3 Status Messages (AA)
– Fills huge gap in WCAG 2.0
– Explicitly address dynamic content updates and single page applications
– Writing effective messages for AT announcements
– Group ARIA techniques in 3 situations (understanding document)
Situation A: Success / Results / State
–“If a status message advises on the success or results of an action, or the state of an
application: …”
Situation B: Suggestion / Warning / Error
–“If a status message conveys a suggestion, or a warning on the existence of an error: …”
Situation C: Progress
–“If a status message conveys information on the progress of a process: …”

39. Questions?
39

40. Contact information:
Thank you.
Bill Tyler
Sr. Digital Accessibility Engineer
btyler@optum.com
@billtyler
40

41. 41