Introduction to

Mobile accessibilityDigpen 725 Sep 2014

IntroductionJon Gibbins

ndash Accessibility consultant at Dig Inclusionndash Web developer since 2003 ndash or 1999ndash Assistive technology since 2002ndash Training since 2012ndash Passionate about accessibility ndash why

2

3

Photo creditLG GD910 watch phone

4

Jon Gibbins Drake Music

5

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

IntroductionJon Gibbins

ndash Accessibility consultant at Dig Inclusionndash Web developer since 2003 ndash or 1999ndash Assistive technology since 2002ndash Training since 2012ndash Passionate about accessibility ndash why

2

3

Photo creditLG GD910 watch phone

4

Jon Gibbins Drake Music

5

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

3

Photo creditLG GD910 watch phone

4

Jon Gibbins Drake Music

5

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

Photo creditLG GD910 watch phone

4

Jon Gibbins Drake Music

5

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

Jon Gibbins Drake Music

5

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

IntroductionWhat we will learnbull How people with disabilities use

mobile devicesbull Barriers typically faced by users

with disabilitiesbull Mobile accessibility principles

6

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

bull This session will focus on iOS and Androidndash Current market share favours iOS and Android devicesndash iOS accessibility features and API is most developedndash Android have some good accessibility features and are

improving all the timebull Demonstrations

ndash Mostly using VoiceOver on iOS and Mobile Safarindash Android features will also be demonstrated with web

features shown using Chrome or Firefox nightly

7

Introduction

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

Introductionbull Questions are encouraged

ndash Nobody knows your work like you know your workndash If you have a question or want to know more

please put your hand upbull Links

ndash Web accessibility training resourcesndash WebAIM screen reader survey (Jan 2014)

8

Ensuring that anyone can use your websites and applications to find information buy stuff play games watch videohellip

Making a website or application more accessible to people with disabilities

9

Accessibility

People with disabilities can perform the same functionshellip

receive same informationhellip

and participate as producers and consumers

Accessible

Mobilebull ldquoMobilerdquo is not just about phones

ndash Tablets games consoles TVs etcndash More users cheaper technology reduces Digital

Dividebull Mobile Web

ndash Sites and applications built for viewing on mobile browsers

ndash Note Feature gap to native apps is narrowing due to standards such as HTML5 and ARIA

11

Mobile accessibilitybull Making a website or application more accessible

to people with disabilities using mobile devicesbull The basics are the same as on desktop

ndash Alternatives images audio videondash Labeling form controls headings buttonsndash Good structure landmarks lists heading levelsndash Use native controls where possiblendash Content order

12

Whybull Mobile devices are the cheapest

way for people to get onlinebull Innovative assistive technologies

are available for free with operating systems such as iOS and Android

13

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

People with disabilities can perform the same functionshellip

receive same informationhellip

and participate as producers and consumers

Accessible

Mobilebull ldquoMobilerdquo is not just about phones

ndash Tablets games consoles TVs etcndash More users cheaper technology reduces Digital

Dividebull Mobile Web

ndash Sites and applications built for viewing on mobile browsers

ndash Note Feature gap to native apps is narrowing due to standards such as HTML5 and ARIA

11

Mobile accessibilitybull Making a website or application more accessible

to people with disabilities using mobile devicesbull The basics are the same as on desktop

ndash Alternatives images audio videondash Labeling form controls headings buttonsndash Good structure landmarks lists heading levelsndash Use native controls where possiblendash Content order

12

Whybull Mobile devices are the cheapest

way for people to get onlinebull Innovative assistive technologies

are available for free with operating systems such as iOS and Android

13

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Mobilebull ldquoMobilerdquo is not just about phones

ndash Tablets games consoles TVs etcndash More users cheaper technology reduces Digital

Dividebull Mobile Web

ndash Sites and applications built for viewing on mobile browsers

ndash Note Feature gap to native apps is narrowing due to standards such as HTML5 and ARIA

11

Mobile accessibilitybull Making a website or application more accessible

to people with disabilities using mobile devicesbull The basics are the same as on desktop

ndash Alternatives images audio videondash Labeling form controls headings buttonsndash Good structure landmarks lists heading levelsndash Use native controls where possiblendash Content order

12

Whybull Mobile devices are the cheapest

way for people to get onlinebull Innovative assistive technologies

are available for free with operating systems such as iOS and Android

13

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Mobile accessibilitybull Making a website or application more accessible

to people with disabilities using mobile devicesbull The basics are the same as on desktop

ndash Alternatives images audio videondash Labeling form controls headings buttonsndash Good structure landmarks lists heading levelsndash Use native controls where possiblendash Content order

12

Whybull Mobile devices are the cheapest

way for people to get onlinebull Innovative assistive technologies

are available for free with operating systems such as iOS and Android

13

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Whybull Mobile devices are the cheapest

way for people to get onlinebull Innovative assistive technologies

are available for free with operating systems such as iOS and Android

13

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Whobull Four main user groups with diverse

needsndash Vision (blind partially sighted)ndash Hearing (deaf hard of hearing)ndash Mobilityndash Cognitive and learning

14

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Whobull Hidden disabilities

ndash Chronic fatiguendash Photo sensitivityndash Mental health

bull Agingndash Spans various disabilities and user groupsndash Often first-time usersndash Note Older people like young children find primary solid

colour easier to see and draw meaning from than pastel colours etc

15

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Whobull Temporary

ndash Broken wristndash Repetitive strain injuryndash Tiredness

bull Culturalndash Languagendash Colour and iconography

bull Technologyndash Particular software and hardware requirements or preferences (

mobileaccessibilityinfo Device Details)ndash Connectivity data limitations etc

16

Howbull Assistive technology users

ndash Speech output (screen readers)ndash Braille outputndash Voice inputndash Magnification

17

Howbull Access services

ndash Captionsndash Subtitlesndash Audio descriptionndash Sign language interpretation

18

Quick screen reader demo

19

