Transcript Web Accessibility

Web Accessibility
謝寶煖
台灣大學圖書資訊學系
[email protected]
Disabilities
 身心障礙者
 民國86年4月公佈的「身心障礙者保護法」（簡稱身保
法），以「身心障礙者」取代「殘障者」
一是要突顯「障礙」可以是來自「個人因生理或心
理因素」，也可能是來自「社會的限制」
二是要擴大殘障福利的適用範圍，讓一些確實有醫
療、教育、福利等需求的人，可以納入被照顧的範
圍內
身心障礙者所碰到的障礙，來自生理或心理原因，
更是來自社會環境設計的不良，以及人們面對身心
障礙者的態度與反應的不友善
網路無障礙空間
「誰是身心障礙者」 2004年6月，內政部資料
http://disable.yam.com/understand/introduce.htm
領得身心障礙手冊人數
 按內政部內政統計通報97年第6週 所載，截至
96年底止，依據「身心障礙者權益保障法」
領有身心障礙手冊者計有102萬760人
 較95年底增加4.05％
 身心障礙人口占總人口之比率為4.45％
 較95年底增加0.16個百分點
 比率逐年上升
身心障礙e能網
http://www.enable.org.tw/spk/detail.php?id=105
領得身心障礙手冊人數
 行政院主計處國情統計通報 99/12/3
 12月3日為國際身心障礙者日
 99年9月底國內領有身心障礙手冊者107.1萬人，
較上年同月底增加1.0萬人（+1.0％）
http://www.stat.gov.tw/public/Data/01231541271.pdf
領得身心障礙手冊人數
身心障礙人口比率
 性別
 男性為5.09％，高於女性之3.79％
 年齡
 我國身心障礙者居中高年齡
為最多
 中高年齡者的特徵是勞動力減少，身體狀況不佳
身心障礙類別
 以肢體障礙者40萬2,983人占39.48％最多
 聽覺機能障礙者10萬8,856人占10.66％次之
 重要器官失去功能者10萬4,282人占10.22％第3
 餘依序為多重障礙者、慢性精神病患者、智能障
礙者、視覺障礙者、失智症者、聲音或語言機能
障礙者及自閉症者等
 各障礙類別人口數與95年底比較，以自閉症者增
加16.52％最高，失智症者增加15.89％次之，重
要器官失去功能者增加7.93％居第3
身心障礙等級
 96年底身心障礙人數
 以輕度障礙者36萬5,070人占35.76％最多
 中度障礙者35萬1,966人占34.48％次之
 重度障礙者18萬8,130人占18.43％居第3
 極重度障礙者11萬5,594人僅占11.32％
 與上年底比較，則以輕度障礙者增加5.90％增
幅最大，極重度障礙者增幅5.20％次之
大專校院身心障礙學生統計
 教育部96學年度下學期大專校院身心障礙學
生統計概況顯示，台灣地區就讀大專院校的
身心障礙學生總數為8,796人，約佔大專院校
學生總人數0.7%
 教育部特殊教育通報網，2008
http://www.set.edu.tw/sta2/default.asp
Web Accessibility
 在網路空間中，障礙（disabilities）的定義需
要加以擴大
 坐輪椅是肢障，但對網路取用不形成障礙
 只要是使用電腦的輸出輸入裝置有困難的，
都算是網路障礙
根據Nielsen(2000)的估計，光是美國這群人口就
有3千萬人，是不容忽略的顧客
這群顧客的忠誠度高
網頁障礙
 符號（notation）
 圖檔
 表格
 多媒體（multimedia）
符號
 複雜的數學或科學符號
 未提供替代呈現方式
 無法讓點字系統轉換軟體、語音報讀軟體正確讀
取
造成訊息不完整
圖檔
 包含在網頁中所有圖像
 圖片（image）
 影像地圖（image
maps）
 圖形（figures）
 其他圖像（other
graphical entities）
 視覺障礙者很可能會利用其他的輸出方式（如螢
