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 sharanya.viswanath@gmail.com web-

a11y.slack.com

27

VoiceOver

28