1. 1 Web Accessibility Implementation Office of the Government Chief Information Officer Digital Inclusion Division 5 December 2014

2. 2 2 Agenda 1.Web Accessibility Recognition Scheme 2015 Website Stream Mobile App Stream 2.Useful Reference 3.Testing Steps 4.Implementation 5.Frequency Asked Questions

3. 3 Awards 2015 Web Accessibility Recognition Scheme New Criteria of Silver Award StreamAwardNo. of Judging Criteria Accreditation Logo Website Silver14 Gold10 Mobile Silver11 Gold7 3

4. 4 Assessment Area – Website Stream 1.Main webpage 2.Contact Us / What’s News webpage(s) 3.All first-level of webpages 4.All webpages for three core businesses Mock-up website hierarchy Webpage 00 Restaurant Homepage Webpage11 Online Food Order Webpage12 Food Selection Webpage 13 Delivery & Payment Webpage14 Confirmation Webpage 21 Members’ Corner Webpage 22 Join us Registration Webpage 23 Confirmation Webpage 31 Latest Promotion Webpage 32 Promotion Dishes Details Webpage 41 Shop Location Webpage 42 Shop List Webpage 43 Shop Address Webpage 51 Contact Us/ What’s New Web Accessibility Recognition Scheme 4

5. 5 1. Main webpage – www.ogcio.gov.hk 2. Contact Us 3. All first- level of webpages 4. Core business 1 Assessment Area – Website Stream 5. Core business 2 6. Core business 3 5

6. 6 Awards – Website Stream (Continue) Triple Gold Award NEW Attain Gold Award for 3 consecutive years Most Favourite Websites Attain Triple Gold Award; and Obtain the top three number of votes in public voting Web Accessibility Recognition Scheme 6

7. 7 Judging Criteria – Website Stream (Silver) No.Criteria 1Provide meaningful text alternative for non-text contents 2Provide accessible Flash/Animated content or allow to skip 3Allow to perform all operations through a keyboard interface 4Easy to turn off background sound or set as user-initiated only 5Provide means to close popup windows 6Provide clear and informative links 7Provide accurate and appropriate headings/labels 8Make website content easy to be used with assistive technologies 9Make website structure in a consistent navigation mechanism 10Make website content in meaningful sequence 11Provide input assistance such as proper labels for user input and error identification and description etc. 12Provide error prevention for transactions 13Text can be resized up to 200 percent without loss of content 14Provide an accessibility statement with contact points for the website 7

8. 8 No.Criteria 1Provide accessible PDFs 2Build webpages with predictable operations 3Able to skip repetitive blocks 4Provide multiple ways to retrieve content 5Build webpages with user-initiated auto-updating 6Provide sufficient time for users to read the content and operate the function 7Provide sufficient colour contrast 8Ensure correct syntax of webpages for compatibility with browsers and assistive technologies 9Provide captions or sign language for 30% of pre-recorded videos published in the recent 2 years (i.e. since mid of April 2013) 10Provide meaningful title, summary or description for table headers as well as data Judging Criteria – Website Stream (Gold) 8

9. 9 Assessment Area – Mobile App Stream 1.Main screen 2.One-time Setup Wizard or Welcome / Settings / About Us screen(s) 3.All first-level screens 4.Three core business functions nominated by entrants Mock-up mobile app hierarchy Web Accessibility Recognition Scheme Screen 01 One-time Setup Wizard/Welcome Screen Screen 61 About Us 9

10. 10 Assessment Area – Mobile Stream 1.Main screen – My Observatory 10

11. 11 Assessment Area – Mobile Stream 1.Main screen – My Observatory 2.Settings 3.All first-level screens 4. Core business 1 5. Core business 2 6. Core business 3 11

12. 12 Awards – Mobile App Stream (Continue) Most Favourite Mobile App Attain Gold Award; and Obtain the top three number of votes in public voting Web Accessibility Recognition Scheme 12