幕朗讀軟體），若是圖檔未包含文字描述，即成
為網頁障礙，屬於網頁障礙的10大錯誤之ㄧ
表
 表格
 許多視覺障礙者使用螢幕閱讀軟體上網，表格會造成使
用上的困擾，因為螢幕閱讀軟體只會由左至右一行一行
閱讀資訊，無法辨識網頁中的表格，也無法利用表格說
明資訊
 表單
 若是網頁設計者利用表單而非利用HTML語法來寫網
頁，就會造成網頁障礙。表單的典型障礙之一就是線上
輸入資料，對於視覺障礙者而言，輸入資訊後要再做修
改是非常困難的
 框架/頁框（frame）
 使用框架可讓網頁設計者更易以多樣化窗格呈現靜態資
訊，但框架卻將人類標準閱讀模式切割開來，對視覺障
礙者而言，不僅在導覽上有困難，更造成理解上的問題
多媒體
 多媒體或是任何發出聲音的東西，對於聽覺
障礙者而言，可能會有無法聽到的問題
文字
 無法利用手操作滑鼠的肢體障礙者，可能會
使用頭杖（head pointer）或嘴棒（mouth
sticks）等輔助設備，因此網頁操作不應造成
使用上的障礙，例如：文字過小造成點選上
的不便
顏色
 視障者的純文字瀏覽器（Lynx）無法區分背
景顏色，因此最好不要以顏色來辨別資訊
其他的網頁障礙
 包含程式、彈跳視窗、特殊效果等
 身心障礙者可能無法辨別與使用網頁中的程
式，如：Java Scripts、VB Scripts，這些程
式除了需要安裝軟體外，下載也需花費時間。
 彈跳開啟的新視窗，由於未適時提示，因此
瀏覽網頁的過程會失去焦點。
 網頁的動態效果，如跑馬燈、閃爍、即時更
新資料等，都可能造成使用上的障礙
 網頁具視覺聽覺線索、雜亂的版面呈現、必
須使用滑鼠或鍵盤、路徑不清楚等
Disabilities
 身障者
 老年人
 Visual Disabilities
 Auditory Disabilities
 Speech Disabilities
 Motor Disabilities
 Cognitive Disabilities
Web Accessibility Initiative, WAI
Web Accessibility Initiative
http://www.w3.org/WAI/Policy/
Library of Congress
Library of Congress
無障礙網路空間服務網
規範
http://enable.nat.gov.tw/index.jsp
等級標章重要性
 第一優先等級(A)

網頁開發時必須滿足這個檢測碼
否則身心障礙者無法讀取網頁資訊
 第二優先等級(AA)

網頁開發時應該滿足這個檢測碼
否則身心障礙者讀取網頁資訊有困難
 第三優先等級(AAA)

網頁開發時應該可以納入這個檢測碼的要求
否則身心障礙者有可能有困難讀取網頁資訊
 A+等級


通過第一優先等級無障礙設計
具有網頁導盲磚搭配鍵盤快速鍵(Accesskey)、網站導覽(Sitemap)功能
網頁瀏覽工具具有使用鍵盤設計等三種便利使用者瀏覽網頁的功能
十四條規範
規範一：對於聽覺及視覺的內容要提供相等的
替代文字內容
規範二：不要單獨靠色彩來提供特殊資訊
規範三：適當地使用標記語言和樣式表單
規範四：闡明自然語言的使用
規範五：建立編排良好的表格
規範六：確保網頁能在新科技下良好地呈現
規範七：確保使用者能處理時間敏感內容的改
http://enable.nat.gov.tw/doc1.jsp
變
十四條規範
規範八：確保嵌入式使用者介面具有直接可及
性
規範九：設計裝置獨立網頁
規範十：使用過渡的解決方案
規範十一：使用國際與國內官方訂定的技術和
規範
規範十二：提供內容導引資訊
規範十三：提供清楚的瀏覽網站機制
http://enable.nat.gov.tw/doc1.jsp
規範十四：確保簡單清楚的網頁內容
規範
 http://enable.nat.gov.tw/doc.jsp
 十四條規範
