WCAG 2.1 can be made easier for everyone by organizing success criteria into three familiar groups and presenting the underlying standards.

1. Bill Tyler
Principal Digital Accessibility Engineer
Accessibility Center of Excellence, Optum Technology
CSUN 2019, Anaheim
Friday, March 15, 2019
WCAG 2.1
Made Easier for
Non-Accessibility
Professionals
@billtyler
btyler@optum.com
SlideShare: http://bit.ly/xxxxxx

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 2017
Background
2

3. Agenda
Made Easier Overview
• WCAG 2.1: The Usual Prezos (Presentations)
• WCAG 2.1: For Non-A11y Professionals
– The 3 Groups
– Walkthrough of 17 success criteria! (AAA too!)
– Low hanging fruit
• WCAG 2.1: Dos and Don’ts?

4. Usual Prezos
for Accessibility Professionals
WCAG 2.1

5. WCAG 2.1 – Usual Prezo for A11y Pros
Update to WCAG 2.0
• https://www.w3.org/TR/WCAG21/
Effective: June 5, 2018
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. 3-6 Focus Areas (Depending on Prezo)
Mobile Technologies
Low Vision
Cognitive Disabilities
Learning Disorders
Speech Recognition
Motor & Dexterity Issues
Vestibular Disorders

8. WCAG 2.1 Success Criteria Levels A & 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)

9. 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)

10. And the non-a11y pros may go…
Aaahhhhh!
As they run screaming from the room.

11. Not really.
But this could be done better.

12. 3 Easy Groups
17 Criteria
No big deal (Don’t Panic!)
WCAG 2.1
for Non-A11y
Professionals

13. WCAG 2.1 for Designers & Developers
3 Groupings that extend existing
knowledge and best practices
1. Responsive Design (7 Success Criteria)
– Standard responsive design address some
– Going beyond presentation addresses the rest
• Think Desktop! Keep the Keyboard!
2. Presentation (6 Success Criteria)
– Good design decisions make these easy
3. ARIA & Attributes (4 Success Criteria)
– More metadata
– Old and New Stuff
• Grandfathered keystrokes
• Future standards

14. 7 Criteria
Responsive
Design
Success
Criteria

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

16. 3 Criteria
Classic
Responsive
Design

17. SC1.3.4 Orientation (AA)
Don’t lock orientation
• Low hanging fruit – currently hard to do with web (for now)
• Why lock orientation (for web)?
• This is not the responsive design criteria, it’s…

18. SC1.4.10 Reflow (AA)
No Horizontal Scrolling
• No one likes horizontal (or 2-dimensional) scrolling
• Think classic iPhone support
– Same 256x320 physical (not CSS) pixels
• One person’s portrait is another person’s landscape
– Mobile portrait (or landscape) = Zoomed desktop screens

19. SC1.4.12 Text Spacing (AA)
Resize text. Resize spacing.
• Extends SC1.4.4 Resize Text to Tracking / Letter-Spacing
• Tracking terms (describe the spacing of)
– Letters – also known as kerning
– Words
– Lines – also known as leading, line-spacing, line height
– Paragraphs

20. 4 Criteria
Desktop
Responsive
Design

21. SC2.5.1 Pointer Gestures (A) – Desktop 1st
Add gestures to existing keyboard
(and mouse) user interface
• Low hanging fruit – currently hard to do (on the web)
– Mobile browsers already manage swipe and taps
• Don’t do it but if you must…
First: Design for desktop support / Keep the keyboard!
• Meaning…
– Add gestures to desktop UI, do not replace or require them
• If you must use only gestures alone:
Keep them simple single point actions

22. SC2.5.6 Concurrent Input Mechanisms (AAA):
Don’t kill keyboard or mouse UI!
• Low hanging fruit – if you…
Kept the Keyboard! Saved the Mouse! (SC2.5.1)
• When supporting the desktop (and web)
this should be obvious and easy!
• If native mobile, this can be hard

23. SC2.5.4 Motion Actuation (A)
Don’t shake or tilt!
• Low hanging fruit – currently hard to do (on the web)
• Just don’t do it
• If you must, then you must:
– Add keyboard UI (or simple gesture SC2.5.1) alternative
– Add setting or method to disable it

24. SC2.5.2 Pointer Cancellation (A)
Up – not Down – events!
• Use onclick() or onmouseup()
– Not onmousedown()
• Use onkeypressed() or onkeyup()
– Not onkeydown()
• Not a new issue in UX design

