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

3. 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. 4 Testing Steps 4 Code Review ( 編碼檢查 ) Visual Review ( 目視檢查 ) Color Contrast Review ( 色差對比檢查 ) Manual Testing with Screen Reader ( 使用讀屏軟 件進行手動檢測 ) Human Testing ( 使用者測試 )

5. 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. 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. 7 1. Meaningful Text Alternative No alternatives for non-text content Persons with visual impairment cannot perceive the image content Silver 01 7

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

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

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

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

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

14. 14 Silver 03 3. Clickable Object Size Testing: Visual Review 14 Source : http://www.gov.hk/en/about/govdirectory/mo bilesites.htm http://www.gov.hk/en/about/govdirectory/mo bilesites.htm Button and Links are large enough for tapping Android: > 9mm iOS: 44 x 44 points

15. 15 Provide clear and simple headings  Silver 04 4. Headings 15

16. 16 Clear and simple headings Silver 04 4. Headings Testing: Visual Review, Manual Test with Screen Reader 16 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

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

18. 18 Silver 05 5. Structure and Content Testing: Visual Review, Manual Test with Screen Reader 18 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

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

20. 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. 21 Provide navigation for going backward  Silver 07 7. Navigation 21

22. 22 7. Navigation Testing: Visual Review, Manual Test with Screen Reader 22 Some Android devices have hardware key with backward button Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm Silver 07

23. 23 Provide clear and informative links  Silver 08 8. Links 23

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

25. 25 Text resize without loss of content Silver 09 9. Text Resize Testing: Visual Review and Human Testing 25 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

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

27. 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. 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. 29 Provide contact points or email feedback as well as an accessibility statement  11. Accessibility Statement 29 Silver 11

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

31. 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 01 12. Sufficient Colour Contrast 2 : 115 :1 31

32. 32 Gold 01 12. Sufficient Colour Contrast Testing: Colour contrast check http://snook.ca/technical/colour_contrast/colour.html 32

33. 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 : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm Gold 01

34. 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 : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm Gold 02

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

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

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

38. 38 Gold 03 14. Video Testing: Visual Review 38 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

39. 39 Provide alternative means for notification  Gold 04 15. Notification 39

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

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

42. 42 Gold 05 16. Input Assistance Testing: Visual Review, Manual Testing with Screen Reader 42 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

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

44. 44 Gold 06 16. Error Prevention Testing: Manual Testing with Screen Reader 44

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

46. 46 Gold 07 17. Popover Testing: Visual Review, Manual Testing with Screen Reader 46 Source : http://www.gov.hk/en/about/govdirectory/mobilesites.htmhttp://www.gov.hk/en/about/govdirectory/mobilesites.htm

47. 47 Demo

48. 48 Thank you! 48