Slide Notes

Presentation Home

Hitting a moving target:achieving mobile inclusion

Jon Gibbins, Accessibility Consultant, Dotjay LtdShadi Abou-­Zahra, Activity Lead, W3C/WAI ProgramOffice

e-­access ’13 — 31 October 2013

Jon Gibbins (Dotjay)

Accessibility consultant at DIG Inclusion

Web developer since 2003

Assistive technology since 2002

Hello

2

Shadi Abou-­ZahraW3C Web Accessibility Initiative (WAI)Activity Lead, WAI International Program Office

Hello

3

This workshop will:give an overview of the accessibility features available on themajor mobile platforms;;demonstrate how people with disabilities interact withtechnologies such as touch screens;;introduce some of the accessibility guidelines, specifications,and resources for mobile;;suggest strategies and techniques for integrating accessibilityinto projects on the mobile web and mobile platforms;;invite delegate questions in a Q&A session.

Summary

4

Mobile accessibility features

5

Screen readers

Magnifiers

Voice input

Now:

Current market share favours iOS and Android

devices over other vendors

iOS accessibility features and programming API are

most mature

Android devices have some good accessibility

features, improving all the time

Mobile accessibility features

6

Slide Notes

A short 1:08 minute video of Victor Tsaran navigating headings andlinks using the iPhone. Navigating a web page with VoiceOver on aniPhone -­ YouTube

1. Explore by touchDrag finger over screenItems under your finger are described by screen readerTap with a second finger or double tap to open/activate

2. Gesture navigationSwipe right/left moves focus to next/previous content insequenceItems are described by screen reader as focus movesDouble tap to open/activate

How do people with disabilities use mobile devices?

7

VoiceOver

Introduced with iPhone 3GS in

2009

Zoom (system-­wide)

Three-­finger gestures for zoom

control/movement

Zoom up to 5x

Pinch zoom

Large Text / Dynamic Type

Invert Colors / Black on White

iOS accessibility features

8

FaceTime — used by deaf peopleGuided AccessAssistive TouchSpeak selectionCaptioned content (QuickTime)

Custom vibrationsLED FlashHearing aid support

Mono audio and balance controlTTY (used by the Deaf)iMessageVisual Voicemail

iOS accessibility features (2)

Photo credit: © Apple

9

New in iOS 7:Switch ControlHandwriting supportMore enhancements:Dynamic TypeLarger cursorsCustomisable styles for captions and subtitlesMore interface customisationsGuided Access improvementsBraille support improvements

iOS 7 Accessibility videos by Luis Perez on YouTube

iOS accessibility features (3)

10

TalkBackBundled since version 4.0 (Ice Cream Sandwich)Explore by touch only on Ice Cream SandwichJelly Bean behaves a lot like iOSDownload for version 2.2+

Zoom (system wide)Pinch zoomVoice inputHaptic feedbackLarge text

Note: Available features depends on devicevendor.

Android accessibility features

11

Demo

12

1. Triple click the Home key to

activate

2. Dial to open the Rotor

3. Swipe up/down to navigate

parts

4. Swipe right/left for

next/previous content

Demo: iOS

13

1. Triple click the Home key toactivate

2. Dial to open the Rotor3. Swipe up/down to navigateparts

4. Swipe right/left fornext/previous content

Demo: iOS (2)

14

1. Triple click the Home key toactivate

2. Dial to open the Rotor3. Swipe up/down to navigate

parts4. Swipe right/left fornext/previous content

Demo: iOS (3)

15

Who?

16

Empathy

17

Small screeniPhone is 1/12 of a typical desktop screen40-­pixel finger is big on small targetsCan be hard to reach some parts of the screen

Small text sizesis like having low vision

Small input devicesEyes-­freeis like being blind, e.g. in car

Mobile is disabling for us all

18

Shared experiences, comparable to temporarydisability:in the car (blind)at concerts (hard of hearing)small text (low vision)“fat fingers” (hand tremors)broken bones (crutches)

http://www.w3.org/WAI/mobile/experiences

Shared experiences

19

W3C Specifications &Resources

20

Open Web Platform

21

Technologies and resources:Accessibility support in core web technologies

(HTML5);;

Accessibility extensions if needed (WAI-­ARIA &

IndieUI);;

Accessibility guidelines for policies (WCAG, ATAG,

UAAG);;

Implementation guidance for the developers

(techniques);;

Additional guidance, introductory resources, etc.

Making it happen

22

The Open Web Platform:

HTML5, CSS3, DOM, SVG, MathML, and many more;;Web APIs such as Geolocation, Media Capture, ...;;

HTML Accessibility Task Force

Accessibility Support

23

Accessible Rich Internet Applications (WAI-­ARIA):Provides additional markup, especially for dynamiccontent;;http://www.w3.org/WAI/intro/aria