http://enable.nat.gov.tw/doc1.jsp
 九十條檢測碼
http://enable.nat.gov.tw/doc2.jsp
 無障礙網路空間服務將在98年6月1日轉移至政府
網站營運交流平台
http://enable.nat.gov.tw/check.jsp
十四項規範錯誤分析 PL
排
名
1
2
3
4
檢測 內容
碼
1.1 圖片需要加上替代文字說明
12.1 需要定義每個頁框的名稱
1.3 對於object提供替代文字說明
5
3.5 要使用相對尺寸(如%)而非絕對尺寸(如像
素)
1.5 影像地圖區域需要加上替代文字說明
6
5.5 表格須提供表格摘要說明(如summary屬性)
錯誤次數
47
22
12
10
7
6
十四項規範錯誤分析 PL
7 12.6 在表單控制項上，以label標籤提示資訊
5
8 10.6 勿單以空白間隔分開相連之超連結
4
9 3.3 在doctype標籤中，使用標準規範的敘述以識別
HTML版本類型 3
10
9.3
確保事件的啟發不要求一定得使用滑鼠
3
11
1.4
對於表單中的圖形按鍵提供替代文字說明
2
12
10.5 在網頁文字輸入區中須有預設值
2
13
1.8 提供longdesc以外的描述性超連結(如D超連結)，
來描述longdesc的內容 1
14
3.6
適當使用巢狀標題呈現文件結構
1
15
7.6
不要自動轉移網頁的網址1
十四項規範錯誤分析 AL
排名
1
2
檢測 內容
碼
1.1 圖片需要加上替代文字說明
12.1 需要定義每個頁框的名稱
3
1.3 對於object提供替代文字說明
4
1.5 影像地圖區域需要加上替代文字說明
5
3.5 要使用相對尺寸(如%)而非絕對尺寸(如
像素)
6
7
3.3 在doctype標籤中，使用標準規範的敘述
以識別HTML版本類型
12.6 在表單控制項上，以label標籤提示資訊
錯誤次數
129
75
66
35
18
15
12
十四項規範錯誤分析 AL
8 1.4 對於表單中的圖形按鍵提供替代文字說明
7
9 7.6 不要自動轉移網頁的網址
7
109.3 確保事件的啟發不要求一定得使用滑鼠
6
1113.5 為你的網頁加上標題 6
127.3 避免使用marquee標籤移動文字
4
131.8 提供longdesc以外的描述性超連結(如D超連結)，來描述
longdesc的內容
3
143.6 適當使用巢狀標題呈現文件結構
2
155.5 表格須提供表格摘要說明(如summary屬性) 2
166.2 頁框連結必須是HTML檔案 2
1710.6 勿單以空白間隔分開相連之超連結 2
181.2 對於applet提供替代文字說明 1
1910.5 在網頁文字輸入區中須有預設值
1
輔助工具
螢幕朗讀軟體
ExtraSpeaker
 一個免費的真人語音朗讀軟體
 本軟體乃是採用微軟最新的 Microsoft Text-
to-Speech 語音合成技術，其語音技術不但模
擬真人發音，並且會自動調整為英文句子的
自然語調（例如疑問句或驚嘆句），也會自
動以英文單字的常用音標來發音，同時提供
英文嘴型圖示
JAWS—唸給您聽HTML
唸HTML給您聽
http://www.freedomscientific.com/fs_downloads/jaws.asp
Visual Disabilities
 視障上網環境
 http://enable.nat.gov.tw/elearning/elearning1.jsp
 全盲
 弱視
 紅綠色盲
 視力障礙
 老人
 視盲
 拿 ALVA 搭配全螢幕
