1 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

2 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 “ feedback” feature Judging Criteria Mobile Application Stream (Silver) 2

3 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 Judging Criteria Mobile Application Stream (Gold) 3

4 Testing Steps 4 Code Review ( 編碼檢查 ) Visual Review ( 目視檢查 ) Color Contrast Review ( 色差對比檢查 ) Manual Testing with Screen Reader ( 使用讀屏軟 件進行手動檢測 ) Human Testing ( 使用者測試 )

5 Steps to Build Accessible Mobile Apps Requirements Visual Test e.g. Color contrast, icon & button size, information flow Architecture & Screen Design Development & Coding Testing Manual Test with screen reader & Human Test Fine-tune Accessibility Requirements & Mobile Application Accessibility Handbook 5

6 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) Screen Readers 6 To identify and interpret what is being displayed on the screen

7 1. Meaningful Text Alternative No alternatives for non-text content Persons with visual impairment cannot perceive the image content Silver 01 7

8 Android : Content Description in layout xml Check Content Description in layout xml 8 1. Meaningful Text Alternative Silver 01

9 labels hints VoiceOver users rely on the labels and hints to use the application iOS: Enable Accessibility features (XCode) 9 1. Meaningful Text Alternative Silver 01

10 1. Alternate Text 10 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 年 2 月 14 日 is more meaningful than 2014/2/14 Voice Captcha available when turn on screen reader Silver 01

11 1. Alternate Text (Con’t) Listen to the audio first and get the meaning Source : 我的航班 Silver 01 11

12  Silver Background Sound Easy to turn off background sound or set as user-initiated only 12 Testing: Visual Review, Manual Testing with Screen Reader

13 Make all clickable objects large enough for tapping  Silver Clickable Object Size 13

14 Silver Clickable Object Size Testing: Visual Review 14 Source : bilesites.htm bilesites.htm Button and Links are large enough for tapping Android: > 9mm iOS: 44 x 44 points

15 Provide clear and simple headings  Silver Headings 15

16 Clear and simple headings Silver Headings Testing: Visual Review, Manual Test with Screen Reader 16 Source :

17 Provide consistent and simple user interface structure  Silver Structure and Content 17

18 Silver Structure and Content Testing: Visual Review, Manual Test with Screen Reader 18 Source :

19 Make sure the content is coded in a logical order H2  Silver Meaningful Sequence 19

20 H2 6. Meaningful Sequence Testing: Manual Testing with Screen Reader More examples: 20 Source : First Ferry Mobile App Source : GovHK AppsSource : MyObservatory Mobile App Silver 06

21 Provide navigation for going backward  Silver Navigation 21

22 7. Navigation Testing: Visual Review, Manual Test with Screen Reader 22 Some Android devices have hardware key with backward button Source : Silver 07

23 Provide clear and informative links  Silver Links 23

24 Text resize function or text can be zoomed without loss of content  Silver Text Resize 24

25 Text resize without loss of content Silver Text Resize Testing: Visual Review and Human Testing 25 Source :

26 9. Text Resize 26 In App’s Setting In System Setting Silver 09

27 H2 10. Not Compatible with Screen Reader 27 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 ) Silver 10

28 H2 10. Not Compatible with Screen Reader 28 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 Silver 10

29 Provide contact points or feedback as well as an accessibility statement  11. Accessibility Statement 29 Silver 11

Accessibility Statement Testing: Visual Review 30 Source : IBM HK Connect Mobile App Source : City AMIS Mobile App Source : 中原地產 Mobile App Silver 11

31 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  Gold Sufficient Colour Contrast 2 : 115 :1 31

32 Gold Sufficient Colour Contrast Testing: Colour contrast check 32

33 Compare color contrast between foreground and background 12. Sufficient Colour Contrast 33 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 : Gold 01

34 Invert Color : Built-in application to convert text in white-on-black or negative colors, helps improve contrast 12. Sufficient Colour Contrast 34 Source : Gold 02

35 Provide user enough time to read the content or operate the function  Gold Time-limited Function 35

36 Gold Time-limited Function Testing: Visual Review, Manual Testing with Screen Reader 36

37 Provide captions or sign language for 30% of pre-recorded videos published in the recent 2 years  Gold Video 37

38 Gold Video Testing: Visual Review 38 Source :

39 Provide alternative means for notification  Gold Notification 39

40 Gold Notification Testing: Visual Review, Manual Testing with Screen Reader 40

41 Provide input assistance such as proper labels or instructions for user input  Gold Input Assistance 41

42 Gold Input Assistance Testing: Visual Review, Manual Testing with Screen Reader 42 Source :

43 Provide error prevention (allow reversible) for transactions for legal or financial transactions  Gold Error Prevention 43

44 Gold Error Prevention Testing: Manual Testing with Screen Reader 44

45 Provide means to close a popover screen.  Gold Popovers 45

46 Gold Popover Testing: Visual Review, Manual Testing with Screen Reader 46 Source :

47 Demo

48 Thank you! 48