Shared web experiences on mobile devicesbull Common ground between mainstream users and

users with disabilitiesndash Comparable to temporary disability (in the car at

concerts walking)ndash httpwwww3orgWAImobileexperiences

Who

20

Howbull Access services

ndash Captionsndash Subtitlesndash Audio descriptionndash Sign language interpretation

18

Quick screen reader demo

19

Shared web experiences on mobile devicesbull Common ground between mainstream users and

users with disabilitiesndash Comparable to temporary disability (in the car at

concerts walking)ndash httpwwww3orgWAImobileexperiences

Who

20

Quick screen reader demo

19

Shared web experiences on mobile devicesbull Common ground between mainstream users and

users with disabilitiesndash Comparable to temporary disability (in the car at

concerts walking)ndash httpwwww3orgWAImobileexperiences

Who

20

Shared web experiences on mobile devicesbull Common ground between mainstream users and

users with disabilitiesndash Comparable to temporary disability (in the car at

concerts walking)ndash httpwwww3orgWAImobileexperiences

Who

20

Shared web experiences on mobile devicesbull Empathy

ndash Accessibility is about understanding people and the barriers that they face

ndash Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications

Who

21

Shared web experiences on mobile devicesbull Innovation

ndash Assistive technology that are useful to all usersndash For example Siri or custom vibrations on iOS

Who

22

Constraints of mobile

23

Mobile by definition is disabling for allhellipbull Small screen

ndash iPhone is 112 of a typical desktop screenndash 40-pixel finger is big on small targetsndash Can be hard to reach some parts of the screen

bull Small text sizes ndash like having low visionbull Small input devicesbull Eyes-free ndash like being blind eg in car

Constraints of mobile

24

Mobile by definition is disabling for allhellipbull Reliant on touchbull Not as usable in the rainbull Need for special glovesbull One-handed usagebull Low lightbull Connectivity data limitation

Capabilities of mobile

25

bull Better integrated accessibility than desktopbull Location and directionbull Camera and augmented realitybull Accelerometer (tiltorientation movement speed)bull Touch screenbull Proximity (NFC)bull Environmental awareness (lightdark conditions)

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Shared web experiences on mobile devicesbull Innovation

ndash Assistive technology that are useful to all usersndash For example Siri or custom vibrations on iOS

Who

22

Constraints of mobile

23

Mobile by definition is disabling for allhellipbull Small screen

ndash iPhone is 112 of a typical desktop screenndash 40-pixel finger is big on small targetsndash Can be hard to reach some parts of the screen

bull Small text sizes ndash like having low visionbull Small input devicesbull Eyes-free ndash like being blind eg in car

Constraints of mobile

24

Mobile by definition is disabling for allhellipbull Reliant on touchbull Not as usable in the rainbull Need for special glovesbull One-handed usagebull Low lightbull Connectivity data limitation

Capabilities of mobile

25

bull Better integrated accessibility than desktopbull Location and directionbull Camera and augmented realitybull Accelerometer (tiltorientation movement speed)bull Touch screenbull Proximity (NFC)bull Environmental awareness (lightdark conditions)

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Constraints of mobile

23

Mobile by definition is disabling for allhellipbull Small screen

ndash iPhone is 112 of a typical desktop screenndash 40-pixel finger is big on small targetsndash Can be hard to reach some parts of the screen

bull Small text sizes ndash like having low visionbull Small input devicesbull Eyes-free ndash like being blind eg in car

Constraints of mobile

24

Mobile by definition is disabling for allhellipbull Reliant on touchbull Not as usable in the rainbull Need for special glovesbull One-handed usagebull Low lightbull Connectivity data limitation

Capabilities of mobile

25

bull Better integrated accessibility than desktopbull Location and directionbull Camera and augmented realitybull Accelerometer (tiltorientation movement speed)bull Touch screenbull Proximity (NFC)bull Environmental awareness (lightdark conditions)

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Constraints of mobile

24

Mobile by definition is disabling for allhellipbull Reliant on touchbull Not as usable in the rainbull Need for special glovesbull One-handed usagebull Low lightbull Connectivity data limitation

Capabilities of mobile

25

bull Better integrated accessibility than desktopbull Location and directionbull Camera and augmented realitybull Accelerometer (tiltorientation movement speed)bull Touch screenbull Proximity (NFC)bull Environmental awareness (lightdark conditions)

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Capabilities of mobile

25

bull Better integrated accessibility than desktopbull Location and directionbull Camera and augmented realitybull Accelerometer (tiltorientation movement speed)bull Touch screenbull Proximity (NFC)bull Environmental awareness (lightdark conditions)

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Capabilities of mobile

26

bull FaceTime used by deaf peoplebull Custom vibrations as ringtone

equivalentsbull Speeches given using iPad with

Proloquobull HueVue app that helps colour blind

people to identify colours

Capabilities of mobile

27

bull Braillendash V-B-Reader app (Android) that enables Braille to be read

using vibrating touch screensndash Touch-screen Braille writer

bull Innovative assistive technology thatrsquos useful to all usersndash Applersquos Siri voice recognitionndash Google Voicersquos voicemail transcriptionndash Custom vibrations (iPhone setting and Android app)

HowTwo main interaction methods1 Explore by touch

ndash Drag finger over screenndash Items under your finger are

described by screen readerndash Tap with a second finger or

double tap to openactivate

2 Gesture navigation

HowTwo main interaction methods1 Explore by touch2 Gesture navigation

ndash Swipe rightleft moves focus to nextprevious content in sequence

ndash Items are described by screen reader as focus moves

ndash Double tap to openactivate

iOS Accessibility Features

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor

3 Swipe updown to navigate parts

4 Swipe rightleft for nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

HowTwo main interaction methods1 Explore by touch2 Gesture navigation

ndash Swipe rightleft moves focus to nextprevious content in sequence

ndash Items are described by screen reader as focus moves

ndash Double tap to openactivate

iOS Accessibility Features

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor

3 Swipe updown to navigate parts

