Accessibility and Design: Where Productivity and Philosophy Meet - CSUN 2017 - Presented by Ryan Strunk and Joe Lonsky - Design once, develop once. Learn how providing integrated accessibility and design feedback before development begins can drastically improve the accessibility of your experience.
Accessibility and Design: Where Productivity and Philosophy Meet
1. Accessibility and Design
Where Productivity and Philosophy Meet
Ryan Strunk, Lead Accessibility Consultant
Joe Lonsky, Principal Product Designer
2.
3. Source: IBM Systems Sciences Institute - https://www.isixsigma.com/industries/software-it/defect-prevention-reducing-costs-and-enhancing-quality/
How much do bugs cost?
6.5x 15x1x
in Design
in
Development
in Testing
100
xin the Wild
4. If you find a bug while designing:
Discussion happens, maybe a meeting.
😀
5. If you find a bug in the wild:
1. Users contact support 6. Design redraws
2. Support contacts Team/PM 7. PM approves
3. PM contacts QA 8. Dev fixes
4. QA checks the bug,
confirms, writes a ticket
9. QA and design retest
5. PM prioritizes 10.Deployment
😢
6. When we joined the team here’s some of
the things we found…
7.
8. 1. Cuts down on defects.
2. Saves time and money.
3. Has greater compliance.
4. Cuts down redesign work.
We needed a process that:
17. First Pass
Back button should
allow perform escape
gesture
Selected tab of the
segmented control
should have
"selected, "
prepended to the
label
Filter button should be traited as a button
Swiping order should be logical
(left to right, top to bottom)
When a new section has been selected, remove
"selected, " from the old label.
Each tab of the segmented control should be
traited as a button.
Product tile should have label of: "product title,
price, rating”
Product image tiles
should have trait of
button.
23. 1. Unable to change shipping speed on items in cart
2. Removing Promo code from cart causes endless
speaking of “loading”
3. Cartwheel: When added and checkmark is displayed,
VO still announces as “add item”
Defects reported in October 2016:
26. Thank You
Ryan Strunk
Lead Accessibility Consultant
@rstrunk
Joe Lonsky
Principal Product Designer
@joe_lonsky
Editor's Notes
RYAN
What’s wrong here? What are the color contrast ratios?
Was = 2.28 : 1
Should be = 4.5 : 1
We didn’t have a great process in place, and this sneaked in.
JOE
Per IBM System Sciences Institute
Design $10
Development $65
Testing $150
Wild $1000
JOE
Ryan does push ups - quick set!
JOE
Ryan does more pushups! Falls down…
Keep in mind, the backlog is building the entire time and can get huge
RYAN
80 some defects
Including ones like:
Add Trait to add address button
Add proper label to scan button
Reverse order of remove and the item it refers to
Color contrast and layout issues
RYAN
Example Story – 0 defects!!!
RYAN STORY: Backlog and refactor story with PM’s?
JOE
To get to 0 defects, we used a process that incorporates accessibility at the beginning.
1) A process to cuts down on defects
2) A process that saves time and money
3) A process that has greater compliance
4) A process that cuts down on redesign work
Nobody likes having their design turned back after it’s done
RYAN
JOE
discovery could be a couple days or a couple weeks
JOE
JOE
This is where we discuss adding
Labels
Hints
Focus Order
Traits
Things engineers should know before development starts, but that doesn't fall under design.
How many defects were bad screen reader coding? This solves that
JOE
JOE
JOE to start, then RYAN
RYAN or JOE
JOE & RYAN
Search results page
JOE & RYAN
Search results page UPDATED
"Big change, moved the filter bar below the seg controller"
RYAN or JOE
JOE
Ryan - goes into colors
RYAN
Code with traits.
Automated tests.
JOE
Ryan
RYAN
Available to consult on more projects instead of spending so much time:
filing defects
retesting bugs
Setting up the organization for success.
If someone leaves, still capable of doing accessibility
Spreading the knowledge to other organizations
RYAN
Stories about exclusion: “What do you test?”
Those people can be your testers. … Why can’t they be your consultants?
I get a better understanding of the visuals. Joe learns more about a11y from me.