Web Accessibility

Web Accessibility 謝寶煖台灣大學圖書資訊學系 PNHSIEH@NTU.EDU.TW

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% • 教育部特殊教育通報網，2008http://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

無障礙網路空間服務網 規範 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

十四項規範錯誤分析 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

十四項規範錯誤分析 AL 8 1.4 對於表單中的圖形按鍵提供替代文字說明 7 9 7.6 不要自動轉移網頁的網址 7 10 9.3 確保事件的啟發不要求一定得使用滑鼠 6 11 13.5 為你的網頁加上標題 6 12 7.3 避免使用marquee標籤移動文字 4 13 1.8 提供longdesc以外的描述性超連結(如D超連結)，來描述longdesc的內容 3 14 3.6 適當使用巢狀標題呈現文件結構 2 15 5.5 表格須提供表格摘要說明(如summary屬性) 2 16 6.2 頁框連結必須是HTML檔案 2 17 10.6 勿單以空白間隔分開相連之超連結 2 18 1.2 對於applet提供替代文字說明 1 19 10.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瀏覽器 • 可以很方便地開啟或關閉圖片選項

老花 • 54 歲的Lillian會把報紙攤開在餐桌上，打開天花板上的 100 瓦大燈，用放大鏡慢慢地讀 • 她把 Internet Explorer 裡的字型調到「最大」，好讓她女兒網誌的字大到能被她閱讀 • 但是為什麼 CNN.com的字就沒辦法調得更大？

老花 • 讓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會以音量提示大標題，視障朋友可以透過捉到網頁結構，快速跳過沒興趣的部份。

Web Accessibility