4 Swipe rightleft for nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

iOS Accessibility Features

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor

3 Swipe updown to navigate parts

4 Swipe rightleft for nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor

3 Swipe updown to navigate parts

4 Swipe rightleft for nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor

3 Swipe updown to navigate parts

4 Swipe rightleft for nextprevious content

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

iOS Accessibility FeaturesVoiceOver

1 Triple click the Home key to activate

2 Dial to open the Rotor3 Swipe updown to

navigate parts4 Swipe rightleft for

nextprevious content

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

bull These mostly ldquojust workrdquo but must test in combination ndash eg VoiceOver running with Zoom may experience focus issues

bull Pinch zoombull Zoom (system-wide)

ndash Three-finger gestures for zoom controlmovement

ndash Zoom up to 5x

bull Large Text Dynamic Type

iOS Accessibility FeaturesOther accessibility features

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

bull LED Flashbull Mono audio and balance

controlbull Hearing aid supportbull TTY (used by the Deaf)bull iMessagebull Visual Voicemail

iOS Accessibility FeaturesOther accessibility features (2)

35

bull Invert Colors Black on White

bull Assistive Touch

bull Captioned content (QuickTime)

bull Guided Access

bull Speak selection

bull Custom vibrations

Android Accessibility Features

bull TalkBackndash Bundled since version 40 (Ice Cream Sandwich)ndash Since Jelly Bean it behaves a lot like iOSndash Eyes-Free Keyboard

bull Download as necessary for accessing web views

bull Haptic feedbackbull Large textbull Zoombull TalkBack on Jelly Bean (9 mins 47 secs)

ndash httpyoutubew3Sz3KNkQ4U

Android Accessibility Features

bull TalkBackndash Bundled since version 40 (Ice Cream Sandwich)ndash Since Jelly Bean it behaves a lot like iOSndash Eyes-Free Keyboard

bull Download as necessary for accessing web views

bull Haptic feedbackbull Large textbull Zoombull TalkBack on Jelly Bean (9 mins 47 secs)

ndash httpyoutubew3Sz3KNkQ4U

Android Accessibility Features

TalkBack1 Install Eyes-Free keyboard

2 Enable TalkBack via settings

3 Explore screen by touch

4 Single tap to activate

Android Accessibility Features

Browsers with good accessibility supportbull Native (WebKit)

ndash being replaced by Chrome as default browserbull Chrome

ndash requires Ice Cream Sandwichbull Firefox Nightly

ndash looks set to provide the best accessibility supportbull Ideal Web Reader

Android Accessibility Features

Standards and guidelines

The problembull There is no one set of internationally accepted mobile

guidelines and standardsbull WCAG was written for desktopbull Mobile is more diverse than desktop and is developing

quickly ndash more browsers OSs hardware softwarebull We fall back on WCAG 20 which provides a sound

foundation but is only the start of the story

41

Standards and guidelines

bull BBC Mobile Accessibility Guidelinesndash The best reference we have to datendash Technology-agnostic standards and guidelinesndash Technology specific techniques ndash HTML Android

iOSndash Getting to grips with a mobile accessibility strate

gy

bull Resources for Mobile Accessibility Guidelines42

Standards and guidelines

Browsers with good accessibility supportbull Native (WebKit)

ndash being replaced by Chrome as default browserbull Chrome

ndash requires Ice Cream Sandwichbull Firefox Nightly

ndash looks set to provide the best accessibility supportbull Ideal Web Reader

Android Accessibility Features

Standards and guidelines

The problembull There is no one set of internationally accepted mobile

guidelines and standardsbull WCAG was written for desktopbull Mobile is more diverse than desktop and is developing

quickly ndash more browsers OSs hardware softwarebull We fall back on WCAG 20 which provides a sound

foundation but is only the start of the story

41

Standards and guidelines

bull BBC Mobile Accessibility Guidelinesndash The best reference we have to datendash Technology-agnostic standards and guidelinesndash Technology specific techniques ndash HTML Android

iOSndash Getting to grips with a mobile accessibility strate

gy

bull Resources for Mobile Accessibility Guidelines42

Standards and guidelines

Standards and guidelines

The problembull There is no one set of internationally accepted mobile

guidelines and standardsbull WCAG was written for desktopbull Mobile is more diverse than desktop and is developing

quickly ndash more browsers OSs hardware softwarebull We fall back on WCAG 20 which provides a sound

foundation but is only the start of the story

41

Standards and guidelines

bull BBC Mobile Accessibility Guidelinesndash The best reference we have to datendash Technology-agnostic standards and guidelinesndash Technology specific techniques ndash HTML Android

iOSndash Getting to grips with a mobile accessibility strate

gy

bull Resources for Mobile Accessibility Guidelines42

Standards and guidelines

The problembull There is no one set of internationally accepted mobile

guidelines and standardsbull WCAG was written for desktopbull Mobile is more diverse than desktop and is developing

quickly ndash more browsers OSs hardware softwarebull We fall back on WCAG 20 which provides a sound

foundation but is only the start of the story

41

Standards and guidelines

bull BBC Mobile Accessibility Guidelinesndash The best reference we have to datendash Technology-agnostic standards and guidelinesndash Technology specific techniques ndash HTML Android

iOSndash Getting to grips with a mobile accessibility strate

gy

bull Resources for Mobile Accessibility Guidelines42

Standards and guidelines

bull BBC Mobile Accessibility Guidelinesndash The best reference we have to datendash Technology-agnostic standards and guidelinesndash Technology specific techniques ndash HTML Android

iOSndash Getting to grips with a mobile accessibility strate

gy

bull Resources for Mobile Accessibility Guidelines42

Standards and guidelines

bull Web Accessibility Initiative resources (now fairly dated)ndash Mobile Web Best Practices (MWBP) 10 (last updated mid-

2008)ndash Web Content Accessibility Guidelines (WCAG) 20ndash Relationship between MWBP and WCAG

