ode to an accessibility bug

wendy chisholm, entomologist

microsoft

sp1ral.com/about

t: wendyabc

o’: universal design

for web apps

backstorybeneficial bugsbrain spiralsbug baitbetter bugs

backstory

Does the alt key on the keyboard have anything to do with alt text?

brain spirals

Mr. Miyahi: Learning to coach

• Wax on, Wax off• Small Steps==bugs• Training, Practice, Do

it better

Spiral model

Take away: Training/Dev Resources• HTML

• WAI-ARIA 1.0 Authoring Practices, Design Patterns, W3C• Using ARIA in HTML, W3C• Accessibility 101, SSB Bart Youtube video series

• Android• Accessibility Testing Checklist• Talkback gestures

• iOS• iOS accessibility (WWDC 2014), iOS accessibility (WWDC 2015)• Watch accessibility (WWDC 2015)• iOS Accessibility, Apple Dev Center

• iOS vs Android Paul Adam, Deque• Windows Accessibility Developer Hub

beneficial bugs

Agile Development Software Lifecycle

Cost to fix a bug versus time when a bug is found

What makes a good bug?

1. Descriptive title1. [P]roblem [A]ction [L]ocation2. <= 140 characters

2. Concise description3. Clear expected results4. Details about project, version5. Platform details6. Type and severity7. Steps to reproduce8. Visual attachment9. Tags and linksLean Testing: How to write a good bug report

What makes a good accessibility bug?1. Descriptive title

1. [P]roblem [A]ction [L]ocation2. <= 140 characters

2. Concise description, IMPACT3. Clear expected results4. Details about project, version5. Platform details, AT6. Type and severity7. Steps to reproduce8. Visual OR VIDEO attachment9. Tags and links

bug bait

A toolbox of tools

Tools that I use• Automated• Tenon, aXe, Chrome Audit• F12 team looking for input,

Aaron Gustafson tweet

• Inspection• WAVE, WAT

• Access technologies• Screen readers, magnification• High contrast, speech

recognition• Color contrast

better bugs

Example: All widgets need to be in the tab order

• Title: All widgets on example.com need to be in the tab order

• Expected results: The user should be able to tab to all widgets on the page.

• Steps to reproduce:1. Go to example.com2. Press the tab key 15 times to

go from top of page to bottom

3. Note that the navigation buttons are not in the tab order

• Visual attachment: screen shot of example.com with navigation buttons circled in red

What was the result?

• Result? “Won’t fix”• Wrote JavaScript, killed

performance• Filed a new bug…

Rewriting the bug

• Title: Use tabindex=0 to put navigation buttons in the tab order

• Other info same/similar

• Links• WAI-ARIA Best Practices,

“Using tabindex to manage focus among widgets.”

Another example: all widgets need to be spoken by a screen reader• Title: All widgets need to be

spoken by a screen reader• Expected results: Using a screen

reader, the user should be able to hear all widgets on the page.

• Steps to reproduce:1. Go to example.com in Firefox

with NVDA2. Press the tab key to navigate

between widgets• Visual attachment: screen shot

of example.com with buttons circled in red

How did that one work out?

• Result? “We fixed it”• Great! User testing.• Button, group, new caption…

Trying again…• Title: All widgets need to have a

sensible name spoken by a screen reader

• Expected results: Using a screen reader, the user should be able to hear all widgets on the page.

• What happened instead: Buttons x, y and z were read as “button” instead of x, y, z

• Steps to reproduce:1. Go to example.com in Firefox

with NVDA2. Press the tab key to navigate

between widgets• Video attachment: recording of

what happened in their app vs what happens in competitor app

Severity: From Low to Snakes

• Severity: • Impossible• Prohibitive• Difficult• Distracting

• Before: everything was severe• WCAG 2.0 Level A, AA

• Now: Stack rank, roadmap

Severity scaleSeverity scale1. Sev0 – Impossible/Severe

• Button not in tab order 2. Sev1 – Prohibitive/Major

• Incorrect role3. Sev2 – Difficult/Minor

• Unintuitive tab order 4. Sev3 – Distracting/Trivial

• Spelling errors

• Create a roadmap• Coaching progression• Severity• Priority• User Feedback

Coaching 101

What makes a good accessibility bug?1. Descriptive title

1. [P]roblem [A]ction [L]ocation2. <= 140 characters

2. Concise description, IMPACT3. Clear expected results4. Details about project, version5. Platform details, AT6. Type and severity7. Steps to reproduce8. Visual OR VIDEO attachment9. Tags and links

1. FixTheWeb1. Fixtheweb.net2. Twitter: @FixTheWeb

2. Disability Answer Desk1. aka.ms/accessibilitysupport2. Twitter: @MSFTEnable

Send us bugs

….and so

Stairs

make a building inaccessible

not a wheelchair

ode to an accessibility bug

wendy chisholm, entomologist

microsoft

sp1ral.com/about

t: wendyabc

o’: universal design

for web apps