13. 13 No.Criteria 1Provide meaningful text alternative for non-text contents 2Easy to turn off background sound or set as user-initiated only 3Make all clickable objects large enough to be tapped 4Provide clear and simple headings 5Provide consistent and simple user interface structure 6Provide meaningful content sequence 7Provide navigation for going backward 8Provide clear and informative links 9Text resize function or text can be zoomed without loss of content 10Compatible with screen readers 11Provide contact points or “email feedback” feature # Judging Criteria – Mobile Application Stream (Silver) # gold criterion last year 13

14. 14 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 App Stream (Gold) 14

15. 15 StageKey Tasks Period 1.Application Now until 31 December 2014 2.Assessment and EnhancementNow until 30 January 2015 3.Technical Workshops3 November 2014 – 30 January 2015 4.Re-assessment2 January 2015 – 20 February 2015 5. Voting for Most Favourite Websites / Mobile App Awards 2 March 2015 – 23 March 2015 6.Awards PresentationApril 2015 Web Accessibility Recognition Scheme Timeline 15

16. 16 www.webforall.gov.hk Live-examples of success criteria (WCAG 2.0 Level AA) Presentation slides of seminars / technical workshops Web Designers’ Corner facilitating the sourcing of ICT professional services Legal cases Useful Reference Web Accessibility Recognition Scheme Webforall Portal 16

17. 17 Free Download - www.webforall.gov.hk/web_template.htm www.webforall.gov.hk/web_template.htm Accessible Webpage Templates Useful Reference Web Accessibility Recognition Scheme 17

18. 18 Designed for senior executives and management Introduce WCAG 2.0 and success criteria  Web Accessibility Concept  How Persons with Disabilities use Websites  Illustration of Each Criterion  Testing Strategy  Useful Reference Web Accessibility Handbook www.webforall.gov.hk/en/wahandbook Useful Reference Web Accessibility Recognition Scheme 18

19. 19 Designed for mobile app owners and developers Based on the WCAG 2.0 and feedbacks collected from local disability groups  Basic Concept  Best Practices  Checklist for Developers  Testing Strategy  Useful Reference Mobile Application Accessibility Handbook www.webforall.gov.hk/en/maahandbook APPS Useful Reference Web Accessibility Recognition Scheme 19

20. 20 Technical Workshop Venue: Office of the Government Chief Information Officer Conference Room, 15/F Wanchai Tower, 12 Harbour Road, Wanchai, Hong Kong Please contact Ms Windy Chan at 2582 6079 to register Web Accessibility Recognition Scheme WorkshopDateTime 119 Dec 2014 (Mobile App Stream)2:30 – 4:00 pm 229 Dec 20142:30 – 4:00 am 36 January 20152:30 – 4:00 am More details, please refer to www.webforall.gov.hk/workshopwww.webforall.gov.hk/workshop 20

