1

香港盲人輔導會訊息無障礙中心

31/8/2007地址 : 九龍深水埗南昌街 248 號西翼二樓

電話 : 2778 8332 內線 322

以民為本，傷健共融 –

" 香港政府一站通 " 經驗分享會

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

Web Content Accessibility Guidelines (WCAG) 1.0http://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

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

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

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

Common problems and solution

Text Equivalents Color contrast Embedded user interface clear navigation mechanisms.

8

Text Equivalents

9

No text description for all images地下鐵路

10

MTR表有 5 列 和 4 行chi/t_signature chi/t_vis chi/t_div chi/t_con chi/t_div chi/t_sit chi/t_div chi/t_eng chi/t_mtrcb登入名稱密碼忘記密碼？chi/b_go1 chi/t_bar chi/t_edge chi/t_shadowtile表完common/blankundefined undefined undefined undefined

undefined undefined undefined undefinedtrain/intro train/ae_intro train/facilities

stationshop/stationshop_c jplanner/cplanner_indexclub/index eshop/eshop_c servi

ce/service_main_c images/thematic_merger_c images/5highlights_c用 800x600 解像度及 Internet Explorer 5.0/ Netscape 6.0 或以上版本覽可得更佳效果。 本網站內包含香港特別中文字，我們建議使用者下載「香港增補字符集」images/jplannermessage images/from

Result of Screen Reader

11

-- 請選擇 -- images/to -- 請選擇 -- chi/b_arrow或使用chi/b_advsearch images/bn_touristinfo_c

mtr shopping centre image commrailway/commrailway_main_c

images/bn_safety2004 art in mtr重要告示 使用條款 私隱政策 地下鐵路附例Copyright © 2006 MTR Corporation. 版權所有 不得轉載bestso2007/bestso2007_c homepage/whatsmore_c

ride5_kitty07/ride5_kitty07_c ael/index mtrshopskeroro07/mtrshopskeroro07_c

Result of Screen Reader

12

National Federation of the Blind

Photo description

13

Color contrast

14

Not enough color contrast in left menu

太空館 -> 研究資源

15

Too Colorful for VI users to read

香港科學館

16

Embedded user interfaces

17

Unable to read中國文化研究院 Flash content, it makes the page nearly unable to br

owse with screen reader

18

topIndex 圖文框中國文化研究院2007 年 8 月 28 日搜尋 : images/v2_ico_go images/spacer images/spacer images/spacer

images/spacer簡體topIndex 圖文框完

mainIndex 圖文框中國文化研究院

表有 2 列 和 6 行Macromedia Flash Movie StartMacromedia Flash Movie end Macromedia Flash Movie StartMacromedia Flash Movie end

私隱政策聲明版權聲明使用條款免責聲明(c) 2005 中國文化研究院版權所有

Result of Screen Reader

19

clear navigation mechanisms.

20

Navigation bar Page layaout

21

Use o f heading

Other elements enhancing user friendliness

22

<h2 class=r><a href="http://www.w3.org/WAI/" class=l onmousedown="return clk(this.href,'','','res','1','')"><font color=CC0033>Web Accessibility</font> Initiative (WAI) - home page</a></h2>

Link list function done by screen reader

23Start Here (H2) Get involved (H3) In your area (H3)

More info (H2) Quiz (H3) Your Stories (H3)

Use of different level of heading

24

Skip to main content

Other elements enhancing user friendliness

25

Skip to main content

26

Skip to main content HTML

<div class="hidden"><a href="#content"> 跳到主要內容 </a></div>

CSS .hidden width:1px; height:1px;

27

Extra description

Other elements enhancing user friendliness

28

Extra description in text link

29

Changing text size, colors and format

Other elements enhancing user friendliness

30

Change text size, colors and format

31

Change text size, colors and format

32

Change text size, colors and format

33

Change text size, colors and format

34

Evaluation1. Using toolsWAVE 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, anddiscussing accessibility issues with them.

35

Conclusion

4U Users Participation Users Feedback Users Testing Understanding Users needs & universa

l Design 2C – Communication and Collabration

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

Thank you!

介紹到此為止 多謝您的收看