The document discusses the importance of integrating accessibility into the web design process, focusing on role-based analysis of the WCAG 2.1 guidelines. It highlights the need for collaboration across multiple roles, emphasizing that accessibility should not be the sole responsibility of developers or testers, but rather a shared ownership throughout the design lifecycle. Key recommendations include a 'shift left' approach to tackle accessibility early in the design process and targeted training for specific roles to enhance overall accessibility outcomes.

1. 3M Design Center, Maplewood, MN
September 11, 2019
Bill Tyler
Principal Digital Accessibility Engineer, Accessibility Center of Excellence, UX Design Services
Optum Technology @billtyler btyler@optum.com
Rethinking Accessibility:
Role-Based Analysis of
WCAG 2.1

2. Education & Experience
Full-time accessibility professional since 2013
W3C Invited Expert on Role-based Accessibility
UX developer & designer for over 35 years.
My Accessibility Journey
Learned a lot about the challenges of the blind through a friend born without eyes
over 20 years ago.
Started learning and applying accessibility in 2002 and turned into full-time focus a
decade later.
Materials Presented
5+ yrs. of ongoing accessibility research & analysis at Optum Technology
presented at CSUN and other accessibility conferences
Meet your speaker
2

3. A little background
A11y & WCAG
3

4. Accessibility
11 Letters
“A11y” : a numeronym for “accessibility”
4

5. • Visual
– Blindness
– Low Vision
– Color Vision
• Auditory
– Degrees (mild to profound)
– Classifications (conductive, neural, high/low tone, deaf-blindness)
• Motor
– Traumatic Injury (spinal cord, loss of limbs)
– Disease or Congenital (Cerebral Palsy, Muscular Dystrophy, Arthritis)
• Cognitive
– Functional (memory, problem-solving, attention, comprehension)
– Clinical (autism, Down Syndrome, brain injury, dyslexia, ADD)
4 Areas of Disability
5

6. WCAG: Web Content Accessibility Guidelines from the W3C
4 (POUR) Principles
1. Perceivable – 4 guidelines
“Information and user interface components must be presentable to users in ways they can perceive.”
2. Operable – 5 guidelines
“User interface components and navigation must be operable.”
3. Understandable – 3 guidelines
“Information and the operation of user interface must be understandable.”
4. Robust – 1 guideline
“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive
technologies.”
WCAG 2.1 in nutshell
6

7. 78 total success criteria across 3 levels
• A – 30 criteria
• AA – 20 criteria
• AAA – 28 criteria
Conformance Target: WCAG AA
• WCAG 2.0 (2008): 38 (A & AA) criteria
– Current US Section 508 (and many others, including most existing legal cases)
• WCAG 2.1 (2018): 50 (A & AA) criteria
– Coming soon (in EU with EN 301 549, some organizations such as the U of MN)
WCAG 2.1 in nutshell (continued)
7

8. The
Common
Problem
8

9. No one thinks about accessibility
… EXCEPT the a11y expert
Accessibility comes at end of development
…by TESTING done by the a11y expert
All issues found are directed to developers to fix
…with HELP from a11y expert
Final Result: “Sort of” Accessible Result
Problem: The Usual Approach to Accessibility
9

10. 10
Typical Development Sequence (by Role)
Add
A11y
Here

11. 11
There’s something very wrong with this picture
Add
A11y
Here

12. The
Assumptions
12

13. The Assumptions are:
Developers…
…code accessibility…
using “accessibility-specific”
knowledge.
13

14. Question the
Assumptions!
14

15. 3 Questions for Each WCAG Success Criterion
Who?
Who
developer
When?
When
coding
What
15

16. Who?
16

17. Who owns it? – Decision Making Roles
• Standard
agile role
• Initiates
project
• Defines
business
requirements
• Approves
results
• Business
liaison
• Writes design
requirements
• Creates low-
fidelity
wireframes
• Expert on
usability and
interaction
• Presentation
owner
• Style expert
• Creates page
layouts
• Enforces
design
standards
• Authors style
guides
• Produces
high-fidelity
comps and
image files
• Author of all
text “large
(section) and
small (words)”
• Proofreads
content
• Writes scripts
for video and
audio content
• Creates audio
and video
files
• Front-end
programmer
• Merges work
from other
roles
• Produces
delivered
pages and
content
• Fixes all bugs
and defects
17

