无障碍网页设计规范-修平科技大学-资讯处.PPT

修 平 技 術 學 院 電算中心 系統組發展組 蔡京甫 Outline 什麼是無障礙網頁 為什麼需要無障礙網頁 無障礙網頁規範 設計要點 如何自行檢測 電算中心提供的範本 參考資料 什麼是無障礙網頁 什麼是無障礙網頁 Web Content Accessibility 符合某些特定規範所製作出來的網頁 WCAG W3C協會底下的WAI組織所訂定的一個國際性的無障礙網頁規範 無障礙網頁開發規範 行政院研考會所訂立的規範 什麼是無障礙網頁 回歸HTML tag的標準以及原始意義 特殊族群的人可以順利透過輔助器具閱讀網頁 視覺障礙（包括全盲、色盲、弱視等） 聽覺障礙（全聾或是重聽） 行動或有認知障礙、對閱讀或是文字理解有困難的人。 什麼是無障礙網頁 什麼是無障礙網頁 簡而言之 製作出符合W3C標準以及其他特定規範的HTML網頁。 使各種閱讀Web的軟體或機器都可以無誤的呈現資訊。 並且身心障礙者可以透過輔助器具順利瀏覽網頁內容。 為什麼需要無障礙網頁 為什麼需要無障礙網頁 行政院研究發展考核委員會 雙語化環境暨無障礙網頁 教育部95/2/24台電字第0950024989號書函 本校升格科大的評鑑項目之一 無障礙網頁規範 無障礙網頁規範 無障礙網頁開發規範 四項原則 (概念與原則) 十四條規範 九十條相關的檢測要點 你的網頁符合哪一等級？ 三個優先等級 無障礙網站的分級 第1優先等級 A 第1優先等級 + 三個功能 = A+ 第2 優先等級 AA 第3 優先等級 AAA 無障礙網頁規範 與國外規範的差異 九十條相關的檢測要點 九十條要點編號方式 檢測範圍重點摘要 檢測要點 檢測要點可以於以下網址下載：.tw/doc2.jsp 檢測範圍重點摘要 共有90條規範 請全部瀏覽過一次，讓心理有個底 製作時常遇到的問題 字型類 圖片類 表格類 連結類 導盲磚 網站導覽 其它 字型 (1/2) 改變字型大小勿用絕對大小 但是可以用CSS來設定絕對大小 請用相對數字來改變字體大小 字型 (2/2) 圖片 (1/8) 勿用(盡量避免?)動態GIF 網頁使用動態gif圖片，容易產生反效果 忽略難以察覺 分心而無法閱讀其他的網頁內容 剌激心臟病及氣喘等患者 造成視覺上的不適 圖片 (2/8) 圖片請加上alt 敘述 alt為圖片的替代文字 有意義的替代文字 無意義的裝飾性圖示以alt=“”標示 條列式小圖示的alt可採用“*” 用CSS改善項目符號 圖片 (3/8) 圖片請加上alt敘述 圖片 (4/8) 圖片 (5/8) 無意義的裝飾性圖示以alt=“”標示 圖片 (6/8) 圖片 (7/8) 圖片 (8/8) 表格 (1/6) 為了讓視覺障礙者可清晰理解表格資訊 必需標明表格行和列的標題 結構化的標記彼此的關係 表格 (2/6) 表格的用途 資料格式化呈現 例如：代理人名冊，電話表… 排版 以表格來固定版面配置 將表格的框線設為 ”0” 表格寬與高請用相對尺寸 必要用到絕對尺寸的時候，請用CSS替代 表格 (3/6) 所有表格 請加上summary 因相關輔具能夠讀取summary資訊，使用輔具之瀏覽者可事先得知表格內的資料種類，增加閱讀網頁便利性 排版表格的summary可用”版型表格”或”＊”表示 表格 (4/6) 非排版用表格(資料表格) 請加上標題CAPTION 提供瀏覽者在未閱讀表格資料前了解表格提供的資訊主題 表格 (5/6) 表格 (6/6) 連結 (1/4) 為每一個連結加上 title 敘述 連結 (2/4) 連結 (3/4) 不要以空白來分隔連結 連結點下後開會新視窗，要事先提醒使用者(以alt提示亦可) 相關資源連結圖示未提供”開啟新視窗” 說明，容易造成使用者不清楚資訊在那個網頁中 連結 (4/4) 導盲磚/定位點 (1/2) 導盲磚(accesskey) “:::” 用途：定位及搜尋 優點： 快速跳躍至不同區塊，也可以避免使用者在網頁中迷失 。 方便使用者在各框架(frame)之間快速移動與搜尋網頁內容。 可以導引使用者依自己的需要，跳至所需的區塊中，閱讀自己想要的內容。 導盲磚/定位點 (2/2) 當使用者按下alt + m 時，焦點會自動跳到預設Accesskey = “M”的位置 設計隱藏式定位點 不影響網頁美觀 保有定位點之功能 網站導覽 (1/2) 提供整個網站簡介與層次架構，降低瀏覽者”迷路”的機率 能清楚的呈現出整個網站的層次架構 提昇網站的親和力及可及性 瀏覽者可利用網站導覽地圖的鏈結功能，快速進入所需的網頁 網站地圖常與Accesskey操作說明放在一起 網站導覽 (2/2) 其它 - 表單 H310004 在網頁文字輸入區中須有預設值 (