It’s Always Sunny in Mobile Accessibility

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

@ScopicEngineer #dvlpdnvr • Web Accessibility Overview • WCAG Overview • Exploring WCAG 2.1 Mobile Success Criteria • Android and iOS Features/Tools

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Matt D. Smith @ScopicEngineer #dvlpdnvr

Slide 7

Slide 7 text

Sites and applications that accommodate all users on all devices regardless of the situation, circumstances or ability of the user. @ScopicEngineer #dvlpdnvr

Slide 8

Slide 8 text

@ScopicEngineer #dvlpdnvr About 1 billion of the world's population lives with some form of disability 56 million live in the United States 28 million use the Internet on a daily basis - World Health Organization - U.S. Census - Pew Research Center

Slide 9

Slide 9 text

Visual Motor Cognitive Auditory Types of Disabilities @ScopicEngineer #dvlpdnvr

Slide 10

Slide 10 text

Section 508 • Healthcare, Insurance Companies, Government Agencies (including some government-funded institutions), Banking/Financial Institutions, etc Legal Requirements Section 504 • Public K-12 schools and private schools, college and Universities (that receive some federal funding) @ScopicEngineer #dvlpdnvr

Slide 11

Slide 11 text

@ScopicEngineer #dvlpdnvr Credit: BBC

Slide 12

Slide 12 text

@ScopicEngineer #dvlpdnvr Credit: WebAIM

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Web Content Accessibility Guidelines (WCAG) are a series of internationally recognized guidelines for improving web accessibility created by World Wide Web Consortium (W3C) @ScopicEngineer #dvlpdnvr

Slide 15

Slide 15 text

Four Principles of WCAG Perceivable: Users must be able to perceive the information being presented Operable: Users must be able to operate the interface Understandable: Users must be able to understand the information as well as the operation of the user interface Robust: Users must be able to access the content as technologies advance WCAG 2.1 Guidelines @ScopicEngineer #dvlpdnvr

Slide 16

Slide 16 text

WCAG Levels of Conformance Level A: The most basic web accessibility features Level AA: Deals with the biggest and most common barriers for disabled users Level AAA: The highest (and most complex) level of web accessibility @ScopicEngineer #dvlpdnvr

Slide 17

Slide 17 text

WCAG 2.0 vs WCAG 2.1 @ScopicEngineer #dvlpdnvr

Slide 18

Slide 18 text

WCAG 2.1 extends 2.0 (All success criteria from 2.0 are included in 2.1) @ScopicEngineer #dvlpdnvr

Slide 19

Slide 19 text

WCAG 2.1 has 8 new success criteria that specifically addresses mobile accessibility @ScopicEngineer #dvlpdnvr

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

1.3.4 Orientation (AA) Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. @ScopicEngineer #dvlpdnvr

Slide 22

Slide 22 text

@ScopicEngineer #dvlpdnvr Credit: Xiaolong Wong

Slide 23

Slide 23 text

2.5.1 Pointer Gestures (A) All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path- based gesture, unless a multipoint or path-based gesture is essential. @ScopicEngineer #dvlpdnvr

Slide 24

Slide 24 text

@ScopicEngineer #dvlpdnvr Credit: Sebastian Hietsch

Slide 25

Slide 25 text

2.5.4 Motion Actuation (A) Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when: Supported Interface or Essential @ScopicEngineer #dvlpdnvr

Slide 26

Slide 26 text

@ScopicEngineer #dvlpdnvr Credit: AndroidCentral

Slide 27

Slide 27 text

2.5.2 Pointer Cancellation (A) For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event, Abort or Undo, Up Reversal, Essential @ScopicEngineer #dvlpdnvr

Slide 28

Slide 28 text

@ScopicEngineer #dvlpdnvr Credit: The Internet

Slide 29

Slide 29 text

2.5.6 Concurrent Input Mechanisms (AAA) Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings. @ScopicEngineer #dvlpdnvr

Slide 30

Slide 30 text

@ScopicEngineer #dvlpdnvr Credit: Hable

Slide 31

Slide 31 text

2.5.5 Target Size (AAA) The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: Equivalent, Inline, User Agent Control, Essential @ScopicEngineer #dvlpdnvr

Slide 32

Slide 32 text

@ScopicEngineer #dvlpdnvr Credit: Apple Design

Slide 33

Slide 33 text

2.5.3 Label in Name (A) For user interface components with labels that include text or images of text, the name contains the text that is presented visually. @ScopicEngineer #dvlpdnvr

Slide 34

Slide 34 text

@ScopicEngineer #dvlpdnvr Credit: The Internet

Slide 35

Slide 35 text

4.1.3 Status Messages (AA) In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. @ScopicEngineer #dvlpdnvr

Slide 36

Slide 36 text

@ScopicEngineer #dvlpdnvr Credit: Knowbility

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

@ScopicEngineer #dvlpdnvr Credit: WebAIM

Slide 40

Slide 40 text

• VoiceOver • Zoom • Magnifier iOS A11y Features • Invert Colors • Larger Text • Switch Control Learn More: Accessibility on iOS @ScopicEngineer #dvlpdnvr

Slide 41

Slide 41 text

• TalkBack • Magnifier • Switch Control Android A11y Features • High Contrast Text • Larger Text • Switch Control Learn More: Android Accessibility Overview @ScopicEngineer #dvlpdnvr

Slide 42

Slide 42 text

TalkBack / VoiceOver @ScopicEngineer #dvlpdnvr

Slide 43

Slide 43 text

• Axe for iOS (pending) • Accessibility Inspector - Xcode iOS A11y Tools @ScopicEngineer #dvlpdnvr

Slide 44

Slide 44 text

Android A11y Tools • Axe for Android • Accessibility Scanner • Android Accessibility Test Kit @ScopicEngineer #dvlpdnvr

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

@ScopicEngineer #dvlpdnvr • Accessibility is important • Make your mobile sites and applications accessible because its the right thing to do • But if you don’t want to do it because its the right thing then do it because it’s the legally required thing • Be intentional in your coding and design • Don’t let WCAG scare you

Slide 47

Slide 47 text

Thank You! Website: https://crystalprestonwatson.com Linkedin: https://www.linkedin.com/in/crystalpw Twitter: @ScopicEngineer

Slide 48

Slide 48 text

Resources • Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile • Demystifying Accessibility • What’s New in WCAG 2.1 • Understanding WCAG 2.1 – Reviewing Mobile Success Criteria • TPG Mobile Accessibility Testing Guide • Mobile accessibility checklist • BBC Mobile Accessibility Guidelines