18. Testing Roles
• Accessibility Subject Matter Expert (SME)
• Accessibility Instructor
• Resource for “difficult” a11y issues
• May fill in as A11y approver
• Discoverer of issues
• Writer of defects
• Enforcer of quality
• Last stop before release
• Usually not trained in accessibility
• Can learn it
• Can add it to test suite
18

19. To what level? – Role Ownership Model
Primary – Individual role with “final approval”P
Secondary – actively involved in decisionS
Contributor – affect, but not deeply involvedC
19

20. Example: SC1.4.1 Use of Color (Level A)
Visual Designer
• Is “the expert” with final
say on colors
• Specifies colors in style
guide
UX/IX Designer
• Specifies need to use
colors in wireframes or
requirements
Business Owner
• Provides brand guidelines
with approved color palette
20

21. If one person has multiple roles: Merge
If multiple people share a role: Assign or Delegate
Still not clear: Best guess for your situation
Whatever the case:
Doing the exercise with your own roles and assignments
ensures all WCAG criteria are owned and addressed.
What if roles aren’t the same or separate?
21

22. Is it really the Developer?
Who?
22

23. No.
23

24. 24
WCAG 2.1 Primary Success Criteria Ownership
UX Designer: 44% (22)
Content Author: 20% (10)
Visual Designer: 18% (9)
Developer: 16% (8)
Business Owner: 2% (1)
Observations
• Both Designers along with Authors
are the top three owners
• Developers are fourth with slightly
more than 1 in 6 criteria
• Clearly accessibility issues are
design and content, not just code

25. When?
25

26. When? – Software Design Lifecycle Entry Points
Code (front-end development: HTML, CSS, JavaScript)
Content (text, terminology, and includes video & audio)
Design Comps (page or feature final presentation)
Style Guides (site presentation, branding, colors, logos)
Wireframes (structure of page, interface, interactions)
User Story / Standard Requirements
26

27. Entry Point Level Model
Primary – single, most significant (typical) entry pointP
Secondary – other significant entry pointsS
Impact – other minor sources of design inputI
27

28. When?
28
Does it really start
with Code?

29. No.
29

30. 30
WCAG 2.1 Primary Success Criteria Entry Points
Wireframes: 38% (19)
User Stories: 34% (17)
Style Guides: 20% (10)
Code: 4% (2)
Content: 4% (2)
Design Comps: “0%”
Observations
• 96% of decisions come before code
• Close to 40% are defined in wireframes
• A third are in user stories
• Nearly a fifth in style guide
• Code and content are just 4% each

31. What?
31

32. What is it? Three Criteria Types
32

33. What?
33
Is it really specific to
Accessibility?

34. No.
34

35. 35
Success Criteria Types
Best Practices: 54% (27)
Primarily A11y: 40% (20)
User Stories: 6% (3)
Observations
• Over half of decisions are
best practices roles should
already know
• Accessibility training could
focus on topics they don’t

36. Examples
36

37. Example (of what NOT to do): “Press the green button on the right.”
Notes:
• Rare instance of single owner, no secondary owner or contributor
• Example of a “Never” event – should never happened (and preventable)
SC1.3.3 Sensory Characteristics
Content Author None None Accessibility,
“Best Practice”
Content
37

38. Example: “Session times out in 5 minutes. Continue? Yes / No”
Notes:
• Business Owner’s only primary ownership criterion
• Rare Standard Requirement case
SC2.2.1 Timing Adjustable
Business Owner UX/IX Designer None Standard
Requirement
User Story /
Requirements
38

39. Example: Search, Site Map, Breadcrumbs, Top-nav, In-page links
Notes:
• One of several UX/IX Designer-only primary criteria
SC2.4.5 Multiple Ways
UX/IX Designer None None Best Practice,
Standard
Requirement
Wireframes,
Long Content
sections
39

40. (Questionable) Example: “Blue on ‘light’ blue”
Notes:
• One of several Visual Designer primary ownership crits
• Visual Designer has no secondary ownership
SC1.4.3 Color Contrast (Minimum)
Visual Designer None Business Owner Accessibility
(Best Practice?)
Style Guide,
Design Comps
40

41. (Bad) Example: “Missing alt attribute in <img>”
Notes:
• Code reviews should already include code validation
SC4.1.1 Parsing
Developer None None Best Practices Code
41