bull Mobile Accessibility Guidelines by Funka Nundash Released in March 2012 these are more up to date

bull Nielsen Norman Group have a useful reportUsability of iPad Apps and Websites

43

Standards and guidelines

Device-specific guidelines and standardsbull iOS Accessibility Programming Guidebull Android Designing for Accessibilitybull Android Developers Accessibility Guidebull Nokia user experience for touch checklist (PDF)bull Nokia user experience checklist for keyboard (PDF)bull Design Guidelines for Windows Mobilebull Widget Accessibility Guidelines

44

Standards and guidelines

bull Be aware of the laws governing accessibility in your country

bull Section 508ndash US Federal Government websitesndash lsquoinformation and communication technologyrsquo must be WCAG

20 compliantbull 21st Century Act says by 2013 phones must ship with

accessible browsersndash No defense for inaccessible content when handsets and

browsers are accessible

45

Legal requirements

General principles

bull We know what assistive technology is but how does it work

bull Accessibility APIsndash Present user interfaces as information rather than a purely

graphical medium translating an applicationrsquos user interface into information that assistive technology can understand

ndash Allow an applicationrsquos user interface to be changed by the assistive technology

ndash Provide a common vocabulary we can use when talking about accessibility

47

Theory accessibility APIs

bull Accessible Object Propertiesndash User interface is represented as a hierarchy of accessible

objectsndash Each object has a variety of properties such as

bull name Defines a label (ldquoHi whatrsquos your name)bull role Defines the behavior (ldquoSo what do you dordquo)bull state Defines the current condition (ldquoHow are yourdquo)

bull Accessible Eventsndash Accessibility APIs notify assistive technologies of changes by

broadcasting events

48

Theory accessibility APIs

The Mobile Web

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

General principles

bull We know what assistive technology is but how does it work

bull Accessibility APIsndash Present user interfaces as information rather than a purely

graphical medium translating an applicationrsquos user interface into information that assistive technology can understand

ndash Allow an applicationrsquos user interface to be changed by the assistive technology

ndash Provide a common vocabulary we can use when talking about accessibility

47

Theory accessibility APIs

bull Accessible Object Propertiesndash User interface is represented as a hierarchy of accessible

objectsndash Each object has a variety of properties such as

bull name Defines a label (ldquoHi whatrsquos your name)bull role Defines the behavior (ldquoSo what do you dordquo)bull state Defines the current condition (ldquoHow are yourdquo)

bull Accessible Eventsndash Accessibility APIs notify assistive technologies of changes by

broadcasting events

48

Theory accessibility APIs

The Mobile Web

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull We know what assistive technology is but how does it work

bull Accessibility APIsndash Present user interfaces as information rather than a purely

graphical medium translating an applicationrsquos user interface into information that assistive technology can understand

ndash Allow an applicationrsquos user interface to be changed by the assistive technology

ndash Provide a common vocabulary we can use when talking about accessibility

47

Theory accessibility APIs

bull Accessible Object Propertiesndash User interface is represented as a hierarchy of accessible

objectsndash Each object has a variety of properties such as

bull name Defines a label (ldquoHi whatrsquos your name)bull role Defines the behavior (ldquoSo what do you dordquo)bull state Defines the current condition (ldquoHow are yourdquo)

bull Accessible Eventsndash Accessibility APIs notify assistive technologies of changes by

broadcasting events

48

Theory accessibility APIs

The Mobile Web

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Accessible Object Propertiesndash User interface is represented as a hierarchy of accessible

objectsndash Each object has a variety of properties such as

bull name Defines a label (ldquoHi whatrsquos your name)bull role Defines the behavior (ldquoSo what do you dordquo)bull state Defines the current condition (ldquoHow are yourdquo)

bull Accessible Eventsndash Accessibility APIs notify assistive technologies of changes by

broadcasting events

48

Theory accessibility APIs

The Mobile Web

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

The Mobile Web

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

The Mobile WebPrinciples of mobile accessibility

bull Use progressive enhancementbull Use web standards as intendedbull Support platform accessibility settings and

assistive technology ndash HTML5 input types and contextual keyboards eg

number email datendash Support for ARIA is good on Mobile Safari and Chrome

and Firefox for Androidndash iOSAndroid do not identify the type of landmark roles

50

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Forms

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

FormsTypical barriers of accessbull Missing labels

ndash Voice output and sighted users donrsquot know what to input

bull Lack of input typesndash Users forced to use free input likely to make mistakes

bull Error handlingndash Lack of help prevents forms being submitted

52

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Label form inputsbull HTML label element is best

ltlabel for=first-namegtFirst Nameltlabelgt

bull WAI-ARIA aria-labelndash only works when there is no HTML label

bull HTML title attributeltinput id=name name=name type=text value= title=Your namegt

ndash But not accessible to sighted users

Forms

53

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Group related form elementsbull Group related elements using ltfieldsetgt

bull Caption the related elements using ltlegendgt

Forms

54

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Formsltfieldsetgtltlegendgtfilter byltlegendgtltinput type=radio name=filter id=agtltlabel for=agttelevisionltlabelgtltinput type=radio name=filter id=bgtltlabel for=bgtradioltlabelgtltinput type=radio name=filter id=cgtltlabel for=cgtcinemaltlabelgtltfieldsetgt

Browser output

55

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Formsbull Voice outputldquoFilter by radio button television radio button radio radio button cinemardquoOrldquoFilter by radio button television Filter by radio button radio Filter by radio button cinemardquo

56

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Replace free input with drop downs radio buttons etc

bull Use HTML5 input typesndash Supported in Mobile Safari and Webkit (Android) ndash Contextual keyboards in iOSndash Previous Nexthellip

Forms

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Use colour to reinforce meaning not alonendash Avoid lsquoAll fields marked in red are

requiredrsquondash Inaccessible to blind colour blind usersndash Colour output may also vary across

devices

Forms

58

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Consider inline validation (when appropriate)

