Upload
wendy-chisholm
View
958
Download
0
Embed Size (px)
Citation preview
ode to an accessibility bug
wendy chisholm, entomologist
microsoft
sp1ral.com/about
t: wendyabc
o’: universal design
for web apps
Mr. Miyahi: Learning to coach
• Wax on, Wax off• Small Steps==bugs• Training, Practice, Do
it better
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
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
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
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
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
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