無障礙網頁其實是講網頁親和力

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

台灣無障礙網頁標章51

• 由此下載

標準啊 標準

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 ?