無障礙網頁.pptVIP

無障礙網頁 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/7) 勿用(盡量避免?)動態GIF 圖片請加上alt 敘述 alt為圖片的替代文字 有意義的替代文字 無意義的裝飾性圖示以alt=“”標示 條列式小圖示的alt可採用“*” 用CSS改善項目符號 圖片 (2/7) 圖片請加上alt敘述 圖片 (3/7) 圖片 (4/7) 無意義的裝飾性圖示以alt=“”標示 圖片 (5/7) 圖片 (6/7) 圖片 (7/7) 表格 (1/5) 為了讓視覺障礙者可清晰理解表格資訊 必需標明表格行和列的標題 結構化的標記彼此的關係 表格 (2/5) 表格的用途 資料格式化呈現 例如：代理人名冊，電話表… 排版 以表格來固定版面配置 將表格的框線設為 ”0” 表格寬與高請用相對尺寸 必要用到絕對尺寸的時候，請用CSS替代 表格 (3/5) 所有表格 請加上summary 非排版用表格(資料表格) 請加上標題CAPTION 請明顯標示欄與列標題 表格 (4/5) 表格 (5/5) 連結 (1/3) 為每一個連結加上 title 敘述 連結 (2/3) 連結 (3/3) 不要以空白來分隔連結 連結點下後開會新視窗，要事先提醒使用者(以alt提示亦可) 導盲磚 (1/2) 導盲磚(accesskey) “:::” 用途：定位及搜尋 優點： 快速跳躍至不同區塊，也可以避免使用者在網頁中迷失 。 方便使用者在各框架(frame)之間快速移動與搜尋網頁內容。 可以導引使用者依自己的需要，跳至所需的區塊中，閱讀自己想要的內容。 導盲磚 (2/2) 當使用者按下alt + m 時，焦點會自動跳到預設Accesskey = “M”的位置 網站導覽 (1/2) 為增加網站使用度及可及性，網站應提供網站地圖及網站簡介。 能清楚的呈現出整個網站的層次架構 網站地圖常與Accesskey操作說明放在一起 網站導覽 (2/2) 其它 - 表單 H310004 在網頁文字輸入區中須有預設值 (密碼欄位除外) 其他 文字顏色與背景對比要明顯 別用Frontpage的縮排blockquote功能 ?? 其他 每個網頁都需加上標題(title) 其他 避免使用:) ^____^ 類似的表情圖示 每個網頁HTML原始碼中的HTML 要加上 lang=“zh-TW”或其他對等的語言標記。(英文為en)  每個網頁(HTML原始碼)的最上方加上 其他 動態JavaScript / Applet 選單以及其他動態效果少用，若要使用請確保以鍵盤亦能操作。 若有用到JavaScript，請以noscript/noscript提供無支援JavsScript的瀏覽器可以使用的解決方案 其他 – 發佈檔案 可不可以發布Word、Excel或PDF檔案？ H311203 允許使用者依照個人喜好設