25. 6 Criteria
Presentation
Success
Criteria

26. 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)

27. SC1.4.11 Non-Text Contrast (AA)
Icons & graphs are “large text”
• Icons, controls, charts, graphs are content also
• So they need minimum contrast
– Large text is also 3:1
– Test right along with SC1.4.3 Contrast (Minimum)

28. SC1.4.13 Content on Hover or Focus (AA)
It’s complicated…
3 requirements in 1
1. Dismissable
– Design so added content does NOT cover other information!
– Or add ability to clear without losing focus (like escape key)
2. Hoverable
– Avoid tricky “hover tunnels”
– Make hover paths obvious and easy
3. Persistent
– Keep visible until user un-triggers, dismisses or not applicable

29. SC2.2.6 Timeouts (AAA)
Tell them how long a
break they can take
• Low hanging fruit – just a little bit of text at the start
• Tell users how long you’ll keep their data on inactivity
– Instead of learning it when it happens
• If you can do it, 20 hour minimum

30. SC2.3.3 Animation from Interactions (AAA)
No parallax!
• Just say “No” to parallax scrolling and animations
– Nielsen Norman Group:
• What Parallax Lacks (4 UX usability problems)
https://www.nngroup.com/articles/parallax-usability/
• If you must have parallax or triggered animations then
– SC2.2.2 Pause, Stop, Hide

31. SC2.5.3 Label in Name (A)
What you see is what you say
• Displayed text = Command name
• Use real (not graphic) text
• Start display text with command name (best practice Note [1])
• Start with unique command words (best practice not listed)

32. SC2.5.5 Target Size (AAA)
No tiny tap targets
• Low hanging fruit –
Should be best practice designers already use
• Apple, Google and Microsoft agree
– Apple: “minimum tappable area of 44pt x 44pt for all controls”
– Google: “48dp minimum touch target size”
– Microsoft: “touch target size to 9 mm square or greater (48x48px…)”

33. 4 Criteria
ARIA &
Attributes

34. 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)

35. SC1.3.5 Identify Input Purpose (AA)
Add Autofill / Autocomplete
• Now: Implement Autocomplete
– HTML 5.2 Autofill =
WCAG 2.1 Section 7. Input Purposes for User Interface Components
– Best practice: Better usability for everyone!
• Future: TBD

36. SC1.3.6 Identify Purpose (AAA)
Add Landmarks & ARIA
• Now: Landmarks and a little ARIA
• Future: COGA (TBD)
– COGA: Cognitive and Learning Disabilities Accessibility Task Force
– COGA: COGnitive Accessibility

37. SC2.1.4 Character Key Shortcuts (A)
Use Accesskey, if you must
• Do you really need keyboard shortcuts?
• Can be low hanging fruit –
Need keyboard shortcuts? Use accesskey
• It’s all about single-key accidents
– Similar to SC2.5.2 Pointer Cancellation

38. SC4.1.3 Status Messages (AA)
Dynamic content? Add ARIA.
• Complicated
• Decide what makes for best UX for screen readers
• Writing effective, brief messages for AT announcements
• Know when it applies (3 situations in 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. Dos & Don’t

40. Dos: Say “Yes” to
• Responsive design – SC1.3.4, SC1.4.10, SC1.4.12 (AA)
• Good contrast on all content (non-text) – SC1.4.11 (AA)
• Keyboard (entry) first! – SC2.5.1, SC2.5.2, SC2.5.4 (A)
• Keep the keyboard (and mouse) UI! – SC2.5.6 (AAA)
• Auto-fill values – SC1.3.5 (AA)
• Using Accesskey (if needed) – SC2.1.4 (A)
• Telling timeout time (or 20 hours) – SC2.2.6 (AAA)
• Adding landmarks – SC1.3.6 (AAA)
• ARIA training for status messages – SC4.1.3 (A)
• Added content that is dismissable, hoverable &
persistent – SC4.1.3 (AA)

41. Don’ts: Just say “No” to:
• Parallax – SC2.3.3 (AAA)
• Fixed or locked orientation – SC1.3.4 (AA)
• Shake or tilt – SC2.5.4 (A)
• Mobile-only input – SC2.5.6 (AAA)
• Graphic text (icon labels) – SC2.5.3 (A)
• Down events – SC2.5.2 (A)
• Custom keyboard controls – SC2.1.4 (A)
• Tiny tap targets / buttons – SC2.5.5 (AAA)

42. Questions?
42

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

44. 44