无障碍网页设计规范.ppt

修 平 技 術 學 院電算中心系統組發展組 蔡京甫無障礙網頁 暨 雙語網頁 推行計劃2007/8 版1 2Outline什麼是無障礙網頁為什麼需要無障礙網頁無障礙網頁規範設計要點如何自行檢測電算中心提供的範本參考資料 3什麼是無障礙網頁 4什麼是無障礙網頁Web Content Accessibility符合某些特定規範所製作出來的網頁WCAGW3C協會底下的WAI組織所訂定的一個國際性的無障礙網頁規範無障礙網頁開發規範行政院研考會所訂立的規範 5什麼是無障礙網頁回歸HTML tag的標準以及原始意義特殊族群的人可以順利透過輔助器具閱讀網頁視覺障礙〔包括全盲、色盲、弱視等〕聽覺障礙〔全聾或是重聽〕行動或有認知障礙、對閱讀或是文字理解有困難的人。 6什麼是無障礙網頁文字介面瀏覽器 Lynx 7什麼是無障礙網頁簡而言之製作出符合W3C標準以及其他特定規範的HTML網頁。使各種閱讀Web的軟體或機器都可以無誤的呈現資訊。並且身心障礙者可以透過輔助器具順利瀏覽網頁內容。無障礙規範 8為什麼需要無障礙網頁 9為什麼需要無障礙網頁行政院研究發展考核委員會雙語化環境暨無障礙網頁教育部95/2/24台電字第0950024989號書函本校升格科大的評鑑項目之一 10無障礙網頁規範 11無障礙網頁規範無障礙網頁開發規範四項原則 (概念與原則)十四條規範九十條相關的檢測要點你的網頁符合哪一等級？三個優先等級四項原則十四條規範九十條檢測要點縱合 12無障礙網站的分級第1優先等級 A第1優先等級 + 三個功能 = A+第2 優先等級 AA第3 優先等級 AAA 13無障礙網頁規範與國外規範的差異WCAG 1.0研考會無障礙網頁開發規範優先等級三個優先等級三個優先等級規範條文十四條規範十四條規範規範細節六十五個檢測點 九十個檢測碼檢測方式人工/機器檢測人工/機器檢測檢測等級三個檢測等級三個檢測等級認證標章三個認證標章三個認證標章 14九十條相關的檢測要點九十條要點編號方式H 2 03 0 04網頁語言H, X, S優先等級1, 2, 314條規範01~14流水號00~99例如：要使用相對尺寸(如%)而非絕對尺寸(如像素) 檢測狀態0：機器辨識 / 機器檢測1：機器辨識 / 人工檢測2：人工辨識 /人工檢測※ 請務必自行閱讀官方(研考會)文件後再製作網頁辨識：是否存在檢測：是否錯誤 15檢測範圍重點摘要 16檢測要點檢測要點可以於以下網址下載： 17檢測範圍重點摘要共有90條規範請全部瀏覽過一次，讓心理有個底製作時常遇到的問題字型類圖片類表格類連結類導盲磚網站導覽其它 18字型 (1/2)改變字型大小勿用絕對大小但是可以用CSS來設定絕對大小請用相對數字來改變字體大小<font size=“5〞>測試</font><font size=“+2〞>測試</font>絕對相對 19字型 (2/2)1. 先用滑鼠選取2. 輸入相對數字 +1, +2, -1, -2… 都可以3. HTML部份會變成相對大小 20圖片 (1/7)勿用(盡量防止?)動態GIF圖片請加上alt 敘述alt為圖片的替代文字有意義的替代文字無意義的裝飾性圖示以alt=“〞標示條列式小圖示的alt可採用“*〞用CSS改善項目符號 21圖片 (2/7)圖片請加上alt敘述圖片加上 alt 後的效果，會有黃色文字方塊顯示 22圖片 (3/7)圖片上按右鍵 ? 圖片內容 23圖片 (4/7)無意義的裝飾性圖示以alt=“〞標示無意義的裝飾性圖示以 alt=“〞 標示(空字串) 24圖片 (5/7)條列式小圖示的alt可採用“*〞 25圖片 (6/7)圖片內的文字再以真正的文字簡述 26圖片 (7/7)圖片內的文字再以真正的文字簡述 27表格 (1/5)為了讓視覺障礙者可清晰理解表格資訊必需標明表格行和列的標題結構化的標記彼此的關係5.1: H105100 對於每一個存放資料的表格『不是用來排版』，標示出行和列的標題 (th) 5.2: H105101 表格中超過二行/列以上的標題，須以結構化標記確認彼此間的結構與關係? 窒礙難行的規範 ?5.5: H305004 表格須提供表格摘要說明 (summary)5.6: H305105 資料表格須提供標題說明 (caption) 28表格 (2/5)表格的用途資料格式化呈現例如：代理人名冊，電話表…排版以表格來固定版面配置將表格的框線設為 〞0〞表格寬與高請用相對尺寸必要用到絕對尺寸的時候，請用CSS替代 29表格 (3/5)所有表格請加上summary非排版用表格(資料表格)請加上標題CAPTION請明顯標示欄與列標題<table width=“100%〞 summary=“文字敘述〞><caption>