1. Scaling Accessibility
Consistent, complete and affordable
Dylan Barrell, CTO
@dylanbarrell
Sign up for slides:

3. Who’s fault is it?

4. Who’s fault is it?
Yours

5. Two types of organizations
Reactive
Proactive

6. Proactive organization

7. Development Process Business Requirement UX design Development and QA
UAT
Ship

8. Development Process Business Requirement UX design Development and QA
UAT
Ship
WCAG 2 AA

9. Development Process Business Requirement UX design Development and QA
UAT
Ship
WCAG 2 AA
Train

10. Development Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train

11. Development Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train
Backlog

12. Development Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train
The backlogged issues rarely get fixed
Backlog

13. Reactive organization

14. “Deadline” Process Business Requirement UX design Development and QA
UAT
Ship

15. “Deadline” Process Business Requirement UX design Development and QA
UAT
Ship
WCAG 2 AA

16. “Deadline” Process Business Requirement UX design Development and QA
UAT
Ship
WCAG 2 AA
Train

17. “Deadline” Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train

18. “Deadline” Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train

19. Post-”Deadline” Process
Business Requirement
UX design
Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Train
Backlog

20. Why is that your fault?

21. Why is it your fault? Accessibility is overwhelming
Some manual testing checklists have over 100 “checks”
Accessibility is not only a technical problem
Many “solutions” on the Web are incomplete

22. First rule of sustained accessibility
Stop expecting magic

23. Second rule of sustained accessibility
Set achievable goals

24. End Goal

25. Best Practice
Integrate Accessibility into all aspects of the development process, starting with UX

26. Best Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Personas
UX research
Multi-device interactions
Design Annotations

27. Design Annotations Interaction for role=button
Keyboard: SPACE or ENTER equals click
Disabled buttons cannot receive focus
Disabled buttons do not respond to a click/touch
Role: toolbar
Name: Player Controls
Role: button
Name: Next track
State:
Focusable
Interaction for the entire component
When on first track: disable “previous track” button
When on last track: disable “next track” button
When playing, display the “pause” button and hide the “play” button
When not playing: display the “play” button and hide the “pause” button
After clicking “play”, place focus on the “pause” button
After clicking “pause” place focus on the “play” button
Role: button
Name: Previous track
State: disabled
56x56
Role: button
Name: Pause
State:
Focusable
Focused state for a button
Background color: rgb(201,201,201)
Foreground color: rgb(54,64,77)

28. 1: widget annotations 1 1 1 1 Interaction for role=button
Keyboard: SPACE or ENTER equals click
Disabled buttons cannot receive focus
Disabled buttons do not respond to a click/touch 1
Role: toolbar
Name: Player Controls 1 1
Role: button
Name: Next track
State:
Focusable
Interaction for the entire component
When on first track: disable “previous track” button
When on last track: disable “next track” button
When playing, display the “pause” button and hide the “play” button
When not playing: display the “play” button and hide the “pause” button
After clicking “play”, place focus on the “pause” button
After clicking “pause” place focus on the “play” button
Role: button
Name: Previous track
State: disabled
56x56 1
Role: button
Name: Pause
State:
Focusable
Focused state for a button
Background color: rgb(201,201,201)
Foreground color: rgb(54,64,77)

29. 2: interaction annotations
Interaction for role=button
Keyboard: SPACE or ENTER equals click
Disabled buttons cannot receive focus
Disabled buttons do not respond to a click/touch 2
Role: toolbar
Name: Player Controls
Role: button
Name: Next track
State:
Focusable
Interaction for the entire component
When on first track: disable “previous track” button
When on last track: disable “next track” button
When playing, display the “pause” button and hide the “play” button
When not playing: display the “play” button and hide the “pause” button
After clicking “play”, place focus on the “pause” button
After clicking “pause” place focus on the “play” button
Role: button
Name: Previous track
State: disabled 2
56x56
Role: button
Name: Pause
State:
Focusable
Focused state for a button
Background color: rgb(201,201,201)
Foreground color: rgb(54,64,77)

