Web Accessibility Implementation Office of the Government Chief

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

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

Web Accessibility Recognition Scheme Awards 2015 Stream Award No. of Judging Accreditation Criteria Logo Silver 14 Gold 10 Silver 11 Gold 7 New Criteria of Silver Award Website Mobile 3 3

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

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

Web Accessibility Recognition Scheme 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 6 6

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

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

Web Accessibility Recognition Scheme Assessment Area – Mobile App Stream 1. 2. 3. 4. Main screen One-time Setup Wizard or Welcome / Settings / About Us screen(s) All first-level screens Three core business functions nominated by entrants Screen 00 Restaurant Main Screen 01 One-time Setup Wizard/Welcome Screen 11 Online Food Menu Screen 21 Members’ Corner Screen 31 Latest Promotion Screen 41 Shop Location Screen 12 Category Selection Screen 22 Join us Registration Screen 32 Promotion Dishes Details Screen 42 Shop List Screen 13 Food listing Screen 23 Confirmation Screen 43 Shop Address Screen 51 Settings Screen 61 About Us Mock-up mobile app hierarchy 9 9

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

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

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

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 # # gold criterion last year 13 13

Judging Criteria – Mobile App 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 14 14

Web Accessibility Recognition Scheme Timeline Stage Key Tasks 1. Application 2. Assessment and Enhancement 3. Technical Workshops 4. Re-assessment 5. Voting for Most Favourite Websites / Mobile App Awards 6. Awards Presentation Period Now until 31 December 2014 Now until 30 January 2015 3 November 2014 – 30 January 2015 2 January 2015 – 20 February 2015 2 March 2015 – 23 March 2015 April 2015 15 15

Web Accessibility Recognition Scheme Useful Reference www. webforall. gov. hk Webforall Portal • 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 16 16

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

Web Accessibility Recognition Scheme Useful Reference Web Accessibility Handbook • 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 www. webforall. gov. hk/en/wahandbook 18 18

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

Web Accessibility Recognition Scheme 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 • Workshop Date Time 1 19 Dec 2014 (Mobile App Stream) 2: 30 – 4: 00 pm 2 29 Dec 2014 2: 30 – 4: 00 am 3 6 January 2015 2: 30 – 4: 00 am More details, please refer to www. webforall. gov. hk/workshop 20 20

Web Accessibility Recognition Scheme 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) • Colour. Zilla (https: //addons. mozilla. org/en-us/firefox/addon/colorzilla/) • Vischeck (http: //www. vischeck. com/) 21 21

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

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

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

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

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

3. Keyboard Interface Silver 03 • 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 27

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

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

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

5. Popup Windows Silver 05 • 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 31

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

6. Links Silver 06 • 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 33

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

Silver 07 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 35

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

8. Website Structure and Content Silver 08 • Use heading mark-up (h 1. . h 6) to identify headings in the content. Missing heading structure Provide semantic code for headings (h 1, h 2, h 3) in the content 37 37

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

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

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

Silver 10 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 41

10. Meaningful Sequence 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 42 42

Silver 11 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 43

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

Silver 12 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 45

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

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

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

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

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

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

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

Gold 02 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 53

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

17. Skip Repetitive Blocks Gold 03 • 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 55

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

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

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

19. User-initiated Auto-updating Gold 05 • 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 59

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

Gold 06 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 61

20. Time-limited Function 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 62 62

21. Sufficient Colour Contrast Gold 07 • 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 63

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

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

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

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

Gold 09 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 68

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

Gold 10 24. Table Header and Data • Provide meaningful title, summary or description for table header as well as data Monday to Friday General Enquiry 2582 4606 8: 45 am to 12: 45 pm 1: 45 pm to 5: 45 pm Web Accessibility 2582 6079 9: 00 am to 1: 00 pm 2: 00 pm to 5: 30 pm No header and title for the table Enquiry Information Hotline Telephone Office Hours General Enquiry 2582 4606 8: 45 am to 12: 45 pm 1: 45 pm to 5: 45 pm Web Accessibility 2582 6079 9: 00 am to 1: 00 pm 2: 00 pm to 5: 30 pm Provide meaningful header and column title for the table 70 70

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

Frequency Asked Questions Q 1: How to count the number of PDFs? A 1: 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 Q 2: What we can do if we do not have any software to make PDF files (e. g. leaflet) accessible? A 2: You can put the content into an accessible text file and place next to the PDF file as alternative. 72 72

Frequency Asked Questions Q 3: 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 (替代文字) 73 73

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

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

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

Frequency Asked Questions Q 4: How to enhance accessibility for multi-media contents? A 4: Scenarios Minimum level under special circumstances New video Follow judging criteria G 09; May consider audio description Corporate video Follow judging criteria G 09 Video posted in social media platform Follow judging criteria G 09 Guest speaker video Provide presentation slides and/or a summary Video without source Provide a summary and/or script Video without script Provide a summary Third party video Provide a description or summary 77 77

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

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