無障礙網頁其實是講網頁親和力
clifflu @ 交大 , 2012/12/06CC-BY-SA 3.0
網頁親和力 :: 講者簡介
• clifflu <clifflu[at]gmail,com>• Blog• Facebook• Plurk
2
投影片下載3
https://dl.dropbox.com/u/25419912/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81_20121206_%E4%BA%A4%E5%A4%A7.pptx
投影片下載4
Dropbox 下載 (MS Word, .pptx)
Slideshare http://tinyurl.com/afl38x4
課程目標
了解「網頁親和力」的概念與原則
5
玩弄名詞
• 無障礙• 可用性• 親和力
6
網頁要讓人能看懂
7
人?
• 一般人• 殘疾人• 搜尋引擎• 懶人、苦命人、壞人…
8
親和力的原則
• 妥善設計網頁內容,使目標用戶: 可感知 可操作 易理解 強固
9
人有五感
• 視覺• 聽覺• 觸 / 壓覺• 嗅覺• 味覺
• 平衡覺• 自體感覺• 溫覺• 痛覺• 時間
10
電腦輸出介面
• 聽覺:音效、語音• 視覺:
依特性:大小、顏色、字型、動作、裝飾
依介面:視窗、文字• 觸覺、力回饋
11
殘疾 : 視覺
• 全盲• 弱視、近視、散光• 色盲、色弱
• 閃光、畏光
12
殘疾 : 聽覺
• 聽力損失
http://en.wikipedia.org/wiki/File:Tonaud_w_norm.jpg
13
懶人
http://zh.wikipedia.org/wiki/File:Josh_Hamilton_Rangers.jpg
14
苦命人15
隱藏 Seo !?16
SEO 當如是17
搜尋引擎
• 對於嵌入式內容,搜尋引擎分析其連結文字 與 替代文字
• 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
18
其他不良使用情境
• 週邊吵雜、強光
• 缺少部份組件
• 軟體版本過舊
19
常見電腦輸入裝置
• 鍵盤、軌跡球• 滑鼠• 搖桿• 觸控 / 手寫板
20
殘疾 : 運動
• 肌力衰退• 非自主運動• 癱瘓• 斷肢
21
輔助輸入裝置 : 低科技
• 踏板 / 按鈕• 口啣棒 (Mouth stick)• 頭杖 (Head wand)
http://webaim.org/articles/motor/assistive
22
輔助輸入裝置 : 電腦軟體
• 螢幕小鍵盤• 滑鼠鍵
• 聲控、語音
23
輔助輸入裝置 : 高科技
• 呼吸控制• 肌電訊號• 視跡追蹤• 腦波
24
http://commons.wikimedia.org/wiki/File:Stephen_Hawking_050506.jpg
輔助科技 : 輸出
螢幕放大鏡
將文字作為中介 語音( Text-To-Speech)
螢幕閱讀軟體語音瀏覽器
點字顯示器
25
曾經
無障礙 = 純文字
26
純文字也可以很糟 : 表格排版27
純文字也可以很糟 : 表格排版28
現在
純文字能看嗎!
29
純文字能用嗎!30
網頁基礎
• 以正確標籤表達語意
• 分離內容、排版與功能
• Progressive Enhancement / Graceful Degradation
31
WCAG 1.0
• 公佈於 1999 年• 抽象描述親和力要素• 另有 WCAG10-TECHS 描述施行
與驗證細節• 共計 14 條準則 (guideline) ,
65 項檢核要點 (checkpoint)
32
WCAG 2.0
• 公佈於 2008 年底• 減低標準對科技的依存度• 各國準則仍以 WCAG 1.0 為主
33
台灣34
2002 年通過無障礙網頁相關規範基於 WCAG 1.0 / WebXact
公部門與殘障福利機構需在 2008 年通過 Level A 驗證
台灣35
WCAG 2.0 原則
可感知 Perceivable 可操作 Operable 易理解 Understandable 強固 Robust
36
WCAG 2.0 分級
A AA AAA
37
WCAG 2.0 準則
• 原則 1 可感知: 準則 1.1 替代文字:
對於文字以外的內容,提供合理的替代文字
38
WCAG 2.0 準則
• 原則 1 可感知: 準則 1.2 時間媒體的替代文字:
為基於時間的媒體提供替代內容
39
WCAG 2.0 準則
• 原則 1 可感知: 準則 1.3 適應性:建立能以不同方式呈現,而不喪失資訊或結構的內容
40
WCAG 2.0 準則
• 原則 1 可感知: 準則 1.4 可辨識:
使用戶能輕易以視覺或聽覺判斷前後景的內容
41
WCAG 2.0 準則
• 原則 2 可操作: 準則 2.1 可以鍵盤操作:
能以鍵盤操作所有功能
42
WCAG 2.0 準則
• 原則 2 可操作: 準則 2.2 時間充分:給用戶足夠時間閱讀並使用內容
43
WCAG 2.0 準則
• 原則 2 可操作: 準則 2.3 癲癇:
不以會誘發癲癇的方式設計內容
44
WCAG 2.0 準則
• 原則 2 可操作: 準則 2.4 可導覽:提供幫助用戶瀏覽、找尋內容、確定自身位置的方法
45
WCAG 2.0 準則
• 原則 3 易理解: 準則 3.1 可讀:
文字訊息需可讀並易理解
46
WCAG 2.0 準則
• 原則 3 易理解: 準則 3.2 可預測:
網頁的呈現與操作需可預測
47
WCAG 2.0 準則
• 原則 3 易理解: 準則 3.3 輸入協助:協助用戶避免並更正錯誤
48
WCAG 2.0 準則
• 原則 4 強固: 準則 4.1 相容性:
對當前與未來的用戶代理與輔助科技提供最大相容性
49
台灣無障礙網頁標章50
標準啊 標準
Copyright W3C, All rights reserved, see http://www.w3.org/WAI/intro/components.php
52
給用戶代理的額外訊息
• <meta> <link>• Media Type• Open Graph (Facebook) 與 Twitter
Cards• HTML5 tags (nav, article, section,
aside, …)• Microformats
53
網頁
HTML
CSS
DOM Tree
Render Tree
Display
http://taligarsiel.com/Projects/howbrowserswork1.htm
54
網頁應用程式
HTML
CSS
DOM Tree
Render Tree
Display
http://taligarsiel.com/Projects/howbrowserswork1.htm
55
JSUser Input
WAI-ARIA
所有元素可有 tabindex 屬性,便於鍵盤導覽
以 role 等屬性,描述元件功能與狀態
56
WAI-ARIA Roles57
article banner complementary main navigation scrollbar search
…
WAI-ARIA scrollbar58
aria-controls aria-orientation
[vertical|horizontal] aria-valuemax aria-valuemin aria-valuenow
網頁親和力檢測工具• 線上
• ATRC• WAVE
• 單機• CSE HTML Validator• FreeGo• SortSite
• 線上 + 單機• Truwex Online 2.0• Total Validator
59
網頁親和力 p. 14-36
現實案例 : 連結與格式的考量60
Dropbox 下載
Slideshare http://tinyurl.com/afl38x4
現實案例 : 用戶代理的能力61
lynx 純文字 不支援 js
NonVisual Desktop Access (NVDA) 附加於桌面系統
內容限制
• 科技日新月異• 標準每天在改
• 體貼的心 沒有極限
62
參考資料與授權 本投影片內容除非特別聲明,皆以 CC-BY-SA 3.0 ,或其後繼條款授權;引用資料在與該條款不相容的前提下,以原始資料授權為準。
• 篇章 Dive Into Accessibility
打造完美網頁親和力• 標準
WCAG 大陸簡中翻譯
WAI-ARIA Introduction to WAI-ARIA by othree
• 單位 Open Foundry
Jedi’s (林克寰) blog
63
64
Questions ?
Top Related