30. 3: alternative state annotations
Interaction for role=button
Keyboard: SPACE or ENTER equals click
Disabled buttons cannot receive focus
Disabled buttons do not respond to a click/touch
Role: toolbar
Name: Player Controls
Role: button
Name: Next track
State:
Focusable
Interaction for the entire component
When on first track: disable “previous track” button
When on last track: disable “next track” button
When playing, display the “pause” button and hide the “play” button
When not playing: display the “play” button and hide the “pause” button
After clicking “play”, place focus on the “pause” button
After clicking “pause” place focus on the “play” button
Role: button
Name: Previous track
State: disabled
56x56 3
Role: button
Name: Pause
State:
Focusable
Focused state for a button
Background color: rgb(201,201,201)
Foreground color: rgb(54,64,77)

31. Best Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Personas
UX research
Multi-device interactions
Design Annotations
Automated testing
Manual testing
Build accessibility in
Prioritize backlog defects

32. Automated Testing
Generic Automation
aXe
Acceptance automation

33. Acceptance Automation
Interaction for role=button
Keyboard: SPACE or ENTER equals click
Disabled buttons cannot receive focus
Disabled buttons do not respond to a click/touch
Role: toolbar
Name: Player Controls
Role: button
Name: Next track
State:
Focusable
Interaction for the entire component
When on first track: disable “previous track” button
When on last track: disable “next track” button
When playing, display the “pause” button and hide the “play” button
When not playing: display the “play” button and hide the “pause” button
After clicking “play”, place focus on the “pause” button
After clicking “pause” place focus on the “play” button
Role: button
Name: Previous track
State: disabled
56x56
Role: button
Name: Pause
State:
Focusable
Focused state for a button
Background color: rgb(201,201,201)
Foreground color: rgb(54,64,77)

34. Manual Testing During development
Screen reader
Keyboard
UAT/UX testing with people with disabilities

35. Best Process Business Requirement UX design Development and QA
Accessibility and UAT
Ship
WCAG 2 AA
Personas
UX research
Multi-device interactions
Design Annotations
Automated testing
Manual testing
Build accessibility in
Prioritize backlog defects
Stop ship for critical issues

36. Path to the end goal

37. Set realistic goals Start with a subset of WCAG 2 AA
Give teams time to achieve this subset
Increase subset over time
Allow teams to self-serve to achieve more

38. Stop expecting magic Explicit communication
the process
the end-goal
the progress (measure)
Provide access to “on demand” training
Create pattern libraries and examples
Provide state of the art tools
Apply subject matter expertise at highest leverage points
Help when struggling
UX review

39. Starting Subset Everything that can be found 100% automatically
30% to 50% of issues can be found by aXe
Concrete
High impact areas

40. Deque “Smoke Test” Informative images Decorative images Images of text
Reading order
Visual cues
Error identification
Color contrast
Keyboard
Focus visible
Headings
Form labels
Form instructions
Not the complete list

41. Integrating Accessibility into Your Development Workflow with Attest
Today – 1:20 – 2:20 pm
Marcy Sutton

42. Design Before Code: Thinking About Accessibility from the Ground Up
Thursday – 9:00 – 10:00 am
Caitlin Geier

43. Scaling Manual Accessibility Testing
Thursday – 10:00 – 11:00 am
Ian Kelly

44. Questions?

45. Deque’s Full CSUN Schedule:
Sign up to receive
presentation slides:
Deque’s Full CSUN Schedule:
@dequesystems

46. Stump the Accessibility Expert Deque Party + Accessible Karaoke
Today – 3:30-4:30pm
Deque Party + Accessible Karaoke
Today – 6:30-10pm Palm Foyer
aXe Hackathon
Saturday, March 4th 9am-12pm
Solana Beach AB Room