1. 1 香港盲人輔導會 訊息無障礙中心 31/8/2007 地址 : 九龍深水埗南昌街 248 號西翼二樓 電話 : 2778 8332 內線 322 以民為本，傷健共融 – " 香港政府一站通 " 經驗分享會

2. 2 What is web accessibility For people: They may not be able to see, hear, move, or may not be able to process some types of information easily or at all. They may have difficulty reading or comprehending text. They may not have or be able to use a keyboard or mouse. They may have a text-only screen, a small screen, or a slow Internet connection. They may not speak or understand fluently the language in which the document is written. They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.). They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

3. 3 Web Content Accessibility Guidelines (WCAG) 1.0 http://www.w3.org/TR/WCAG10/ Priorities [Priority 1] = A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. [Priority 2] = A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. [Priority 3] = A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents. Conformance Conformance Level "A": all Priority 1 checkpoints are satisfied; Conformance Level "Double-A": all Priority 1 and 2 checkpoints are satisfied; Conformance Level "Triple-A": all Priority 1, 2, and 3 checkpoints are satisfied;

4. 4 Guidelines Guideline 1. Provide equivalent alternatives to auditory and visual content. Guideline 2. Don't rely on color alone. Guideline 3. Use markup and style sheets and do so properly. Guideline 4. Clarify natural language usage Guideline 5. Create tables that transform gracefully. Guideline 6. Ensure that pages featuring new technologies transform gracefully. Guideline 7. Ensure user control of time-sensitive content changes.

5. 5 Guideline 8. Ensure direct accessibility of embedded user interfaces. Guideline 9. Design for device-independence.Guideline 10. Guideline 10. Use interim solutions. Guideline 11. Use W3C technologies and guidelines. Guideline 12. Provide context and orientation information. Guideline 13. Provide clear navigation mechanisms. Guideline 14. Ensure that documents are clear and simple. Guidelines

6. 6 Screen reader: JAWS - comerical, advance function (freedomscientific.com, kanhan.com) NVDA - open source, basic funcion (nvda-project.org) Windows Light - free, basic function (retina.org.hk) Magnifier ZoomText - comerical, advance function (aisquared.com) iZoom - free, basic function (issist.com) DesktopZoom (users.telenet.be/littlegems/MySoft/DesktopZoom/Index.html) Screen reader and screen magnification software

7. 7 Common problems and solution Text Equivalents Color contrast Embedded user interface clear navigation mechanisms.

8. 8 Text Equivalents

9. 9 No text description for all images 地下鐵路

10. 10 MTR 表有 5 列 和 4 行 chi/t_signaturechi/t_vischi/t_divchi/t_conchi/t_divchi/t_sit chi/t_divchi/t_engchi/t_mtrcb 登入名稱 密碼 忘記密碼？ chi/b_go1 chi/t_bar chi/t_edgechi/t_shadowtile 表完 common/blank undefinedundefinedundefinedundefined undefinedundefinedundefined undefined train/introtrain/ae_introtrain/facilities stationshop/stationshop_cjplanner/cplanner_index club/indexeshop/eshop_c service/service_main_cimages/thematic_merger_c images/5highlights_c 用 800x600 解像度及 Internet Explorer 5.0/ Netscape 6.0 或以上版本覽可得更佳效果。 本網站內包含香港特別中文字，我們建議使用者下載 「香港增補字符集」 images/jplannermessageimages/from Result of Screen Reader

11. 11 -- 請選擇 -- images/to -- 請選擇 -- chi/b_arrow 或使用 chi/b_advsearchimages/bn_touristinfo_cmtr shopping centreimage commrailway/commrailway_main_c images/bn_safety2004art in mtr 重要告示使用條款私隱政策地下鐵路附例 Copyright © 2006 MTR Corporation. 版權所有 不得轉載 bestso2007/bestso2007_chomepage/whatsmore_c ride5_kitty07/ride5_kitty07_cael/index mtrshopskeroro07/mtrshopskeroro07_c Result of Screen Reader

12. 12 National Federation of the Blind Photo description

13. 13 Color contrast

14. 14 Not enough color contrast in left menu 太空館 -> 研究資源

15. 15 Too Colorful for VI users to read 香港科學館

16. 16 Embedded user interfaces

17. 17 Unable to read 中國文化研究院 Flash content, it makes the page nearly unable to browse with screen reader

18. 18 topIndex 圖文框 中國文化研究院 2007 年 8 月 28 日 搜尋 : images/v2_ico_goimages/spacerimages/spacerimages/spacer images/spacer 簡體 topIndex 圖文框完 mainIndex 圖文框 中國文化研究院 表有 2 列 和 6 行 Macromedia Flash Movie Start Macromedia Flash Movie end Macromedia Flash Movie Start Macromedia Flash Movie end 私隱政策聲明 版權聲明 使用條款 免責聲明 (c) 2005 中國文化研究院版權所有 Result of Screen Reader

19. 19 clear navigation mechanisms.

20. 20 Navigation bar Page layaout

21. 21 Use of heading Other elements enhancing user friendliness

22. 22 Web Accessibility Initiative (WAI) - home page Link list function done by screen reader

23. 23 Start Here (H2) Get involved (H3) In your area (H3) More info (H2) Quiz (H3) Your Stories (H3) Use of different level of heading

24. 24 Skip to main content Other elements enhancing user friendliness

25. 25 Skip to main content

26. 26 Skip to main content HTML 跳到主要內容 CSS.hidden width:1px; height:1px;

27. 27 Extra description Other elements enhancing user friendliness

28. 28 Extra description in text link

29. 29 Changing text size, colors and format Other elements enhancing user friendliness

30. 30 Change text size, colors and format

31. 31 Change text size, colors and format

32. 32 Change text size, colors and format

33. 33 Change text size, colors and format

34. 34 Evaluation 1. Using tools WAVE 3.0 Web Accessibility Tool (WebAIM) http://www.wave.webaim.org/index.jsp WEBXACT (Watchfire Corporation) http://webxact.watchfire.com/ A-Prompt (Accessibility Prompt) (University of Toronto) http://aprompt.snow.utoronto.ca/overview.html ATRC Web Accessibility Checker (University of Toronto) http://checker.atrc.utoronto.ca/ 2. Users Participation - including them throughout the development process to complete sample tasks on prototypes, and discussing accessibility issues with them.

35. 35 Conclusion 4U Users Participation Users Feedback Users Testing Understanding Users needs & universal Design 2C – Communication and Collabration

36. 36 地址 : 九龍深水埗南昌街 248 號西翼二樓 電話 : 2778 8332 內線 322 視障人士網絡共享入門網站 : netshare.hk 電訊數碼視障人士圖書館 : http://219.76.203.76/HKSB/web_index.php 網址 : www.hksb.org.hk 電郵 :miac@hksb.org.hk 香港盲人輔導會

37. 37 Thank you! 介紹到此為止 多謝您的收看