Testing for Accessibility, SwiftConf 2022

Slide 1

Slide 1 text

Testing for Accessibility

Slide 2

Slide 2 text

I’m Robin Kanatzar. You can ﬁnd me on Twitter @RobinKanatzar Testing for Accessibility 2

Slide 3

Slide 3 text

what we can and can’t test tools process & testing pyramid 3 The plan

Slide 4

Slide 4 text

4 Accessibility (A11y) in 30 seconds Assistive Technology - VoiceOver - Voice Control - Switch Control - …

Slide 5

Slide 5 text

What we can and can’t test with a machine 1. 5

Slide 6

Slide 6 text

References ▪ Web Content Accessibility Guidelines (WCAG) ▪ Apple’s Human Interface Guidelines (HIG)

Slide 7

Slide 7 text

Color Contrast 4.5 : 1 Dark mode & light mode

Slide 8

Slide 8 text

Touch Target 44 x 44 pt XCTAssert(element.frame.size.height >= 44) XCTAssert(element.frame.size.width >= 44)

Slide 9

Slide 9 text

Overlapping Elements Overlapping Controls element1.frame .intersects(element2.frame)

Slide 10

Slide 10 text

Conﬂicting Traits E.g. button & link if element.traits.contains(.button) && element.traits.contains(.link) { // traits are conﬂicting }

Slide 11

Slide 11 text

Dynamic Type “without loss of content or functionality” - WCAG 1.4.4 app.launchArguments += [ "-UIPreferredContentSizeCategoryName", "UICTContentSizeCategoryAccessibilityXXXL" ] app.launch() scrollView .descendants( matching: .staticText ) (Source: A11yUITests)

Slide 12

Slide 12 text

Orientation “without loss of content or functionality” XCUIDevice .shared .orientation = .landscapeLeft

Slide 13

Slide 13 text

Localization accessibilityLabel, not accessibilityIdentiﬁer app.launchArguments += [“-AppleLanguages”, “(fr)”] app.launchArguments += [“-AppleLocale”, “fr_FR”] app.buttons["Start"] app.buttons["Démarrer"]

Slide 14

Slide 14 text

Element Labels Exists No duplicates on page Doesn’t end in “.” Begins with upper case < 20 Characters No special characters No “button”/“image” Does this label make sense? Is it redundant? myButton.accessibilityLabel = “Play” Button() .accessibility(label: “Play”)

Slide 15

Slide 15 text

Element Ignoring Decorative elements “waste time for users and add to their cognitive load without providing any beneﬁt” - Apple myImage.isAccessibilityElement = false Image() .accessibility(hidden: true) Image(decorative: "SomeImage")

Slide 16

Slide 16 text

Element Grouping Semantic Groups

Slide 17

Slide 17 text

Element Ordering Top left => bottom right

Slide 18

Slide 18 text

18 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Orientation Localization Element labels Element ignoring Element grouping Element ordering … and more What we can and can’t test

Slide 19

Slide 19 text

Tools What they’re good at, and not so good at 2. 19

Slide 20

Slide 20 text

Tools ▪ Automated Testing Tools ▪ Auditing & Inspection Tools ▪ Linting Tools 20

Slide 21

Slide 21 text

Automated Testing Tools ▪ Evinced SDK ($) ▪ Deque SDK ($) ▪ A11yUITests (free) ▪ XCUITest (free) 21

Slide 22

Slide 22 text

Evinced XCUI-SDK ▪ Easy setup (Cocoapods, SPM) ▪ SwiftUI & UIKit ▪ Doesn’t fail or slow down your UI test ▪ Reports in test results, organize by severity 22 ▪ Paid (14 day free trial)

Slide 23

Slide 23 text

Slide 24

Slide 24 text

24 24 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization - Orientation - Element labels (existence) Element labels (formatting) Element ignoring

Slide 25

Slide 25 text

axeDevToolsXCUI (Deque) ▪ Easy setup (SPM) ▪ UIKit & SwiftUI ▪ Doesn’t fail or slow down your UI test ▪ Reports directly on web dashboard ▪ Experts, x-platform at Deque 25 ▪ Paid ▪ New to Deque

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

27 27

Slide 28

Slide 28 text

28 28 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization - Orientation - Element labels (existence) Element labels (formatting) Element ignoring

Slide 29

Slide 29 text

A11yUITests ▪ Free ▪ Open source ▪ UIKit & SwiftUI ▪ Easy integration ▪ Choose testing suite ▪ Choose views to test 29 ▪ Slow if you have a lot of elements Rob Whitaker - mobilea11y.com - @RobRWAPP 29 29

Slide 30

Slide 30 text

30 30 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization - Orientation - Element labels (existence) Element labels (formatting) Element ignoring

Slide 31

Slide 31 text

XCUITest (DIY) ▪ Free ▪ Built into Xcode ▪ Only check what you want to check ▪ Learn by doing 31 ▪ Time to create/maintain

Slide 32

Slide 32 text

▪ Accessibility Inspector (free) ▪ Accessibility Menu (free) ▪ Evinced Flow Analyzer (free) ▪ Reveal ($) 32 Auditing & Inspection Tools

Slide 33

Slide 33 text

Accessibility Inspector ▪ Free ▪ Built into Xcode ▪ UIKit and SwiftUI 33 ▪ Buggy Xcode > Open Developer Tools > Accessibility Inspector

Slide 34

Slide 34 text

34 34

Slide 35

Slide 35 text

35 35 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring

Slide 36

Slide 36 text

Accessibility Menu ▪ Free ▪ Built into Xcode ▪ Shows order of elements ▪ Shows label, value, identiﬁer, traits 36 ▪ SwiftUI only ▪ Buggy

Slide 37

Slide 37 text

37 37

Slide 38

Slide 38 text

38 38 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization - Orientation - Element labels (existence) Element labels (formatting) Element ignoring

Slide 39

Slide 39 text

Evinced Flow Analyzer ▪ Free ▪ SwiftUI & UIKit ▪ Report ▪ iOS and Android ▪ Can check any app ▪ Can check ﬂow instead of individual screen 39 ▪

Slide 40

Slide 40 text

40 40

Slide 41

Slide 41 text

41 41 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization - Orientation - Element labels (existence) Element labels (formatting) Element ignoring

Slide 42

Slide 42 text

Reveal ▪ SwiftUI & UIKit ▪ VoiceOver & Voice Control modes ▪ Color modes ▪ WCAG AA, AAA color contrast checks 42 ▪ Paid ▪ Beta

Slide 43

Slide 43 text

43 43

Slide 44

Slide 44 text

44 44 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring Assistive Technology ▪ VoiceOver ▪ Voice Control

Slide 45

Slide 45 text

Linting Tools ▪ XibLint (free) ▪ SwiftLint (free) 45

Slide 46

Slide 46 text

XibLint ▪ Free ▪ Open source ▪ Can make your own rules (in python) 46 ▪ Setup hard ▪ UIKit only ▪ Must use .xib/.storyboard ▪ Only three rules 46 46

Slide 47

Slide 47 text

SwiftLint ▪ Free ▪ Probably already in your project 47 ▪ Easy setup ▪ Only one accessibility rule ▪ Only SwiftUI accessibility_label_for_image

Slide 48

Slide 48 text

48 48 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring

Slide 49

Slide 49 text

Tools Automated ▪ Evinced XCUI-SDK ▪ axeDevToolsX CUI SDK ▪ A11yUITests ▪ XCUITest Audit & Inspect ▪ Accessibility Inspector ▪ Accessibility Menu ▪ Evinced Flow Analyzer ▪ Reveal Lint ▪ XibLint ▪ SwiftLint

Slide 50

Slide 50 text

Development Process And testing pyramid 3. 50

Slide 51

Slide 51 text

Small Team, No Resources Startup, indie dev No time, no budget, no manpower

Slide 52

Slide 52 text

Unit Unit & Lint Manual Prod UI Design Develop QA Publish Develop ▪ Accessibility Inspector ▪ Accessibility Menu QA ▪ Evinced Mobile Flow Analyzer Develop Review QA 52 52

Slide 53

Slide 53 text

53 53 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring ▪ Feedback from users in prod UIKit Assistive Technology ▪ VoiceOver

Slide 54

Slide 54 text

Small Team, Few Resources Time for UI tests $ for paid accessibility tester

Slide 55

Slide 55 text

Unit & Lint Manual Prod Design Develop QA Publish Accessibility UI Tests ▪ Dynamic type ▪ Orientation ▪ Localization ▪ A11yUITests Accessibility Manual Tests Accessibility QA ▪ Paid tester who uses assistive technology Review UI Accessibility UI Accessibility Manual A11y QA 55 55

Slide 56

Slide 56 text

56 56 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring ▪ One paid tester (real user of assistive technology) Assistive Technology ▪ VoiceOver

Slide 57

Slide 57 text

Medium Team, Some Resources Multiple developers QA team CI/CD Dev Tools

Slide 58

Slide 58 text

Unit & Lint Manual Prod Design Develop QA Publish UI Tests (CI/CD) ▪ More Develop ▪ Reveal Review UI Accessibility UI Accessibility Manual A11y QA Develop Manual Testing with Assistive Technology ▪ Train QAs to test with one type of assistive tech

Slide 59

Slide 59 text

59 59 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring ▪ One paid tester (real user of assistive technology) ▪ Trained QAs Assistive Technology ▪ VoiceOver ▪ Voice Control

Slide 60

Slide 60 text

Large Team, Unlimited Resources Dream big.

Slide 61

Slide 61 text

Manual Prod Design Develop QA Publish Accessibility UI Tests ▪ Deque SDK (unit + ui) ▪ Evinced SDK Accessibility QA ▪ QAs who use assistive technology ▪ Test multiple ATs Review UI Accessibility UI Accessibility Manual A11y QA Unit & Lint

Slide 62

Slide 62 text

62 62 Color contrast Touch targets Overlapping elements Conﬂicting traits Dynamic type Localization Orientation Element labels (existence) Element labels (formatting) Element ignoring ▪ Many paid testers (real user of assistive technology) ▪ Trained QAs Assistive Technology ▪ VoiceOver ▪ Voice Control ▪ … and more!

Slide 63

Slide 63 text

63 Conclusion what we can and can’t test tools process & testing pyramid

Slide 64

Slide 64 text

Thanks! Any questions? You can ﬁnd me at ▪ @RobinKanatzar on Twitter ▪ [email protected] 64 Feedback