technical aspects of mobile app accessibility
DESCRIPTION
Office of the Government Chief Information Officer. Technical Aspects of Mobile App Accessibility . Digital Inclusion Divison 27 June 2014. Agenda. Common Accessibility Pitfalls in Mobile Apps How to Make Accessible Mobile Apps? How to Conduct Accessibility Test for Mobile Apps? - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/1.jpg)
Technical Aspects of Mobile App Accessibility
Digital Inclusion Divison27 June 2014
Office of the Government Chief Information Officer
![Page 2: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/2.jpg)
2
• Common Accessibility Pitfalls in Mobile Apps
• How to Make Accessible Mobile Apps?• How to Conduct Accessibility Test for
Mobile Apps?• Introduction to WAI-ARIA
Agenda
![Page 3: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/3.jpg)
3
Common Accessibility Pitfalls in Mobile Apps
![Page 4: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/4.jpg)
Characteristics of Mobile Apps
4
Type of Mobile Apps Native App Hybrid App Web App
Platforms Android (Google) iOS (Apple) Windows Phone
(Microsoft) Blackberry
Source: Strategy Analytics
![Page 5: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/5.jpg)
How Mobile Platform Support Accessibility
5
iOS 7 Android 4.1
1. VoiceOver2. Siri3. Speak Selection4. Dictation5. Zoom6. Font Adjustments7. Invert Colors8. AssistiveTouch9. Close Caption
1. TalkBack 2. Speak passwords 3. Screen timeout4. Explore by touch5. Invert Colors6. Change font size7. Mono audio8. Tap and hold delay
![Page 6: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/6.jpg)
How Mobile Platform Support Accessibility
6
iOS 7 Android 4.1Setting
![Page 7: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/7.jpg)
7
iOS: VoiceOver
• Proprietary by Apple• Support multiple languages without need to
install Text-to-Speech Engine
Android: TalkBack • Open source• Require to install custom Text-to-Speech Engine (e.g. eSpeak Text-to-Speech engine for Cantonese)
Screen Readers
7
• To identify and interpret what is being displayed on the screen
![Page 8: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/8.jpg)
Common Accessibility Pitfalls
Silver Award ( Total 10 Judging criteria)1. No text alternatives (100% Fail) 2. Not meaningful sequence (42% Fail)3. Not compatible with screen reader (71% Fail)
Gold Award ( Total 8 Judging criteria)4. Insufficient colour contrast (98% Fail)5. No input assistance (40% Fail)
8
Findings from Web Accessibility Recognition Scheme 2014
![Page 9: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/9.jpg)
9
How to Make Accessible Mobile Apps?
![Page 10: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/10.jpg)
Steps to Build Accessible Mobile Apps
10
Step 1• Understand the accessibility requirements • Observe relevant guidelines (www.webforall.gov.hk)• Make reference to Mobile Application Accessibility Handbook
Step 2• Visual and Layout Review• Code Review
![Page 11: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/11.jpg)
Steps to Build Accessible Mobile Apps (Con’t)
11
Step 3• Test your mobile apps
Visual Check Manuel test with screen reader (e.g. VoiceOver and
Talkback)
Step 4• Human testing (by persons with disabilities preferably)
![Page 12: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/12.jpg)
12
How to Conduct Accessibility Test for Mobile Apps?
![Page 13: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/13.jpg)
1. Alternate Text
13
No alternatives for non-text content• Persons with visual impairment cannot perceive the
image content
![Page 14: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/14.jpg)
14
Android :Check Content Description in layout xml
14
1. Alternate Text (Con’t)
![Page 15: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/15.jpg)
15
VoiceOver users rely on the labels and hints to use the application
iOS:Enable Accessibility features (XCode)
15
1. Alternate Text (Con’t)
![Page 16: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/16.jpg)
1. Alternate Text (Con’t)
16
Provide meaningful alternative text for non-text elements such as image, button, etc
Provide null alternative text for decorative image
Screen reader should read menu item / function block with "button" or " 按鈕“
Alternative text should be consistency with user's language i.e. alternative text should not be in English for Chinese interface
Pay attention to date format. e.g. 2014 年 2 月 14 日 is more meaningful than 2014/2/14
Voice Captcha available when turn on screen reader
![Page 17: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/17.jpg)
1. Alternate Text (Con’t)
17
Please listen to the audio first and get the meaning
Source : 我的航班
![Page 18: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/18.jpg)
1. Alternate Text (Con’t)
18
Voice Captcha available when turn on screen reader
http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 19: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/19.jpg)
19
• Make sure the content is coded in a logical order
H2
2. Meaningful Sequence
19
Screen reader should read important content first and then read other content/menu for every screen
Screen reader should read content from left to right and top to bottom
Pay attention to timetable with row and column
![Page 20: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/20.jpg)
20
H2
2. Meaningful Sequence (Con’t)
Testing: Manual Testing with Screen Reader
More examples:
20Source : First Ferry Mobile App
Source : CUHK Mobile App Source : MyObservatory Mobile App
![Page 21: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/21.jpg)
21
H2
Screen reader reads the information from
left to right, top to bottom sequences
2. Meaningful Sequence (Con’t)
Testing: Manual Testing with Screen Reader
21
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 22: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/22.jpg)
22
H2
3. Not Compatible with Screen Reader
22
All contents, function, gesture are found in order when turning on screen reader
App should not crash when turn on screen reader
Maps ( such as Google Map or Apple Map) are not accessible with screen reader, alternate means of access should be provided
Alert message should be provided prior to access inaccessible items (e.g. Games )
![Page 23: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/23.jpg)
23
H2
3. Not Compatible with Screen Reader (Con’t)
23
Selection menu provided to access location information
Alert box was pop up prior to access Mini Game
Source : First Ferry Mobile App Source : Equal Opportunities Commission Mobile App
![Page 24: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/24.jpg)
24
Compare color contrast between foreground and background
4. Sufficient Colour Contrast
24
Persons with low vision have difficulty reading text that does not contrast with its background
Normal text has a contrast ratio of at least 4.5:1
Contrast ratio can be reached by the system built-in Invert Colours function
Logo and brand name are exempted
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 25: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/25.jpg)
25
4. Sufficient Colour Contrast (Con’t)
Testing: Colour contrast checkhttp://snook.ca/technical/colour_contrast/colour.html
25
![Page 26: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/26.jpg)
26
• Invert Color : Built-in application to convert text in white-on-black or negative colors, helps improve contrast
4. Sufficient Colour Contrast (Con’t)
26
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 27: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/27.jpg)
27
• Provide input assistance such as proper labels or instructions for user input
5. Input Assistance
Screen reader can read the text description when focusing on the input components
Screen reader can read the selection box content when focusing on the input components
![Page 28: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/28.jpg)
28
5. Input Assistance (Con’t)
Testing: Visual Review, Manual Testing with Screen Reader
28
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 29: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/29.jpg)
29
Android: > 48 dp (approximately 9mm) in length and width.
(http://developer.android.com/tools/testing/testing_accessibility.html)
iOS: > 44 x 44 points. (
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html)
6. Clickable Object Size
29
• Make all clickable objects large enough to be tapped
![Page 30: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/30.jpg)
30
Make all clickable objects large enough to be pressed.
Button and Links are large enough
for tapping
6. Clickable Object Size (Con’t)
Testing: Visual Review and Screen Reader Test
30
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 31: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/31.jpg)
31
7. Headings
31
Should provide heading in every screens as possible
Should not provide English headings for Chinese interface
Heading should be simple and avoid too long in length
![Page 32: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/32.jpg)
32
Clear and simple headings
7. Headings (Con’t)
Testing: Visual Review, Manual Test with Screen Reader
32Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 33: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/33.jpg)
33
• Provide consistent and simple user interface structure• Consider in App Design Stage for common UI
8. Structure and Content
33
Menu should be always placed at the top if possible
Menu should be always placed at the same place for different screens
Menu items should be the same order and same content for different screens
![Page 34: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/34.jpg)
34
8. Structure and Content
Testing: Visual Review, Manual Test with Screen Reader
34
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 35: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/35.jpg)
35
9. Navigation
Provide a button to go backward for hierarchy screens
Backward Button would be excluded in Android Platform
Provide a Done/Cancel button to close the current screen and then go backward
35
![Page 36: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/36.jpg)
36
9. Navigation (Con’t)
Testing: Visual Review, Manual Test with Screen Reader
36
Some Android devices have hardware key with backward button
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 37: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/37.jpg)
37
Has enlarge function for text resize
Text resize function or text can be zoomed without loss of content
Content can be resized by the system built-in text resize function without lose of content
10. Text Resize
37
• Text resize function or text can be zoomed without loss of content
![Page 38: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/38.jpg)
38
10. Text Resize (Con’t)
38
In App’s Setting In System Setting
![Page 39: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/39.jpg)
39
Text resize without loss of
content
10. Text Resize (Con’t)
Testing: Visual Review and Human Testing
39
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 40: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/40.jpg)
40
• Provide captions or sign language for pre-recorded videos
11. Video
Provide caption
Provide sign language within videos
Provide text transcript
![Page 41: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/41.jpg)
41
11. Video (Con’t)
Testing: Visual Review
41
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 42: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/42.jpg)
42
• Provide means to close a popover screen.
12. Popovers
42
Show close button with meaningful text alternative in popover windows
Pay attention to slash screens and advertising screens
Testing: Visual Review, Manual Testing with Screen Reader
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 43: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/43.jpg)
“Vibrate” option notification should be provided• Persons with hearing impairment have difficulty to
receive the alarm
13. Alternate Means of Notification
43
Testing: Visual Review
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
![Page 44: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/44.jpg)
44
• Provide contact points or email feedback as well as an accessibility statement in Contact us or About us screen
14. Accessibility Statement
Samples:
English:We have incorporated appropriate accessibility features in this app, if you still encounter difficulties in using this app, please contact us via email or phone.
Contact No : xxx xxxx Email : [email protected]
Chinese:本程式採用了無障礙設計。如在使用上有任何查詢或意見,請致電或發送電郵與我們聯絡。 電話號碼 : xxxx xxxx 電郵地址: [email protected]
![Page 45: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/45.jpg)
45
13. Accessibility Statement
Testing: Visual Review
Source : IBM HK Connect Mobile App
Source : City AMIS Mobile App
Source : 中原地產 Mobile App
![Page 46: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/46.jpg)
Development Frameworks
46
1) iOS (e.g. VoiceOver is proprietary and built-in) http://developer.apple.com/technologies/ios/accessibility.html
2) Android (e.g. TalkBack or 3rd party solutions) http://developer.android.com/guide/topics/ui/accessibility/index.html
3) W3C Standards (mostly for browsers) WCAG 2.0 http://www.w3.org/TR/WCAG/
4) Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/
5) OGCIO Mobile Application Accessibility Handbook http://www.ogcio.gov.hk/en/community/web_accessibility/maahandbook/
No industry standards for native apps (yet)
![Page 47: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/47.jpg)
47
Introduction to WAI-ARIA
![Page 48: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/48.jpg)
48
Introduction to WAI-ARIA
WAI-ARIA Stand for “Web Accessibility Initiative – Accessible Rich
Internet Applications” W3C announced version 1.0 on 20 March 2014 Set of attributes to help enhance the semantics of a web
site or web application to help assistive technologies, such as screen readers for the blind
Part of HTML5 Affect Web App and Hybrid App WAI-ARIA contains Roles, States and Properties
Source : www.w3.org/TR/wai-aria
48
![Page 49: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/49.jpg)
49
Introduction to WAI-ARIA (Con’t)
49
Browsers support WAI-ARIA
Source: caniuse.com
![Page 50: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/50.jpg)
50
Introduction to WAI-ARIA (Con’t)
50
Resource and examples
W3C WAI-ARIAhttp://www.w3.org/TR/wai-aria/
Accessible jQuery-ui Components Demonstrationhttp://hanshillen.github.io/jqtest/#goto_slider
ARIA Exampleshttp://test.cita.illinois.edu/aria/index.php
![Page 51: Technical Aspects of Mobile App Accessibility](https://reader036.vdocuments.net/reader036/viewer/2022062323/56816332550346895dd3b782/html5/thumbnails/51.jpg)
51
Thank you!Web Accessibility Campaign Programme Office
Email : [email protected] Tel. no. : 2582 4606