本文件介紹了無障礙網頁設計的概念與原則，強調應提供可感知、可操作、易理解且強固的網頁內容。內容涵蓋了無障礙標準（如WCAG 1.0與2.0）的準則，指出對於不同殘疾用戶的設計考慮。最後討論了各種輔助科技及工具，以促進網頁的可訪問性和使用體驗。

1. 無障礙網頁 其實是講網頁親和力
CC-BY-SA 3.0 clifflu @ 交大, 2012/12/06

2. 網頁親和力 :: 講者簡介
2

3. 投影片下載
3

4. 投影片下載
4
 Dropbox  Slideshare
 下載 (MS Word, .pptx)  http://tinyurl.com/afl38x4

5. 課程目標
5
了解「網頁親和力」
的概念與原則

6. 玩弄名詞
6
• 無障礙
• 可用性
• 親和力

7. 7
網頁要讓
人能看懂

8. 人？
8
• 一般人
• 殘疾人
• 搜尋引擎
• 懶人、苦命人、壞人…

9. 親和力的原則
9
• 妥善設計網頁內容，使目標用戶：
 可感知
 可操作
 易理解
 強固

10. 人有五感
10
• 視覺 • 平衡覺
• 聽覺 • 自體感覺
• 觸/壓覺 • 溫覺
• 嗅覺 • 痛覺
• 味覺 • 時間

11. 電腦輸出介面
11
• 聽覺：音效、語音
• 視覺：
 依特性：大小、顏色、字型、動作、
裝飾
 依介面：視窗、文字
• 觸覺、力回饋

12. 殘疾 : 視覺
12
• 全盲
• 弱視、近視、散光
• 色盲、色弱
• 閃光、畏光

15. 苦命人
15

16. 隱藏 Seo !?
16

17. SEO 當如是
17

18. 搜尋引擎
18
• 對於嵌入式內容，搜尋引擎分析其連
結文字 與 替代文字
• Google 不處理 js 產生的內容
 http://support.google.com/customsearch/bin/answer.py?hl=en&answer=72366
 http://searchengineland.com/google-can-now-execute-ajax-javascript-for-indexing-99518

19. 其他不良使用情境
19
• 週邊吵雜、強光
• 缺少部份組件
• 軟體版本過舊

20. 常見電腦輸入裝置
20
• 鍵盤、軌跡球
• 滑鼠
• 搖桿
• 觸控/手寫板

21. 殘疾 : 運動
21
• 肌力衰退
• 非自主運動
• 癱瘓
• 斷肢

22. 輔助輸入裝置 : 低科技
22
• 踏板/按鈕
• 口啣棒 (Mouth stick)
• 頭杖 (Head wand)
http://webaim.org/articles/motor/assistive

23. 輔助輸入裝置 : 電腦軟體
23
• 螢幕小鍵盤
• 滑鼠鍵
• 聲控、語音

24. 輔助輸入裝置 : 高科技
24
• 呼吸控制
• 肌電訊號
• 視跡追蹤
• 腦波
http://commons.wikimedia.org/wiki/File:Stephen_Hawking_050506.jpg

25. 輔助科技 : 輸出
25
 螢幕放大鏡
 將文字作為中介
 語音（Text-To-Speech)
螢幕閱讀軟體
語音瀏覽器
點字顯示器

26. 曾經
26
無障礙 = 純文字

27. 純文字也可以很糟 : 表格排版
27

28. 純文字也可以很糟 : 表格排版
28

29. 現在
29

30. 純文字能用嗎！
30

31. 網頁基礎
31
• 以正確標籤表達語意
• 分離內容、排版與功能
• Progressive Enhancement /
Graceful Degradation

32. WCAG 1.0
32
• 公佈於 1999 年
• 抽象描述親和力要素
• 另有 WCAG10-TECHS 描述施行與
驗證細節
• 共計 14 條準則 (guideline)，65 項檢
核要點 (checkpoint)

33. WCAG 2.0
33
• 公佈於 2008 年底
• 減低標準對科技的依存度
• 各國準則仍以 WCAG 1.0 為主

34. 台灣
34
 2002 年通過無障礙網頁相關規範
基於 WCAG 1.0 / WebXact
 公部門與殘障福利機構需在 2008 年
通過 Level A 驗證

35. 台灣
35