bull Draw focus to errorbull Donrsquot rely on colour alonebull Make message clearbull Suggest how to correctbull Provide ease of navigation away from error

Forms

59

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Use programmatically readable instructionsndash Add lsquorequiredrsquo to the ltlabelgt

ltlabel for=namegtYour Name (required) ltlabelgt

ndash Progressively enhance withltinput type=text requiredgt (iOS 5+)

Note Using both techniques does not result in lsquorequiredrsquo being announced twice

Error handling

60

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Users with visual physical or cognitive disabilities may need more time to read and interact with pages

bull Choose one of the following recommendationsndash Allow users to turn off the time limitndash Allow users to adjust the time limit (allow a range of

options and at least ten times the default)ndash Allow users to extend the time limit (show a warning

before timeout give at least 20 seconds to easily extend time eg by pressing the space bar)

Session timeouts

61

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

bull Screen reader focus is not the same as keyboard focus on desktop

bull Set focus in a web viewvar button = documentgetElementsByTagName(button)[0]buttonfocus()

bull Set focus using tabindex=0

Focus management

62

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

SpeechControl speech verbositybull VoiceOver announces lsquo12345rsquo as lsquoTwelve

thousand three hundred and forty-fiversquobull Announce lsquoOne two three four fiversquo using address speak digitsbull VoiceOver announces lsquo1 = 2rsquo as lsquoOne equals

tworsquo code speak literal-punctuation

63

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

WAI-ARIA

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

ltdiv tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

65

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

ltdiv role=button aria-label=Refresh tabindex=0 act=20 class=T-I J-J5-Ji nu T-I-ax7 L3 style=-moz-user-select none data-tooltip=Refreshgt

ltdiv class=asagtltspan class=J-J5-Ji askgtampnbspltspangtltdiv class=asf T-I-J3 J-J5-Jigtltdivgt

ltdivgtltdivgt

ARIA

66

ldquoRefresh buttonrdquo

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

lta href=gtFavoriteltagt

ARIA

67

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

lta href=gtFavoriteltagt

ARIA

68

ldquoFavorite linkrdquoldquoClick the Favorite button to favorite a postrdquo would not be correct for assistive technology users

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

lta role=button href=gtFavoriteltagt

ARIA

69

ldquoFavorite buttonrdquoFixed semantics

Buthellip using a button element would be even better and would provide expected behaviours for free

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Mobile support for WAI-ARIA

ARIA

Source httpcaniusecomfeat=wai-aria 70

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Structure and layout

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Structure and layoutTypical barriers of accessbull Headings and Landmarks not marked up

ndash Voice output users canrsquot navigate bull Landmarks are not labeled

ndash Voice output users donrsquot know where they are in a page

bull Content order is incorrectndash Flow of content is illogical

72

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Structure and layoutbull Responsive Design

ndash Screens of 320-pixel width are typical but not guaranteedndash Test only the elements that change at each of the supported

screen resolutionsndash Remember to test both landscape and portrait

bull Guidelinesndash httpcodingsmashingmagazinecom20110112guidelines-f

or-responsive-web-design

bull Resource Responsive Web Design by Ethan Marcottendash httpwwwabookapartcomproductsresponsive-web-design

73

Structure and layoutbull Use semantic and

structured mark-upndash Headingsndash ARIA landmarksndash Listsndash Data tables

bull HTML5 structural elements not yet well supported

74

bull New HTML5 control types are well supported on iOS (5+) and Android (Chrome and Firefox)ndash type=date

bull type=monthbull type=timerdquo hellip

ndash type=emailndash type=rangendash type=telndash type=urlndash And morehellip

Structure and layout

75

bull Landmarks describe parts of the page (eg main search navigation)

bull iOS and Android do not currently distinguish between types of landmarkndash Next item of content is read with the landmark instead

for examplerole=mainhelliplth1gtMobile accessibilitylth1gthellipVoiceOver announcesrdquoLandmark Mobile accessibility heading level 1rdquo

Structure and layoutLandmarks

76

bull Ensure a logical content orderndash An H1 follows role=mainndash Main content follows an H1ndash An H234 follows role=complementaryndash An H234 follows role=navigationndash Duplicated links grouped in one lta hrefgt

Structure and layoutContent order

77

bull Logical order is generally left to right top to bottom

bull Sometimes poor code choices cause strange focus order

bull Generally best to let the order of elements in the source code determine the focus order

78

Structure and layoutContent order

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

bull New HTML5 control types are well supported on iOS (5+) and Android (Chrome and Firefox)ndash type=date

bull type=monthbull type=timerdquo hellip

ndash type=emailndash type=rangendash type=telndash type=urlndash And morehellip

Structure and layout

75

bull Landmarks describe parts of the page (eg main search navigation)

bull iOS and Android do not currently distinguish between types of landmarkndash Next item of content is read with the landmark instead

for examplerole=mainhelliplth1gtMobile accessibilitylth1gthellipVoiceOver announcesrdquoLandmark Mobile accessibility heading level 1rdquo

Structure and layoutLandmarks

76

bull Ensure a logical content orderndash An H1 follows role=mainndash Main content follows an H1ndash An H234 follows role=complementaryndash An H234 follows role=navigationndash Duplicated links grouped in one lta hrefgt

Structure and layoutContent order

77

bull Logical order is generally left to right top to bottom

bull Sometimes poor code choices cause strange focus order

bull Generally best to let the order of elements in the source code determine the focus order

78

Structure and layoutContent order

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

bull Landmarks describe parts of the page (eg main search navigation)

bull iOS and Android do not currently distinguish between types of landmarkndash Next item of content is read with the landmark instead

for examplerole=mainhelliplth1gtMobile accessibilitylth1gthellipVoiceOver announcesrdquoLandmark Mobile accessibility heading level 1rdquo

Structure and layoutLandmarks

76

bull Ensure a logical content orderndash An H1 follows role=mainndash Main content follows an H1ndash An H234 follows role=complementaryndash An H234 follows role=navigationndash Duplicated links grouped in one lta hrefgt

