Auditing Your Apps for Accessibility

Developer Tools #WWDC16 Auditing Your Apps for Accessibility Making your apps accessible with greater ease Session 407 Susumu Harada Accessibility ...
Author: Camron Moody
1 downloads 1 Views 3MB Size
Developer Tools

#WWDC16

Auditing Your Apps for Accessibility Making your apps accessible with greater ease Session 407

Susumu Harada Accessibility Engineer Patti Hoa Accessibility Engineer

© 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Vision

Hearing

Physical and
 motor skills

Learning and
 literacy

VoiceOver

Reduce transparency

Word prediction

Mono audio

Gliding cursor speed Switch control Invert colors

On/Off labels

Grayscale

AssistiveTouch

Button shapes

Subtitles

Larger cursor

Zoom

Closed captions

Speech

Increase contrast

Auto scanning

Safari reader

Dictation

Reduce motion Guided access

Speak screen

Captioning

Larger text Cursor color

Audio descriptions

Hearing aids Slow Keys

Siri Sticky keys

Bold text Gestures

Touch accommodations

Example App Math Learner

Example App Math Learner

Example App Math Learner

Example App Math Learner

Vision

Example App Math Learner

Vision

VoiceOver

Example App Math Learner "Five plus three equals"

Vision

VoiceOver

Example App Math Learner

VoiceOver

Example App Math Learner

Element locations

VoiceOver

Example App Math Learner

Element traits

VoiceOver

Example App Math Learner Button

Heading

Static text

Element traits

VoiceOver Button

Button

Button

Button

Button

Example App Math Learner Button

Heading

Static text

Element labels

VoiceOver Button

Button

Button

Button

Button

Example App Math Learner

“Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

Element labels

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

Example App Math Learner

“Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

Example App Math Learner

“Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

Accessibility API

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

Element locations

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

Element locations

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

Element traits

VoiceOver “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

Element traits

VoiceOver “Help” Button

“One”

“Four”

“Eight”

“Nine”

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

Element labels

VoiceOver “Help” Button

“One”

“Four”

“Eight”

“Nine”

When the App Is Inaccessible “Main Menu” Button

“Addition” Heading

Unusable by VoiceOver user

VoiceOver Button

“One”

“Four”

“Eight”

“Nine”

Added Benefit of Accessibility “Main Menu” Button

Button

“Addition” Heading

“One”

“Four”

“Eight”

“Nine”

Added Benefit of Accessibility “Main Menu” Button

“Addition” Heading

“Five plus three equals” Static text

“Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

Added Benefit of Accessibility “Main Menu” Button

Makes your app testable via Xcode UI testing

“Addition” Heading

“Five plus three equals” Static text

Xcode UI Testing “Help” Button

“One”

“Four”

Button

Button

“Eight”

“Nine”

Button

Button

Auditing for Accessibility “Main Menu” Button

Button

“Addition” Heading

“One”

“Four”

“Eight”

“Nine”

Auditing for Accessibility Using assistive technologies

“Main Menu” Button

“Addition” Heading

Mirrors actual user experience Can catch usability issues

VoiceOver Button

“One”

“Four”

“Eight”

“Nine”

Auditing for Accessibility Using the new Accessibility Inspector

“Main Menu” Button

Accessibility Inspector Button

“Addition” Heading

“One”

“Four”

“Eight”

“Nine”

Introducing the New Accessibility Inspector

Introducing the New Accessibility Inspector Automatic accessibility audits

Introducing the New Accessibility Inspector Automatic accessibility audits Interactive inspection modes

Introducing the New Accessibility Inspector Automatic accessibility audits Interactive inspection modes Accessibility settings live preview

Introducing the New Accessibility Inspector Automatic accessibility audits Interactive inspection modes Accessibility settings live preview Support for all platforms

Introducing the New Accessibility Inspector

The New Accessibility Inspector Patti Hoa Accessibility Engineer

NEW

The New Accessibility Inspector Patti Hoa Accessibility Engineer

28

28

28

29

29

29

30

Inspection • Debug and analyze

accessibility state

30

Inspection

Audit

• Debug and analyze

• Find and report

accessibility state

accessibility issues

30

Inspection

Audit

Settings

• Debug and analyze

• Find and report

• Test impact of accessibility

accessibility state

accessibility issues

setting change

30

Audit

Demo Audit Patti Hoa Accessibility Engineer

Manual Audit

Manual Audit Example

Manual Audit Example

Button Action

self.send()

Button Icon Accessibility Label

Send mail

Manual Audit Example

Button Action

self.send()

Button Icon Accessibility Label

Send mail

Manual Audit Example Duplicate

Button Action

self.send()

self.send()

Send mail

Send mail

Button Icon Accessibility Label

Manual Audit Example

Button Action

self.send()

self.send()

Send mail

Send mail

Button Icon Accessibility Label

Manual Audit Example

Button Action

self.send()

self.delete()

Send mail

Send mail

Button Icon Accessibility Label

Manual Audit Example

Button Action

self.send()

self.delete()

Send mail

Send mail

Button Icon Accessibility Label

Perceived by Accessibility Clients

Button Action

“Send mail”

“Send mail”

self.send()

self.delete()

Send mail

Send mail

Button Icon Accessibility Label

Perceived by Accessibility Clients

Button Action

“Send mail”

“Send mail”

self.send()

self.delete()

Send mail

Send mail

Button Icon Accessibility Label

Inspection

Inspection Feature

Inspection Feature

Inspect

Inspection Feature

Inspect

Inspection Feature

Inspect

Inspection Feature

Inspect

Inspection Feature

Inspect

Inspection Feature

Inspect

Demo Inspection Patti Hoa Accessibility Engineer

Settings

647 x 1150

647 x 1150

Accessibility Inspector Features

Accessibility Inspector Features Audit
 Find and report accessibility issues

Accessibility Inspector Features Audit
 Find and report accessibility issues

Inspection
 Debug and analyze accessibility state

Accessibility Inspector Features Audit
 Find and report accessibility issues

Inspection
 Debug and analyze accessibility state

Settings
 Test impact of accessibility setting change

Summary

Summary Keep users of all abilities in mind

Summary Keep users of all abilities in mind Use the new Accessibility Inspector to identify potential accessibility issues

Summary Keep users of all abilities in mind Use the new Accessibility Inspector to identify potential accessibility issues Easily inspect apps on all Apple platforms

Summary Keep users of all abilities in mind Use the new Accessibility Inspector to identify potential accessibility issues Easily inspect apps on all Apple platforms

More Information

https://developer.apple.com/wwdc16/407

Feedback is Welcome

Related Sessions What’s New in Accessibility

Pacific Heights

Tuesday 9:00AM

Inclusive App Design

Pacific Heights

Tuesday 10:00AM

Accessible Technology and Inclusive Design

Buena Vista Park

Wednesday 6:15PM

Labs Accessibility User Interface by Appointment Lab

User Interface Design Lab B

Wednesday 9:00AM

Accessibility and Speech Lab

Frameworks
 Lab C

Wednesday 2:30PM