21. 21 Web Accessibility Recognition Scheme 21 Testing Steps Code Scanning ( 編碼掃描 ) / Code Review ( 編碼檢查 ) Total Validator Tools (http://www.totalvalidator.com) A Checker (http://achecker.ca/checker/index.php) Visual Review ( 目視檢查 ) Colour Contrast Checker (http://snook.ca/technical/colour_contrast/colour.html) ColourZilla (https://addons.mozilla.org/en-us/firefox/addon/colorzilla/) Vischeck (http://www.vischeck.com/)

22. 22 Web Accessibility Recognition Scheme 22 Testing Steps Manual Testing with Screen Reader ( 使用讀屏軟件進行手動檢測 ) NVDA (http://www.hkbu.org.hk/en_services4_2.php) JAWS (http://www.freedomscientific.com/Products/Blindness/JAWS) VoiceOver Testing with Other Tools ( 使用其他檢測工具 ) ZoomText (http://www.aisquared.com/zoomtext) Human Testing ( 使用者測試 )

23. 23 1. Meaningful Text Alternative Non-text contents, such as icons, photos, pictures, images, banners and maps, should have a text alternative Screen reader cannot read the pictureA text description that can be read by the screen reader 23 Silver 01

24. 24 1. Meaningful Alternative Text Description Press F12 in browser software to view the code 24 Testing: Code Review, Manual Testing with Screen Reader alt="Web Accessibility Campaign - Making Web Content Available for All” Silver 01 Source : www.webforall.gov.hk/en

25. 25 Provide accessible Flash/Animated content or allow skip function 2. Flash / Animated Content Flash content blocks the user from getting to main content Include accessible “Skip” option allow user to skip Flash content 25 Silver 02 Skip

26. 26 2. Flash / Animated Content 26 Testing: Visual Review, Manual Testing with Screen Reader Provide Stop or Next Option Silver 02 e.g. 1 e.g. 2 Accessible Source : www.webforall.gov.hk/en

27. 27 3. Keyboard Interface Functions on a webpage are operable through a keyboard interface; the operation shall not enforce a time limit for individual keystrokes People using a keyboard interface may not be able to navigate to the help function provided Allow users to access all content and functions with a keyboard interface 27 Silver 03

28. 28 3. Keyboard Interface 28 Silver 03 Testing: Code Review, Manual Testing with Screen Reader Source : www.webforall.gov.hk Allow users to access all content and functions with a keyboard interface

29. 29 4. Background Sound If audio plays or stop automatically for more than 3 seconds, a pause function is required 29 The background sound will begin playing automatically in five seconds About Web Accessibility - Include a link to turn off the background sound at the beginning of the webpage About Web Accessibility - Turn off background sound Silver 04

30. 30 4. Background Sound 30 Silver 04 Testing: Visual Review, Manual Testing with Screen Reader Turn off background sound option Source : http://s1.ecard.gov.hk/ecard/mainhttp://s1.ecard.gov.hk/ecard/main

31. 31 5. Popup Windows A close button to allow closing the popup window through keyboard interfaces is provided to close No ways to close the popup window using a keyboard Include a Close button to close the popup window 31 Silver 05

32. 32 5. Popup Windows 32 Silver 05 Testing: Visual Review, Manual Testing with Screen Reader Close Source : www.gov.hk

33. 33 6. Links Either the link text alone or the text preceding the link is clear and meaningful The link "Yes" is ambiguous and does not really convey much meaning Link labels should be more descriptive and self-explanatory 33 Silver 06

34. 34 6. Links 34 Silver 06 Testing: Visual Review, Manual Testing with Screen Reader Source : www.webforall.gov.hk/en

35. 35 7. Headings/Labels Use clear and appropriate headings and labels Heading does not accurately describe the purpose of the content Detailed heading that accurately describes the content 35 Silver 07

36. 36 7. Headings/Labels 36 Silver 07 Testing: Visual Review and Human Testing

37. 37 8. Website Structure and Content Use heading mark-up (h1..h6) to identify headings in the content. Missing heading structure Provide semantic code for headings (h1,h2,h3) in the content 37 Silver 08

38. 38 8. Website Structure and Content 38 Silver 08 Testing: Code Review, Manual Testing with Screen Reader

39. 39 9. Consistent Navigation Mechanism Navigational mechanism should be consistent The style is not consistent across multiple webpages Ensure the navigation is consistent across multiple webpages 39 Silver 09

40. 40 9. Consistent Navigation Mechanism 40 Silver 09 Testing: Visual Review Source : www.ogcio.gov.hk

41. 41 10. Meaningful Sequence If webpage content needs to be read in a certain order to make sense, webpage shall be written/coded in a way which indicates this order Webpage, especially web form, shall be coded in a logical manner when read by screen reader Focus order not intuitive to user Focus order in logical manner 41 Silver 10

42. 42 10. Meaningful Sequence 42 Silver 10 Testing: Manual Testing with Screen Reader Use a screen reader to read or press the "Tab" key to go through the input fields

43. 43 11. Input Assistance Provide input assistance such as proper labels for user input, error identification, description and suggestions etc. The error message is located at the bottom of the webpage and does not provide an adequate description of what needs to be corrected The error message is located at the top provides clear explanation of what needs to be corrected 43 Silver 11

44. 44 11. Input Assistance 44 Silver 11 Testing: Manual Testing with Screen Reader

45. 45 12. Error Prevention Provide error prevention for transactions User is forced to place the order without a confirmation process Allow the user to first confirm and give him/her the option to change any of the details before the final submission 45 Silver 12

46. 46 12. Error Prevention 46 Silver 12 Testing: Manual Testing with Screen Reader

47. 47 13. Text Resize Text can be resized up to 200 % without loss of content No text-resize function Text-resize function is available 47 Silver 13

48. 48 13. Text Resize 48 Silver 13 Testing: Visual Review and Human Testing Source : www.ogcio.gov.hk

49. 49 14. Accessibility Statement 49 Silver 14 Provide an accessibility statement with contact points for users when they encounter accessibility problems

50. 50 14. Accessibility Statement 50 Silver 14 Testing: Visual Review

51. 51 15. Accessible PDFs Provide accessible PDFs 51 Gold 01 Scanned Image not accessibleText-based accessible PDF

52. 52 15. Accessible PDFs 52 Gold 01 Testing: Manual Testing with Screen Reader PDF Accessibility Checker (Free ) - http://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checker- pac.html Adobe Acrobat Accessibility Check (Paid) http://www.adobe.com/accessibility.html

53. 53 16. Predictable Operations Build webpages with predictable operations A field receives focus, and a help dialogue box describing the field and providing options opens Allow the user to activate "Help" only at their choice 53 Gold 02

54. 54 16. Predictable Operations 54 Gold 02 Testing: Visual Review and Manual Testing with Screen Reader

55. 55 17. Skip Repetitive Blocks Ensure users have the ability to skip past repetitive blocks of content (e.g. the navigation at the top of the webpage) People using screen readers need to read all the navigation information before getting to the target content Add a "Skip to content" link at the top of each webpage 55 Gold 03

56. 56 17. Skip Repetitive Blocks 56 Gold 03 Testing: Visual & Code Review, Manual Testing with Screen Reader

57. 57 18. Multiple Ways Provide more than one way to access a webpage such as using a search function, site map, standard navigation, etc. 57 Gold 04 The only way to navigate around website is through the main navigation More than one way to navigate around website

58. 58 18. Multiple Ways 58 Gold 04 Testing: Visual Review Source : www.ogcio.gov.hk

59. 59 19. User-initiated Auto-updating Allow the user to pause, stop or hide any moving information that starts automatically and lasts more than five seconds Update automatically as content changes Provide a function to turn off the auto updating 59 Gold 05

60. 60 19. User-initiated Auto-updating 60 Gold 05 Testing: Visual Review, Manual Testing with Screen Reader Source : www.ogcio.gov.hk/en/news_and_publications/press_releases/k/en/news_and_publications/press_releases/

61. 61 20. Time-limited Function Provide users enough time to read the content or operate the function Warn the user that time is about to expire Allow the user to extend the time 61 Gold 06

62. 62 20. Time-limited Function 62 Gold 06 Testing: Visual Review, Manual Testing with Screen Reader Source : http://www.ogcio.gov.hk/en/community/web_accessibility/handbook/liv e_example/web_access_wcag_221.htm http://www.ogcio.gov.hk/en/community/web_accessibility/handbook/liv e_example/web_access_wcag_221.htm

63. 63 21. Sufficient Colour Contrast The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Logo or brand name is exempted Poor background contrast (2.74:1) Easier to read with higher contrast (21:1) 63 Gold 07

64. 64 21. Sufficient Colour Contrast 64 Gold 07 Testing: Colour contrast check http://snook.ca/technical/colour_contrast/colour.html

65. 65 Testing: Colour blind check http://www.vischeck.com/vischeck/ 21. Sufficient Colour Contrast Gold 07 www.ogcio.gov.hk How the webpage looks to a person with a red/green color deficit (deuteranopia)

66. 66 22. Compatibility Ensure correct syntax of webpages for compatibility with browsers and assistive technologies Incorrect syntax Correct syntax 66 Gold 08

67. 67 22. Compatibility 67 Gold 08 Testing: Code scanning e.g. Achecker - http://achecker.ca/checker/index.phphttp://achecker.ca/checker/index.php WAVE – http://wave.webaim.org/http://wave.webaim.org/ Total Validator - http://www.totalvalidator.com/http://www.totalvalidator.com/

68. 68 23. Video Provide captions or sign language for 30% of pre-recorded videos and audio content published in the recent 2 years (base on full website) Missing captions Provide captions 68 Gold 09

69. 69 23. Video 69 Gold 09 Testing: Visual Review Source : http://www.ogcio.gov.hk/en/community/web_accessibility/recognition_s cheme/video_gallery/ http://www.ogcio.gov.hk/en/community/web_accessibility/recognition_s cheme/video_gallery/

70. 70 24. Table Header and Data Provide meaningful title, summary or description for table header as well as data Provide meaningful header and column title for the table Enquiry Information Monday to Friday General Enquiry2582 46068:45 am to 12:45 pm 1:45 pm to 5:45 pm Web Accessibility2582 60799:00 am to 1:00 pm 2:00 pm to 5:30 pm No header and title for the table HotlineTelephoneOffice Hours General Enquiry2582 46068:45 am to 12:45 pm 1:45 pm to 5:45 pm Web Accessibility2582 60799:00 am to 1:00 pm 2:00 pm to 5:30 pm 70 Gold 10

71. 71 24. Table Header and Data 71 Gold 10 Testing: Visual Review, Manual Testing with Screen Reader

72. 72 Frequency Asked Questions Q1: How to count the number of PDFs? A1:We will perform the assessment on PDF, which: a. Within the scope of assessment b. Published in the most recent 2 years Assessment will perform on the latest version for same types’ PDF, e.g. monthly newsletter Q2: What we can do if we do not have any software to make PDF files (e.g. leaflet) accessible? A2:You can put the content into an accessible text file and place next to the PDF file as alternative.

73. 73 Q3: How to make the PDF accessible? Good example – text description for images Image content is explicitly described in the PDF document Source from www.ha.org Text alternative is added for the image through ( 替代文字 ) Frequency Asked Questions 73

74. 74 Adopt logical reading order 1 23 Logical reading order Source from www.ha.org Frequency Asked Questions 74

75. 75 Good example – provide adjacent alternative format Content in HTML format provided side by sides Source from www.studenthealth.gov.hk Frequency Asked Questions 75

76. 76 Example –document with signature Accessible PDF Scanned Image + Inaccessible PDF + alternative version Accessible PDF Frequency Asked Questions 76

77. 77 Frequency Asked Questions Q4: How to enhance accessibility for multi-media contents? A4: ScenariosMinimum level under special circumstances New videoFollow judging criteria G09; May consider audio description Corporate videoFollow judging criteria G09 Video posted in social media platform Follow judging criteria G09 Guest speaker videoProvide presentation slides and/or a summary Video without sourceProvide a summary and/or script Video without scriptProvide a summary Third party videoProvide a description or summary

78. 78 Enrol Now! Deadline : 31 December 2014 www.webforall.gov.hk/scheme Web Accessibility Recognition Scheme 78

79. 79 Thank you! Web Accessibility Campaign Programme Office Email : wac@ogcio.gov.hkwac@ogcio.gov.hk Tel. no. : 2582 4606 Web Accessibility Recognition Scheme www.webforall.gov.hk/scheme Web Accessibility Campaign www.webforall.gov.hk 79