Build and test with empathy. Sharanya Viswanath. Slack Technologies, Inc. Nordic Testing Days 2018

Transcription

1 Build and test with empathy Sharanya Viswanath Slack Technologies, Inc. Nordic Testing Days

2 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

3 Agenda 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 3

4 Understanding A(11)y A(ccessibilit)y 4

5 Why should you care? Improve Efficiency Social Responsibility EQUAL WEB ACCESS Reduce Legal Liability Increase Market Share 5

6 Disabilities that impact software use BISUAL VISUAL AUDITORY MOTOR COGNITIVE 6

7 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

8 Accessibility Standards Guidelines: Web Content Accessibility Guidelines (WCAG) by W3C Levels A, AA, AAA Legislations: European Accessibility Act Section 508 Adoption: present Over 40 countries 8

9 Doing it right Understand users Invest in usability testing Meaningful design approaches Survey post release Iterate Don t overdo it Include early-on Not an afterthought! 9

10 Build (visual, cognitive) 10

11 Layout <div class="button"></div> <div class="button" role="button"></div> Use <button> instead 11

12 Typography WebAIM: font-weight font-size line-height font-family 12

13 Color WebAIM: Tip: Do NOT use color to convey information 13

14 Resize BBC Homepage: - zoom from 25% to 500% <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable =no"> 14

15 Build (motor) 15

16 Navigation Navigation with color contrast friendly focus ring tabindex=-1 to tab out of focus 16

17 Testing 17

18 Test plan Build a test matrix Look for items to automate Keyboard Nav Touch Screen Voiceover Color Contrast Zoom Browsers ** Desktop App ** Mobile App * * - 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 18

19 Manual/Automated Testing 19

20 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

21 Browser Extensions axe Chrome/Firefox Extension: Tota11y: a11y visualization 21

22 axe-core Integrations 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') Rspec matcher: 22

23 Webdriver def expect_element_focused(element, focus_selector) end expect(element.element(css: focus_selector)).to exist expect(element.focused).to(be_truthy, "Failed") expect(element.attribute_value('aria-label').empty?).to be false expect(element.attribute_value('tabindex')).to eq '-1' Focus State, TabIndex, Other associated labels 23

24 Resources 24

25 Info HTML5 for web - ios Accessibility guidelines - Android Accessibility guidelines

26 Learn more Designing Slack for everyone - Accessibility for everyone by Laura Kahlbag - Udacity - ud891 Conference - CSUN Assistive technology conference - Global accessibility awareness day - 3 rd thursday every May

27 Thanks for your time! Sharanya Viswanath Senior Software Engineer Slack Technologies, Inc weba11y.slack.com 27

28 VoiceOver 28