Structure and layoutContent order

77

bull Logical order is generally left to right top to bottom

bull Sometimes poor code choices cause strange focus order

bull Generally best to let the order of elements in the source code determine the focus order

78

Structure and layoutContent order

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

bull Ensure a logical content orderndash An H1 follows role=mainndash Main content follows an H1ndash An H234 follows role=complementaryndash An H234 follows role=navigationndash Duplicated links grouped in one lta hrefgt

Structure and layoutContent order

77

bull Logical order is generally left to right top to bottom

bull Sometimes poor code choices cause strange focus order

bull Generally best to let the order of elements in the source code determine the focus order

78

Structure and layoutContent order

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

bull Logical order is generally left to right top to bottom

bull Sometimes poor code choices cause strange focus order

bull Generally best to let the order of elements in the source code determine the focus order

78

Structure and layoutContent order

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

Testing

79

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

Top 5 tests1 Browse the site with a screen reader

2 Check markup and structure

3 Interact with all forms

4 Tabgesture through the page

5 Images have appropriate text alternatives

80

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

Top 5 tests1 Browse the site with a screen reader

ndash Tests the user experience

ndash Can pick up many issues in one go

81

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

Top 5 tests2 Check markup and structure

ndash Quick check W3C Nu Markup Validator

ndash Appropriate markup structures and semantics

82

Top 5 tests3 Interact with all forms

ndash Are they clearly labelled and include instructions

ndash Check error messages are clear and easy to find

83

Top 5 tests4 Tabgesture through the page

84

Top 5 tests5 Images have appropriate text

alternativesndash Use the alt text decision tree

85

Top 5 tests4 Tabgesture through the page

84

Top 5 tests5 Images have appropriate text

alternativesndash Use the alt text decision tree

85

Top 5 tests5 Images have appropriate text

alternativesndash Use the alt text decision tree

85

Top 5 testsbull Missing

ndash Pages and frames are titled

ndash Link text is appropriate to target (covered by tabbing through)

ndash Headings exist and are appropriate

ndash Navigation is consistent

ndash Alternative means of locating pages is provided

ndash Repetitive navigation can be skipped

86

Top 5 testsbull Missing

ndash Non-HTML content is accessible (PDF Flash etc)

ndash All visible content is conveyed to assistive technologies

ndash Hidden content is not conveyed to assistive technologies

ndash Appropriate colour contrast

ndash Colour is not used as the only means of conveying information

ndash Animated content can be paused stopped or hidden

87

Top 5 testsbull Missing

ndash Accessible alternatives for audio and video content

ndash Language

ndash Role and state information

ndash Animated content must not cause seizures

ndash Users are allowed enough time

ndash Content can be resized

88

bull Make a test strategyndash Henny Swan has developed a great starting point

bull httpwwwihenicommobile-accessibility-testsndash Test with

bull Both zoom and speech output features offbull Speech output onlybull Zoom onlybull Both zoom and speech output features onbull Inverted colours

89

Testing

Top 5 testsbull Missing

ndash Non-HTML content is accessible (PDF Flash etc)

ndash All visible content is conveyed to assistive technologies

ndash Hidden content is not conveyed to assistive technologies

ndash Appropriate colour contrast

ndash Colour is not used as the only means of conveying information

ndash Animated content can be paused stopped or hidden

87

Top 5 testsbull Missing

ndash Accessible alternatives for audio and video content

ndash Language

ndash Role and state information

ndash Animated content must not cause seizures

ndash Users are allowed enough time

ndash Content can be resized

88

bull Make a test strategyndash Henny Swan has developed a great starting point

bull httpwwwihenicommobile-accessibility-testsndash Test with

bull Both zoom and speech output features offbull Speech output onlybull Zoom onlybull Both zoom and speech output features onbull Inverted colours

89

Testing

Top 5 testsbull Missing

ndash Accessible alternatives for audio and video content

ndash Language

ndash Role and state information

ndash Animated content must not cause seizures

ndash Users are allowed enough time

ndash Content can be resized

88

bull Make a test strategyndash Henny Swan has developed a great starting point

bull httpwwwihenicommobile-accessibility-testsndash Test with

bull Both zoom and speech output features offbull Speech output onlybull Zoom onlybull Both zoom and speech output features onbull Inverted colours

89

Testing

bull Make a test strategyndash Henny Swan has developed a great starting point

bull httpwwwihenicommobile-accessibility-testsndash Test with

bull Both zoom and speech output features offbull Speech output onlybull Zoom onlybull Both zoom and speech output features onbull Inverted colours

89

Testing

Testing on iOS

bull Cheat sheet for learning the gestures used on VoiceOver for iOS httpa11ycciosvoref

Tipbull You can use the Simulator or AirPlay to

check colour contrast

90

SummaryLetrsquos recaphellip

91

Summarybull An introduction to mobile accessibilitybull How people with disabilities use

mobile devices (iOS and Android)bull How to go about building in

accessibility on mobile

92

Questions

Thank youbull Irsquom Jon Gibbins

ndash dotjay on Twitterndash For more information contact jondiginclusioncom

bull Slides will be available on Lanyrdbull Feedback gratefully receivedbull Please also tweet feedback and photos digpenbull Note Contributions from The Paciello Group used

with permission

94copy Jon Gibbins

Summarybull An introduction to mobile accessibilitybull How people with disabilities use

mobile devices (iOS and Android)bull How to go about building in

accessibility on mobile

92

Questions

Thank youbull Irsquom Jon Gibbins

ndash dotjay on Twitterndash For more information contact jondiginclusioncom

bull Slides will be available on Lanyrdbull Feedback gratefully receivedbull Please also tweet feedback and photos digpenbull Note Contributions from The Paciello Group used

with permission

94copy Jon Gibbins

Questions

Thank youbull Irsquom Jon Gibbins

ndash dotjay on Twitterndash For more information contact jondiginclusioncom