36. WCAG 2.0 原則
36
 可感知 Perceivable
 可操作 Operable
 易理解 Understandable
 強固 Robust

37. WCAG 2.0 分級
37
A
 AA
 AAA

38. WCAG 2.0 準則
38
• 原則 1 可感知：
 準則 1.1 替代文字：
對於文字以外的內容，提供合理的
替代文字

39. WCAG 2.0 準則
39
• 原則 1 可感知：
 準則 1.2 時間媒體的替代文字：
為基於時間的媒體提供替代內容

40. WCAG 2.0 準則
40
• 原則 1 可感知：
 準則 1.3 適應性：
建立能以不同方式呈現，而不喪失
資訊或結構的內容

41. WCAG 2.0 準則
41
• 原則 1 可感知：
 準則 1.4 可辨識：
使用戶能輕易以視覺或聽覺判斷前
後景的內容

42. WCAG 2.0 準則
42
• 原則 2 可操作：
 準則 2.1 可以鍵盤操作：
能以鍵盤操作所有功能

43. WCAG 2.0 準則
43
• 原則 2 可操作：
 準則 2.2 時間充分：
給用戶足夠時間閱讀並使用內容

44. WCAG 2.0 準則
44
• 原則 2 可操作：
 準則 2.3 癲癇：
不以會誘發癲癇的方式設計內容

45. WCAG 2.0 準則
45
• 原則 2 可操作：
 準則 2.4 可導覽：
提供幫助用戶瀏覽、找尋內容、確
定自身位置的方法

46. WCAG 2.0 準則
46
• 原則 3 易理解：
 準則 3.1 可讀：
文字訊息需可讀並易理解

47. WCAG 2.0 準則
47
• 原則 3 易理解：
 準則 3.2 可預測：
網頁的呈現與操作需可預測

48. WCAG 2.0 準則
48
• 原則 3 易理解：
 準則 3.3 輸入協助：
協助用戶避免並更正錯誤

49. WCAG 2.0 準則
49
• 原則 4 強固：
 準則 4.1 相容性：
對當前與未來的用戶代理與輔助科
技提供最大相容性

50. 台灣無障礙網頁標章
50

51. 台灣無障礙網頁標章
51
• 由此下載

52. 標準啊 標準
52
Copyright W3C, All rights reserved, see http://www.w3.org/WAI/intro/components.php

53. 給用戶代理的額外訊息
53
• <meta> <link>
• Media Type
• Open Graph (Facebook) 與 Twitter
Cards
• HTML5 tags (nav, article, section,
aside, …)
• Microformats

54. 網頁
54
CSS
HTML DOM Render
Tree Tree
Display
http://taligarsiel.com/Projects/howbrowserswork1.htm

55. 網頁應用程式
55
CSS
HTML DOM Render
Tree Tree
Display
JS
User
Input
http://taligarsiel.com/Projects/howbrowserswork1.htm

56. WAI-ARIA
56
 所有元素可有 tabindex 屬性，便於鍵
盤導覽
 以 role 等屬性，描述元件功能與狀態

57. WAI-ARIA Roles
57
 article
 banner
 complementary
 main
 navigation
 scrollbar
 search
…

58. WAI-ARIA scrollbar
58
 aria-controls
 aria-orientation
[vertical|horizontal]
 aria-valuemax
 aria-valuemin
 aria-valuenow

59. 網頁親和力檢測工具
59
• 線上
• ATRC
• WAVE
• 單機
• CSE HTML Validator
• FreeGo
• SortSite
• 線上 + 單機
• Truwex Online 2.0
• Total Validator
網頁親和力 p. 14-36

60. 現實案例 : 連結與格式的考量
60
 Dropbox  Slideshare
 下載  http://tinyurl.com/afl38x4

61. 現實案例 : 用戶代理的能力
61
 lynx
 純文字
 不支援 js
 NonVisual Desktop Access (NVDA)
 附加於桌面系統

62. 內容限制
62
• 科技日新月異
• 標準每天在改
• 體貼的心 沒有極限

63. 參考資料與授權
63
 本投影片內容除非特別聲明，皆以 CC-BY-SA 3.0 ，
或其後繼條款授權；
引用資料在與該條款不相容的前提下，以原始資料
授權為準。
• 篇章
• 標準
by othree
• 單位

64. 64