DOS 視窗裡的 Lynx 純文字
瀏覽器使用。他在家裡讀這些網頁的方法，就跟
他工作時的作法一樣：用布拉耶點字，一次讀一
列。他討厭螢幕朗讀軟體，就算有一套也不想聽。
 紅綠色盲，沒有辦法分辨紅色跟綠色（某些
紅色看起來會非常深，近似於黑色）。
 他所有的衣服都標上字母來區分顏色，像是
用 R 代表紅色、 DG 代表深綠等等。他的女
朋友設計了一套搭配組合，讓他知道哪些衣
服可以搭配在一起。他按照這些字母的指示
來穿著，也如此表達；但他不能分辨其間的
差異。
 Links 的純文字瀏覽器
 Opera 瀏覽器
 可以很方便地開啟或關閉圖片選項
 老花
歲 的Lillian會把報紙攤開在餐桌上，打開天花
板上的 100 瓦大燈，用放大鏡慢慢地讀
 她把 Internet Explorer 裡的字型調到「最大」，
好讓她女兒網誌的字大到能被她閱讀
 但是為什麼 CNN.com 的字就沒辦法調得更大？
 54
老花
 讓web browser可以放大字體
 網頁不要指示絕對字體大小，而應用相對字體大
小
 使用樣式表（style sheets）時，不要設定font-size
為特定點數或pixels,而是設定percentage
 網頁測試在10、12、14點字體時都能良好顯示
 18-24點放大時，亦能維持相當程度的設計，不致
走樣
弱視
 提高前景與背景的顏色對比
 連結文字與底色的對比

 黑色底＋深色系的文字 
 白色底＋淡色系的文字
 避免使用複雜的背景，以增加可讀性
 選項避免圖示
螢幕朗讀軟體
 設定 DOCTYPE
 因為screen reader 唸的是HTML
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 辨識語文
 <html lang=“zh-TW”> 正體中文
 <html lang=“en”>
英文
 同時也方便SE偵測語系
搜尋引擎是全盲的
 辨識內容結構
 Textual pages方便screen reader唸網頁內容
 網頁標題＜title＞
＜/title＞
 長網頁視障朋友不易掃瞄找到有興趣的部份
善用HTML 標示標題結構：
 ＜H1＞最高層次的標題
＜H2＞H1內的主要內容
＜H3＞最低層次，或分項資訊
 screen reader會以音量提示大標題，視障朋友可以
透過捉到網頁結構，快速跳過沒興趣的部份。
 使用CSS（樣式表）編排版面
 在純文字瀏覽器和螢幕朗讀軟體中，會依一定順序重
排內容，先顯示主要內文，再顯示導覽列
 SE加權網頁內容
 連結不要開啟新視窗
 提供取代圖片的文字
 <img src="images/top01.jpg" width="127"
height="95" alt="行政院研考會無障礙網路空間服務
網">
 Alt文字讓網頁不顯示圖片，也可以懂
Auditory Disabilities
 Web是高度視覺化的媒體，幾乎沒有聲音也
不影響網頁設計
 Multimedia是趨勢，未來可能會有所不同
 關注聽障朋友的需求
 Spoken
audio clips應該提供文字稿
 Video應該有字幕（subtitles）
 SE和非母語訪客，同時受益
定位點磚設置
 導盲磚－無障礙空間
 網頁導盲磚－無障礙網路空間
 網頁導盲磚格式
 :::左側區塊
 :::中央區塊
 :::右側區塊
 網頁導盲磚語法
 <a accesskey=”L” href=”sitemap.htm”>:::左側區塊</a>
 <a accesskey=”C” href=”sitemap.htm”>:::中央區塊</a>
 <a accesskey=”R” href=”sitemap.htm”>:::右側區塊</a>
 網頁導盲磚美化
 將字形設為最小字
 字的顏色和底色相同
網頁導盲磚設置範例
網頁導盲磚美化
http://elib.batol.net/exam.php
Speech Disabilities
 Keyboard, mouse不好用
 Voice-activated user interfaces
 不能是唯一的互動介面
 中風
 沒辦法使用滑鼠
 延伸的小方向鍵盤