bull Slides will be available on Lanyrdbull Feedback gratefully receivedbull Please also tweet feedback and photos digpenbull Note Contributions from The Paciello Group used

with permission

94copy Jon Gibbins

Thank youbull Irsquom Jon Gibbins

ndash dotjay on Twitterndash For more information contact jondiginclusioncom

bull Slides will be available on Lanyrdbull Feedback gratefully receivedbull Please also tweet feedback and photos digpenbull Note Contributions from The Paciello Group used

with permission

94copy Jon Gibbins

Appendices

95

Benefits of digital inclusion

96

Making a casebull Search engine optimisationbull Increased usability and businessbull Reduced development and maintenance timebull Improved stability and interoperabilitybull Reduced server loadbull Cost savingsbull Reputationbull Competitive advantagebull Compliance with law

97

Making a case (continued)

bull Informed byndash Web statisticsndash Cost versus savings analysisndash Corporate Social Responsibilityndash Non-quantifiable benefits

bull Developing a Web Accessibility Business Case for Your Organizationndash httpwwww3orgWAIbcase

98

Benefits of digital inclusion

96

Making a casebull Search engine optimisationbull Increased usability and businessbull Reduced development and maintenance timebull Improved stability and interoperabilitybull Reduced server loadbull Cost savingsbull Reputationbull Competitive advantagebull Compliance with law

97

Making a case (continued)

bull Informed byndash Web statisticsndash Cost versus savings analysisndash Corporate Social Responsibilityndash Non-quantifiable benefits

bull Developing a Web Accessibility Business Case for Your Organizationndash httpwwww3orgWAIbcase

98

Making a casebull Search engine optimisationbull Increased usability and businessbull Reduced development and maintenance timebull Improved stability and interoperabilitybull Reduced server loadbull Cost savingsbull Reputationbull Competitive advantagebull Compliance with law

97

Making a case (continued)

bull Informed byndash Web statisticsndash Cost versus savings analysisndash Corporate Social Responsibilityndash Non-quantifiable benefits

bull Developing a Web Accessibility Business Case for Your Organizationndash httpwwww3orgWAIbcase

98

Making a case (continued)

bull Informed byndash Web statisticsndash Cost versus savings analysisndash Corporate Social Responsibilityndash Non-quantifiable benefits

bull Developing a Web Accessibility Business Case for Your Organizationndash httpwwww3orgWAIbcase

98

Making a case (continued)

bull Search engine optimisationndash ldquoThe Internetrsquos biggest blind user is Googlerdquondash Valid code is easily digestible

bull Increased usability and businessndash Close ties between accessibility and usabilityndash Expanding and diversifying the customer basendash Overall increase in business volumes

99

Making a case (continued)

bull Reduced development and maintenance timendash Accessibility can save your developers timendash Easier to automate testing

bull Improved stability and interoperabilityndash Accessibility encourages valid code making your websites

and applications more robust and more likely to work with other software

bull Reduced server loadndash Leaner code easier to serve less bandwidth

100

Making a case (continued)

bull Cost savingsndash Proven return on investmentndash Increased sales and improved profitability ndash Time and reduced server load

bull Reputationndash Corporate Social Responsibilityndash ldquoAn accessible website will make you look goodrdquondash A better more usable website will earn you a good reputationndash Loyal customer base word-of-mouth advertising and repeat

business

101

• Introduction to Mobile accessibility
• Introduction
• Slide 3
• Slide 4
• Slide 5
• Introduction (2)
• Introduction (3)
• Introduction (4)
• Accessibility
• Accessible
• Mobile
• Mobile accessibility
• Why
• Who
• Who (2)
• Who (3)
• How
• How (2)
• Quick screen reader demo
• Who (4)
• Who (5)
• Who (6)
• Constraints of mobile
• Constraints of mobile (2)
• Capabilities of mobile
• Capabilities of mobile (2)
• Capabilities of mobile (3)
• How (3)
• How (4)
• iOS Accessibility Features
• iOS Accessibility Features VoiceOver
• iOS Accessibility Features VoiceOver (2)
• iOS Accessibility Features VoiceOver (3)
• iOS Accessibility Features Other accessibility features
• iOS Accessibility Features Other accessibility features (2)
• Android Accessibility Features
• Android Accessibility Features (2)
• Android Accessibility Features (3)
• Android Accessibility Features (4)
• Standards and guidelines
• Standards and guidelines (2)
• Standards and guidelines (3)
• Standards and guidelines (4)
• Standards and guidelines (5)
• Legal requirements
• General principles
• Theory accessibility APIs
• Theory accessibility APIs (2)
• The Mobile Web
• The Mobile Web Principles of mobile accessibility
• Forms
• Forms (2)
• Forms (3)
• Forms (4)
• Forms (5)
• Forms (6)
• Forms (7)
• Forms (8)
• Forms (9)
• Error handling
• Session timeouts
• Focus management
• Speech
• WAI-ARIA
• ARIA
• ARIA (2)
• ARIA (3)
• ARIA (4)
• ARIA (5)
• ARIA (6)
• Structure and layout
• Structure and layout (2)
• Structure and layout (3)
• Structure and layout (4)
• Structure and layout (5)
• Structure and layout Landmarks
• Structure and layout Content order
• Structure and layout Content order (2)
• Testing
• Top 5 tests
• Top 5 tests (2)
• Top 5 tests (3)
• Top 5 tests (4)
• Top 5 tests (5)
• Top 5 tests (6)
• Top 5 tests (7)
• Top 5 tests (8)
• Top 5 tests (9)
• Testing (2)
• Testing on iOS
• Summary Letrsquos recaphellip
• Summary
• Questions
• Thank you
• Appendices
• Benefits of digital inclusion
• Making a case
• Making a case (continued)
• Making a case (continued) (2)
• Making a case (continued) (3)
• Making a case (continued) (4)

Making a case (continued)

bull Reduced development and maintenance timendash Accessibility can save your developers timendash Easier to automate testing

