Build and test with empathy - Nordic Testing Days · Types of impairments, Software people use...
Transcript of Build and test with empathy - Nordic Testing Days · Types of impairments, Software people use...
Build and test with empathy
Sharanya ViswanathSlack Technologies, Inc.
Nordic Testing Days 20181
“The craft of programming begins with empathy, not formatting or languages
or tools or algorithms or data structures.
- Kent Beck, Creator of Extreme Programming
2
● Understanding accessibility
○ Why should you care?
○ Types of impairments, Software people use
○ Standards/ legislation
○ Doing it right
● Building accessible software
○ For visual, motor, cognitive impairments
● Testing for accessibility
○ Test plan, Manual testing, Automated testing
● Resources
Agenda
3
Understanding A(11)yA(ccessibilit)y
4
Why should you care?
5
Improve Efficiency
Reduce Legal Liability
Increase Market Share
EQUAL WEB ACCESS
Social Responsibility
Disabilities that impact
software use
6
BISUAL
COGNITIVE
VISUAL
MOTOR
AUDITORY
Common Tools
▪ Most OS’ basic support:- Zoom
- Contrast
- VoiceOver
▪ 3rd party softwares:- JAWS(Job Access with Speech)
- NaturalReader- Augmented Reality and AI:
- Aira Glasses by Aira- Seeing AI by Microsoft
7
● Guidelines:○ W eb Content Accessibility Guidelines (W CAG) by W3C
■ Levels A, AA, AAA
● Legislations:○ European Accessibility Act○ Section 508
● Adoption:○ 1985 - present ○ Over 40 countries
Accessibility Standards
8
● Understand users ○ Invest in usability testing ○ Meaningful design approaches ○ Survey post release○ Iterate
● Don’t overdo it
● Include early-on
● Not an afterthought!
Doing it right
9
Build(visual, cognitive)
10
Layout
<div class="button"></div> <div class="button" role="button"></div>
Use <button> instead
11
Typography
12
WebAIM: https://webaim.org/techniques/fonts
font-weight font-size line-height font-family
Color
WebAIM:https://webaim.org/resources/contrastchecker/
13
Tip: Do NOT use color to convey information
BBC Homepage: www.bbc.com - zoom from 25% to 500%
Resize
14
<meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable =no">
Build(motor)
15
Navigation with color contrast friendly focus ring
Navigation
16
tabindex=-1 to tab out of focus
Testing
17
Test plan
Keyboard Nav
Touch Screen
Voiceover Color Contrast Zoom
Browsers • ** • • •
Desktop App • ** • • •
Mobile App * • • • •
18
▪ Build a test matrix▪ Look for items to automate
* - Some mobile users connect their tablets/phones to an external keyboard** - Some users have touch monitors to be able to interact with their browser or desktop app
Manual/Automated Testing
19
Common tools ▪ Manual- aXe - Chrome/Firefox Extension
- JAWS by Freedom Scientific
- Tota11y by Khan academy - Voiceover by Apple
▪ Automation: - aXe - Core integrations - Selenium Webdriver
- Pa11y- Tenon.io
- Mobile: - XCUITest for iOS- Espresso for Android
- Appium for iOS and Android
20
Browser Extensions
aXe Chrome/Firefox Extension: https://axe-core.org/
21
Tota11y: a11y visualizationhttp://khan.github.io/tota11y/
axe-coreIntegrations
Rspec matcher: https://github.com/dequelabs/axe-matchers/blob/develop/docs/RSpec.md
22
expect(element).to be_accessible.checking_only
:label, :color-contrast
expect(page).to be_accessible.according_to
:wcag2a, :section508
expect(page).to be_accessible.within('.main','.head')
.excluding('.footer')
Webdriver
Focus State, TabIndex, Other associated labels
23
def expect_element_focused(element, focus_selector)
expect(element.element(css: focus_selector)).to existexpect(element.focused).to(be_truthy, "Failed")
expect(element.attribute_value('aria-label').empty?).to be false
expect(element.attribute_value('tabIndex')).to eq '-1'
end
Resources
24
Info▪ HTML5 for web - http://www.html5accessibility.com/
▪ iOS Accessibility guidelines -https://developer.apple.com/accessibility/ios/
▪ Android Accessibility guidelines -
https://developer.android.com/guide/topics/ui/accessibility/
25
Learn more
26
• Designing Slack for everyone - https://slackhq.com/designing-slack-for-everyone-456002920bf2
• “Accessibility for everyone” by Laura Kahlbag -https://abookapart.com/products/accessibility-for-everyone
• Udacity - https://www.udacity.com/course/web-accessibility--ud891
• Conference - CSUN Assistive technology conference -http://www.csun.edu/cod/conference/2018/sessions/
• Global accessibility awareness day - 3rd thursday every May -http://globalaccessibilityawarenessday.org/
Thanks for your time! …………………………………………………
Sharanya ViswanathSenior Software Engineer
Slack Technologies, Inc…………………………………………………
www.linkedin.com/in/sharanyav [email protected] web-
a11y.slack.com
27
VoiceOver
28