只能靠方向鍵、跳格鍵
(tab key)
一堆令人暈眩的快速鍵組合
 跑 Red Hat Linux 作業系統
 用 Mozilla 瀏覽網站
 用 Evolution 閱讀信件
Motor Disabilities
 巧緻動作障礙
 無法用滑鼠
 無法同時按雙鍵或三鍵
 網頁設計避免精確細微的滑鼠定位
 下拉式選單
 展開式表單
 用按鍵操作
 輔助設備
 方向鍵盤
Cognitive Disabilities
 以前上網是念書人做的事，現在是全民運動
 考慮不同教育程度的閱讀能力
 報紙
 雜誌
 highly intelligent but have special concerns
 網頁設計之關照尚未受到重視
 Spatial reasoning skills
 Short-term memory capacity
網頁設計多為年輕人，但老年人也上網
複雜的URL、、、
Cognitive Disabilities
 Dyslexia（失讀症）
 失讀症是一種在處理文字上有困難的疾病。閱讀
困難只是失讀症其中的一項症狀。
 失讀者知道那東西是什麼，但是沒辦法將物體搭
配上正確的名稱
 沒有辦法閱讀長篇網頁
善用標題
標示重要內容
失讀症
http://www.dls.ym.edu.tw/neuroscience/dyslexia_c.html
Cognitive Disabilities
 讀寫障礙
 是一種最常見的特殊學習困難，泛指在閱讀、書
寫或拼字方面的障礙
 閱讀困難﹕理解文字比理解說話的能力弱、不能
認讀常見的字、朗讀時經常讀錯字、 經常混淆讀
音相似的字、閱讀表現比同齡的孩子差很多
 寫字困難﹕寫字常犯錯，如漏筆劃或比例不勻稱、
抄寫時經常望一筆抄一筆、同一個字經常有不同
寫法，如「手」、「 」、「 」。
 Spell disabilities
Cognitive Disabilities
 視覺感知障礙
 辨別形狀相似的字有困難把字的筆劃倒轉寫
如上下倒轉 「香」->「 」
左右倒轉「拍」->「 」
裝字困難，無法把字寫在格內
 輸入關鍵字做搜尋時，提供拼字檢查功能
中文提供建議功能（注音輸入法）
常見錯誤字
有障礙的朋友更常待在網路上
自在 成就
無障礙網頁設計建議模式
第一階段
建立基本無障礙網頁
避免
無障礙錯誤
簡易10步驟
第二階段
改善網頁無障礙程度
無障礙規範
定期檢測
第三階段
達成無障礙網頁空間
專家諮詢
使用者
需求
簡易10步驟建立無障礙網頁
1. 圖片與影片：使用alt屬性加以說明
2. 影像地圖：使用替代文字說明，確保使用者
取得影像地圖中的超連結資訊
3. 多媒體：提供影音檔案字幕、文本或說明加
以描述內容。
4. 超連結：使用有意義的文字，避免使用「點
選這裡」等無意義的內容
5.
頁面組織：使用標題、重點、與一致性的
架構。網頁版面設計盡可能使用CSS
CSS（Cascading Style Sheets）是一種樣式
表 (Stylesheet) 語言,目的是為了對像
XHTML 及 HTML 之類的標記語言
(markup language) 提供一個顯示層
有了 CSS，就可以將資料層及顯示層分開，
HTML 文件就只包括資料，而 CSS 則是告
訴瀏覽器這些資料應該要如何顯現出來
圖表：使用重點摘要
外掛程式：外掛程式如Scripts、applets、
或plug-ins，應提供替代內容，以免造成取
用上的障礙或有不支援的情況
8. 框架：使用非框架元素（noframes element）
與有意義之標題
9. 表格：確認每行內容皆可閱讀或使用重點
摘要
10. 檢測網頁：使用檢測工具或無障礙規範標
準檢核網頁
6.
7.