Web Accessibility
Recognition Scheme 2015
How to Meet the Accreditation Criteria
(Mobile App Stream)
Office of the Government Chief Information Officer
Digital Inclusion Division
24 October 2014
1
Judging Criteria
Mobile Application Stream (Silver)
No. Criteria
1
Provide meaningful text alternative for non-text contents
2
Easy to turn off background sound or set as user-initiated only
3
Make all clickable objects large enough to be tapped
4
Provide clear and simple headings
5
Provide consistent and simple user interface structure
6
Provide meaningful content sequence
7
Provide navigation for going backward
8
Provide clear and informative links
9
Text resize function or text can be zoomed without loss of content
10
Compatible with screen readers
11
Provide contact points or “email feedback” feature
22
Judging Criteria
Mobile Application Stream (Gold)
No. Criteria
1
Provide sufficient colour contrast
2
Provide sufficient time for users to read the content and operate the function
3
Provide captions or sign language for 30% of pre-recorded videos published in
the recent 2 years
4
Provide alternative means for notification
5
Provide input assistance such as proper labels or instructions for user input
6
Provide error prevention for transactions
7
Provide means to close popovers
33
Testing Steps
• Code Review (編碼檢查)
• Visual Review (目視檢查)
• Color Contrast Review (色差對比檢查)
• Manual Testing with Screen Reader (使用讀屏軟
件進行手動檢測)
• Human Testing (使用者測試)
4
4
Steps to Build Accessible Mobile Apps
Requirements
Accessibility
Requirements &
Mobile Application
Accessibility
Handbook
Architecture &
Screen
Design
Visual Test
Manual Test
with screen
reader &
Human Test
Development
& Coding
e.g. Color contrast ,
icon & button size,
information flow
Testing
Fine-tune
5
5
Screen Readers
• To identify and interpret what is being displayed on the screen
 iOS: VoiceOver
•
Proprietary by Apple
•
Support multiple languages without need to install
Text-to-Speech Engine
 Android: TalkBack
• Open source
• Require to install third-party Text-to-Speech Engine
(e.g. Ekho (余音) - Free Text-to-Speech engine for Cantonese)
6
6
1. Meaningful Text Alternative
Silver 01
No alternatives for non-text content
• Persons with visual impairment cannot perceive the
image content
7
7
1. Meaningful Text Alternative
Silver 01
Android :
Check Content Description in layout xml
8
8
1. Meaningful Text Alternative
Silver 01
iOS:
Enable Accessibility features (XCode)
VoiceOver users rely on
the labels and hints to
use the application
9
9
1. Alternate Text
Silver 01
 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
10 10
1. Alternate Text (Con’t)
Silver 01
Listen to the audio first and get the meaning
Source : 我的航班
11
11
Silver 02
2. Background Sound
• Easy to turn off background sound or set as user-initiated
only


Testing: Visual Review, Manual Testing with Screen Reader
12
12
Silver 03
3. Clickable Object Size
• Make all clickable objects large enough for tapping


13
13
Silver 03
3. Clickable Object Size
Testing: Visual Review
Button and
Links are
large
enough for
tapping
 Android: > 9mm

iOS: 44 x 44 points
Source :
http://www.gov.hk/en/about/govdirectory/mo
bilesites.htm
14
14
Silver 04
4. Headings
• Provide clear and simple headings


15
15
Silver 04
4. Headings
Testing: Visual Review, Manual Test with Screen Reader
Clear and simple headings
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
16
16
5. Structure and Content
Silver 05
• Provide consistent and simple user interface structure


17
17
5. Structure and Content
Silver 05
Testing: Visual Review, Manual Test with Screen Reader
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
18
18
Silver 06
6. Meaningful Sequence
• Make sure the content is coded in a logical order

H2

19
19
Silver 06
6. Meaningful Sequence
Testing: Manual Testing with Screen Reader
More examples:
H2
Source : First Ferry Mobile App
Source : GovHK Apps
Source : MyObservatory Mobile
20
App
20
Silver 07
7. Navigation
• Provide navigation for going backward


21
21
Silver 07
7. Navigation
Testing: Visual Review, Manual Test with Screen Reader
Some Android devices
have hardware key with
backward button
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
22
22
Silver 08
8. Links
• Provide clear and informative links


23
23
Silver 09
9. Text Resize
• Text resize function or text can be zoomed without loss of
content


24
24
9. Text Resize
Silver 09
Testing: Visual Review and Human Testing
Text resize
without
loss of
content
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
25
25
Silver 09
9. Text Resize
In App’s Setting
In System Setting
26
26
10. Not Compatible with Screen Reader
Silver 10
 All contents, function, gesture should be in order when
using with screen reader
 App should not crash when using with screen reader
 Maps engine ( such as Google Map or Apple Map) may
not be easy to use with screen reader, other alternative
means should be provided (e.g. a list of nearby car
parks)
 Alert message/declaration should be provided prior
inaccessible items (e.g. Games )
H2
27
27
10. Not Compatible with Screen Reader
Selection menu provided to
access location information
Silver 10
Alert box was pop up prior to
access Mini Game
H2
Source : First Ferry Mobile App
Source : Equal Opportunities
Commission Mobile App
28
28
Silver 11
11. Accessibility Statement
• Provide contact points or email feedback as well as an
accessibility statement


29
29 29
Silver 11
11. Accessibility Statement
Testing: Visual Review
Source : IBM HK Connect
Mobile App
Source : City AMIS Mobile
App
Source :中原地產
Mobile App
30
30
Gold 01
12. Sufficient Colour Contrast
• The visual presentation of text and image of text has a contrast
ratio of at least 4.5 : 1. Logo or brand name is exempted
2:1

15 :1

31
31
12. Sufficient Colour Contrast
Gold 01
Testing: Colour contrast check
http://snook.ca/technical/colour_contrast/colour.html
32
32
12. Sufficient Colour Contrast
Gold 01
Persons with low vision have difficulty reading text that does
not contrast with its background
Compare color contrast between foreground and 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
33
33
12. Sufficient Colour Contrast
Gold 02
• Invert Color : Built-in application to convert text in
white-on-black or negative colors, helps improve contrast
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
34
34
Gold 02
13. Time-limited Function
• Provide user enough time to read the content or operate
the function


35
35
13. Time-limited Function
Gold 02
Testing: Visual Review, Manual Testing with Screen Reader
36
36
Gold 03
14. Video
• Provide captions or sign language for 30% of pre-recorded
videos published in the recent 2 years


37
37 37
14. Video
Gold 03
Testing: Visual Review
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
38
38 38
Gold 04
15. Notification
• Provide alternative means for notification


39
39
15. Notification
Gold 04
Testing: Visual Review, Manual Testing with Screen Reader
40
40
Gold 05
16. Input Assistance
• Provide input assistance such as proper labels or instructions
for user input


41
41
16. Input Assistance
Gold 05
Testing: Visual Review, Manual Testing with Screen Reader
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
42
42
16. Error Prevention
Gold 06
• Provide error prevention (allow reversible) for transactions for
legal or financial transactions


43
43
16. Error Prevention
Gold 06
Testing: Manual Testing with Screen Reader
44
44
Gold 07
17. Popovers
• Provide means to close a popover screen.


45
45
17. Popover
Gold 07
Testing: Visual Review, Manual Testing with Screen Reader
Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htm
46
46
Demo
47
47
Thank you!
48
48