bull Improved stability and interoperabilityndash Accessibility encourages valid code making your websites

and applications more robust and more likely to work with other software

bull Reduced server loadndash Leaner code easier to serve less bandwidth

100

Making a case (continued)

bull Cost savingsndash Proven return on investmentndash Increased sales and improved profitability ndash Time and reduced server load

bull Reputationndash Corporate Social Responsibilityndash ldquoAn accessible website will make you look goodrdquondash A better more usable website will earn you a good reputationndash Loyal customer base word-of-mouth advertising and repeat

business

101

• Introduction to Mobile accessibility
• Introduction
• Slide 3
• Slide 4
• Slide 5
• Introduction (2)
• Introduction (3)
• Introduction (4)
• Accessibility
• Accessible
• Mobile
• Mobile accessibility
• Why
• Who
• Who (2)
• Who (3)
• How
• How (2)
• Quick screen reader demo
• Who (4)
• Who (5)
• Who (6)
• Constraints of mobile
• Constraints of mobile (2)
• Capabilities of mobile
• Capabilities of mobile (2)
• Capabilities of mobile (3)
• How (3)
• How (4)
• iOS Accessibility Features
• iOS Accessibility Features VoiceOver
• iOS Accessibility Features VoiceOver (2)
• iOS Accessibility Features VoiceOver (3)
• iOS Accessibility Features Other accessibility features
• iOS Accessibility Features Other accessibility features (2)
• Android Accessibility Features
• Android Accessibility Features (2)
• Android Accessibility Features (3)
• Android Accessibility Features (4)
• Standards and guidelines
• Standards and guidelines (2)
• Standards and guidelines (3)
• Standards and guidelines (4)
• Standards and guidelines (5)
• Legal requirements
• General principles
• Theory accessibility APIs
• Theory accessibility APIs (2)
• The Mobile Web
• The Mobile Web Principles of mobile accessibility
• Forms
• Forms (2)
• Forms (3)
• Forms (4)
• Forms (5)
• Forms (6)
• Forms (7)
• Forms (8)
• Forms (9)
• Error handling
• Session timeouts
• Focus management
• Speech
• WAI-ARIA
• ARIA
• ARIA (2)
• ARIA (3)
• ARIA (4)
• ARIA (5)
• ARIA (6)
• Structure and layout
• Structure and layout (2)
• Structure and layout (3)
• Structure and layout (4)
• Structure and layout (5)
• Structure and layout Landmarks
• Structure and layout Content order
• Structure and layout Content order (2)
• Testing
• Top 5 tests
• Top 5 tests (2)
• Top 5 tests (3)
• Top 5 tests (4)
• Top 5 tests (5)
• Top 5 tests (6)
• Top 5 tests (7)
• Top 5 tests (8)
• Top 5 tests (9)
• Testing (2)
• Testing on iOS
• Summary Letrsquos recaphellip
• Summary
• Questions
• Thank you
• Appendices
• Benefits of digital inclusion
• Making a case
• Making a case (continued)
• Making a case (continued) (2)
• Making a case (continued) (3)
• Making a case (continued) (4)

Making a case (continued)

bull Cost savingsndash Proven return on investmentndash Increased sales and improved profitability ndash Time and reduced server load

bull Reputationndash Corporate Social Responsibilityndash ldquoAn accessible website will make you look goodrdquondash A better more usable website will earn you a good reputationndash Loyal customer base word-of-mouth advertising and repeat

business

101

• Introduction to Mobile accessibility
• Introduction
• Slide 3
• Slide 4
• Slide 5
• Introduction (2)
• Introduction (3)
• Introduction (4)
• Accessibility
• Accessible
• Mobile
• Mobile accessibility
• Why
• Who
• Who (2)
• Who (3)
• How
• How (2)
• Quick screen reader demo
• Who (4)
• Who (5)
• Who (6)
• Constraints of mobile
• Constraints of mobile (2)
• Capabilities of mobile
• Capabilities of mobile (2)
• Capabilities of mobile (3)
• How (3)
• How (4)
• iOS Accessibility Features
• iOS Accessibility Features VoiceOver
• iOS Accessibility Features VoiceOver (2)
• iOS Accessibility Features VoiceOver (3)
• iOS Accessibility Features Other accessibility features
• iOS Accessibility Features Other accessibility features (2)
• Android Accessibility Features
• Android Accessibility Features (2)
• Android Accessibility Features (3)
• Android Accessibility Features (4)
• Standards and guidelines
• Standards and guidelines (2)
• Standards and guidelines (3)
• Standards and guidelines (4)
• Standards and guidelines (5)
• Legal requirements
• General principles
• Theory accessibility APIs
• Theory accessibility APIs (2)
• The Mobile Web
• The Mobile Web Principles of mobile accessibility
• Forms
• Forms (2)
• Forms (3)
• Forms (4)
• Forms (5)
• Forms (6)
• Forms (7)
• Forms (8)
• Forms (9)
• Error handling
• Session timeouts
• Focus management
• Speech
• WAI-ARIA
• ARIA
• ARIA (2)
• ARIA (3)
• ARIA (4)
• ARIA (5)
• ARIA (6)
• Structure and layout
• Structure and layout (2)
• Structure and layout (3)
• Structure and layout (4)
• Structure and layout (5)
• Structure and layout Landmarks
• Structure and layout Content order
• Structure and layout Content order (2)
• Testing
• Top 5 tests
• Top 5 tests (2)
• Top 5 tests (3)
• Top 5 tests (4)
• Top 5 tests (5)
• Top 5 tests (6)
• Top 5 tests (7)
• Top 5 tests (8)
• Top 5 tests (9)
• Testing (2)
• Testing on iOS
• Summary Letrsquos recaphellip
• Summary
• Questions
• Thank you
• Appendices
• Benefits of digital inclusion
• Making a case
• Making a case (continued)
• Making a case (continued) (2)
• Making a case (continued) (3)
• Making a case (continued) (4)