Independent User Interface (IndieUI):Defines ways for communicating user actions toapplications;;http://www.w3.org/WAI/intro/indieui

Accessibility Extensions

24

Web Content Accessibility Guidelines(WCAG) 2.0:Defines accessible web content, regardless of device;;Addresses many shared experiences with mobile webusers;;

User Agent Accessibility Guidelines (UAAG)2.0:Defines accessible user agents, including some"apps";;Guidance includes several Mobile AccessibilityExamples;;

Accessibility Guidelines

25

Techniques for WCAG 2.0:Increased development of techniques, especially for

HTML5;;

HTML 5 Techniques for WCAG 2.0 Task Force

Mobile Accessibility Task Force:Improving guidance throughout WCAG 2.0 and

UAAG 2.0;;

Mobile Accessibility Task Force (Mobile A11Y TF)

Implementation Guidance

26

Extending support for mobile accessibility:In the core W3C specifications of the Open Web

Platform;;

Accessibility extensions such as WAI-­ARIA and

IndieUI;;

Guidance and explanations for WCAG 2.0 and UAAG

2.0;;

Implementation guidance for web developers

(techniques);;

Stay up-­to-­date: W3C/WAI on Mobile Accessibility

Looking Ahead

27

Strategy

28

Recap:

iOS accessibility features and API are more mature

Android devices have some good accessibility

features and Google are working to improve

Current market share favours iOS and Android

devices over other vendors

Available features on Android depends on device

vendor — implementation stays the same

Strategy

29

Use site statistics from your own site to assessmobile OS and browser usage of your audienceAssess your existing mobile support strategyWhich devices in your strategy have accessibility support?

Support most popular devices on the marketNot all have good support for accessibility at the moment

HTML5accessibility.comcaniuse.com (can filter for mobile browsers)

Monitor upcoming releasesiOS Accessibility on apple.comAndroid Accessibility (eyes-­free) — Note: currently not up to date

Monitor current user preferencesWebAIM’s screen reader user surveys are useful here

Strategy — device support

30

Be aware of the laws governing accessibility in

your country.

Equality Act

Introduced in October 2010

Replaces Disability Discrimination Act (DDA)

Americans with Disabilities Act

No specific published technical requirements

In essence, conform to WCAG 2.0 A and AA requirements

Section 508 of the US Rehabilitation Act

Governs US Federal Agencies

“information and communication technology” must be WCAG

2.0 compliant

21st Century Act

Says by 2013 phones must ship with accessible browsers

No defence for inaccessible content when handsets and

browsers are accessible

Strategy — legal requirements

31

Existing policies

Informed by Corporate Social Responsibility

Equalities

Style guidelines

New policy

Organisational

Product

Accessibility Statement

BS 8878

British Standard

Web Accessibility Code of Practice

Strategy — policy

32

Make a test strategy

Henny Swan has developed a great starting point:

http://www.iheni.com/mobile-­accessibility-­tests/

Easiest way to test is with speech output only

Also, keep in mind:

Zoom only

Zoom with speech output also

Invert colors

Strategy — testing

33

Implementation

34

The basics are the same as on desktop:Alternatives: images, audio, videoLabelling: form controls, headings, buttonsGood structure: landmarks, lists, heading levelsUse native controls where possibleContent order

Remember:Think BIG! Big elements are better than smallerones.Don’t add roles or states to label textLocalise

Implementation — basics

35

iOSMost of the way there with UIKit (a11y for free!), labels andtraitsAccessibility Programming Guide for iOS

Guidelines for creating useful Labels and HintsIdentifying appropriate Traits

AndroidMost of the way there with setting contentDescriptionrole and state = built-­in controls

ButtonText fieldCheckbox, e.g. setChecked(boolean)Radio buttonToggle buttonSpinnerPickers

Android Developers Accessibility Guide

Implementation — iOS & Android

36

BBC Mobile Accessibility Guidelines

Essentially, a testing and techniques document

Working on more techniques

Others guidelines include:

Mobile Accessibility Guidelines by Funka Nu

Accessibility Programming Guide for iOS

Android Developers Accessibility Guide

Nokia user experience for touch checklist (PDF)

Nokia user experience checklist for keyboard (PDF)

Design Guidelines for Windows Mobile

Widget Accessibility Guidelines

Implementation — guidance

37

Questions

38

Jon GibbinsMobile Accessibility Specialist and

Technical Director, DIG Inclusion

07968 108899

jon@diginclusion.com

www.diginclusion.com

web • mobile • PDF • Easy Read

Shadi Abou-ZahraActivity Lead,

W3C/WAI Program Office

+43.1.967.94.98

shadi@w3.org

www.w3.org/People/shadi/

Thank you

© Jon Gibbins and Shadi Abou-­Zahra 2013