42. Changes to the
Status Quo
42

43. Opportunities to improve efficiency and quality
for both new and existing sites
Involvement should be early in the design process – “Shift Left”
• Includes project intake
Where appropriate Distribute & Assign ownership (resolution)
to roles other than developer & testers
All roles should have training tailored to their role for efficiency
Checklists for reviewing all design deliverables before sign-off
Changes: General
43

44. Distributing common issue remediation to other roles means…
• Agile teams become more self-sufficient
• Design roles make better decisions preventing issues at the start
• Team members can identify & return issues at earlier steps without A11y SMEs
• QA testers can do perform a good portion of a11y testing
This frees Accessibility SMEs to focus on “difficult” issues that require their
expertise
Net Result: Reduce the total number of accessibility SMEs across the
enterprise
• Important for organizations with hundreds of sites
Changes: Accessibility Role
44

45. << Shift Left
45
New Projects

46. 46
“Shift Left” Approach for New Projects
QA / A11y Testing
Developers
Content Author
Visual Designer
UX/IX Designer
Business Owner
Add
A11y
here

47. Integrate accessibility early in the design process
Distribute accessibility ownership to key decision makers
Targeted, role-based training
• Refresher on existing best practices
• Accessibility training only on topics they own or impact
Changes: New Projects – “Shift Left”
47

48. << Shift Left
48
Examples

49. SC2.2.1 Timing Adjustable
Session timeouts
• Identify Need
• Select approaches to use
SC2.4.5 Multiple Ways
Initial Requirements / Feature Definitions
• Site search
• Site map
49
Shift Left Criterion Example - Requirements

50. SC2.4.3 Focus Order
Document sequence along with content elements
• Basic overview
• Page- or section-specific as needed
SC2.4.6 Headings & Labels / SC1.3.1 Info & Relationships
Document headings & hierarchies
• On page or as “table of contents” in notes (SC2.4.6)
• Define heading levels (SC1.3.1)
50
Shift Left Criterion Examples - Wireframes

51. SC1.4.3 Contrast (Minimum)
Specify and Test
• Text Colors with…
• Backgrounds
SC2.3.1 Three Flashes or Below Threshold
Define standards
• No blinking content of any kind
• Color thresholds for animation
51
Shift Left Criterion Examples – Style Guides

52. SC1.3.3 Sensory Characteristic
Inform authors to
• Include non-sensory instructions
Encourage Common Writing Standards that are AAA
• SC3.1.3 Unusual Words
• SC3.1.4 Abbreviations
• SC3.1.5 Reading Level
52
Shift Left Criterion Examples – Writing Guides

53. << Shift Left
53
Existing
Products

54. 54
“Shift Left” Approach for Triage Projects
QA / A11y Testing
Developers
Content Author
Visual Designer
UX/IX Designer
Business Owner
Address
A11y here

55. As with new projects, all roles should have targeted role-
based training
As issues are found they should be directed to the correct role
owner, not simply the developer
• Issues directed to specific roles will demonstrate how previous
decisions impacted accessibility
Changes: Triage of Existing Sites
55

56. Expand Team
• Not just developers & testers
• Include designers, content author and (possibly) business owner
Review Checkpoints
• Analyze checkpoints
• Identify typical owner to resolve issues
– Developers & Testers should not “do design”
56
“Shift Left” Remediation

57. Future of
Role-Based
Analysis
57

58. Offshoot of Education & Outreach Working Group
Approved at CSUN March 2018
• Team lead: Denis Boudreau (Deque)
• Members: Bill Tyler (me), Sean Kelly (Optum), Lewis Phillips (AT&T)
In the Future
• Midway through a 3-year plan
• Defining deliverables which include decision-tree for groups to do role-based
analysis for their own teams
• Will be open to review and input
58
W3C Accessibility Roles & Responsibilities

59. Available Now
Targeted specifically for UX designers – Not A11y experts!
Design Before Code: Thinking About Accessibility from the Ground Up
by Caitlyn Geier, 2-Part Blog Posting (2017)
• https://www.deque.com/blog/design-code-thinking-accessibility-ground/
Accessibility Heuristics 1.0
by Caitlyn Geier & Denis Boudreau, PDF document (CSUN 2018)
• https://accessibility.deque.com/accessibility-heuristics/
59
Shift Left / UX Designer Materials

60. 60

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