Скачать презентацию 修平技術學院 無障礙網頁 暨 雙語網頁 推行計劃 2007 8 版 電算中心 Скачать презентацию 修平技術學院 無障礙網頁 暨 雙語網頁 推行計劃 2007 8 版 電算中心

5c5ff5647aee0e830cba278571aed4fe.ppt

  • Количество слайдов: 76

修平技術學院 無障礙網頁 暨 雙語網頁 推行計劃 2007/8 版 電算中心 系統組發展組 蔡京甫 修平技術學院 無障礙網頁 暨 雙語網頁 推行計劃 2007/8 版 電算中心 系統組發展組 蔡京甫

Outline • • 什麼是無障礙網頁 為什麼需要無障礙網頁規範 設計要點 如何自行檢測 電算中心提供的範本 參考資料 2 Outline • • 什麼是無障礙網頁 為什麼需要無障礙網頁規範 設計要點 如何自行檢測 電算中心提供的範本 參考資料 2

什麼是無障礙網頁 3 什麼是無障礙網頁 3

什麼是無障礙網頁 • Web Content Accessibility • 符合某些特定規範所製作出來的網頁 – WCAG • W 3 C協會底下的WAI組織所訂定的一個國際性的無 障礙網頁規範 什麼是無障礙網頁 • Web Content Accessibility • 符合某些特定規範所製作出來的網頁 – WCAG • W 3 C協會底下的WAI組織所訂定的一個國際性的無 障礙網頁規範 – 無障礙網頁開發規範 • 行政院研考會所訂立的規範 4

什麼是無障礙網頁 • 回歸HTML tag的標準以及原始意義 • 特殊族群的人可以順利透過輔助器具閱讀網 頁 – 視覺障礙(包括全盲、色盲、弱視等) – 聽覺障礙(全聾或是重聽) – 行動或有認知障礙、對閱讀或是文字理解有困 難的人。 什麼是無障礙網頁 • 回歸HTML tag的標準以及原始意義 • 特殊族群的人可以順利透過輔助器具閱讀網 頁 – 視覺障礙(包括全盲、色盲、弱視等) – 聽覺障礙(全聾或是重聽) – 行動或有認知障礙、對閱讀或是文字理解有困 難的人。 5

什麼是無障礙網頁 文字介面瀏覽器 Lynx 6 什麼是無障礙網頁 文字介面瀏覽器 Lynx 6

什麼是無障礙網頁 • 簡而言之 – 製作出符合W 3 C標準以及其他特定規範的 HTML網頁。 無障礙規範 – 使各種閱讀Web的軟體或機器都可以無誤的呈 現資訊。 – 並且身心障礙者可以透過輔助器具順利瀏覽網 什麼是無障礙網頁 • 簡而言之 – 製作出符合W 3 C標準以及其他特定規範的 HTML網頁。 無障礙規範 – 使各種閱讀Web的軟體或機器都可以無誤的呈 現資訊。 – 並且身心障礙者可以透過輔助器具順利瀏覽網 頁內容。 7

為什麼需要無障礙網頁 8 為什麼需要無障礙網頁 8

為什麼需要無障礙網頁 • 行政院研究發展考核委員會 • 雙語化環境暨無障礙網頁 – 教育部 95/2/24台電字第 0950024989號書函 • 本校升格科大的評鑑項目之一 9 為什麼需要無障礙網頁 • 行政院研究發展考核委員會 • 雙語化環境暨無障礙網頁 – 教育部 95/2/24台電字第 0950024989號書函 • 本校升格科大的評鑑項目之一 9

無障礙網頁規範 10 無障礙網頁規範 10

無障礙網頁規範 • 無障礙網頁開發規範 – 四項原則 (概念與原則) – 十四條規範 – 九十條相關的檢測要點 四項原則 十四條規範 縱合 • 無障礙網頁規範 • 無障礙網頁開發規範 – 四項原則 (概念與原則) – 十四條規範 – 九十條相關的檢測要點 四項原則 十四條規範 縱合 • 你的網頁符合哪一等級? 九十條檢測要點 – 三個優先等級 11

無障礙網站的分級 • 第 1優先等級 A – 第 1優先等級 + 三個功能 = A+ • 第 無障礙網站的分級 • 第 1優先等級 A – 第 1優先等級 + 三個功能 = A+ • 第 2 優先等級 AA • 第 3 優先等級 AAA 12

無障礙網頁規範 • 與國外規範的差異 WCAG 1. 0 研考會 無障礙網頁開發規範 優先等級 三個優先等級 規範條文 十四條規範 規範細節 六十五個檢測點 無障礙網頁規範 • 與國外規範的差異 WCAG 1. 0 研考會 無障礙網頁開發規範 優先等級 三個優先等級 規範條文 十四條規範 規範細節 六十五個檢測點 九十個檢測碼 檢測方式 人 /機器檢測 檢測等級 三個檢測等級 認證標章 三個認證標章 13

九十條相關的檢測要點 • 九十條要點編號方式 例如:要使用相對尺寸(如%)而非絕對尺寸(如像素) 網頁語言 H, X, S H 2 03 0 04 優先等級 九十條相關的檢測要點 • 九十條要點編號方式 例如:要使用相對尺寸(如%)而非絕對尺寸(如像素) 網頁語言 H, X, S H 2 03 0 04 優先等級 1, 2, 3 14條規範 01~14 檢測狀態 0:機器辨識 / 機器檢測 1:機器辨識 / 人 檢測 2:人 辨識 /人 檢測 ※ 請務必自行閱讀官方(研考會)文件後再製作網頁 流水號 00~99 辨識:是否存在 檢測:是否錯誤 14

檢測範圍重點摘要 15 檢測範圍重點摘要 15

檢測要點 • 檢測要點可以於以下網址下載: http: //enable. nat. gov. tw/doc 2. jsp 16 檢測要點 • 檢測要點可以於以下網址下載: http: //enable. nat. gov. tw/doc 2. jsp 16

檢測範圍重點摘要 • 共有90條規範 – 請全部瀏覽過一次,讓心理有個底 • 製作時常遇到的問題 – – – – 字型類 圖片類 表格類 檢測範圍重點摘要 • 共有90條規範 – 請全部瀏覽過一次,讓心理有個底 • 製作時常遇到的問題 – – – – 字型類 圖片類 表格類 連結類 導盲磚 網站導覽 其它 17

字型 (1/2) • 改變字型大小勿用絕對大小 – 但是可以用CSS來設定絕對大小 • 請用相對數字來改變字體大小 絕對 <font size=“ 5”>測試</font> 相對 <font 字型 (1/2) • 改變字型大小勿用絕對大小 – 但是可以用CSS來設定絕對大小 • 請用相對數字來改變字體大小 絕對 測試 相對 測試 18

字型 (2/2) 2. 輸入相對數字 +1, +2, -1, -2… 都可以 3. HTML部份會變成相對大小 1. 先用滑鼠選取 19 字型 (2/2) 2. 輸入相對數字 +1, +2, -1, -2… 都可以 3. HTML部份會變成相對大小 1. 先用滑鼠選取 19

圖片 (1/8) • 勿用(盡量避免? )動態GIF – 網頁使用動態gif圖片,容易產生反效果 – 忽略難以察覺 – 分心而無法閱讀其他的網頁內容 – 剌激心臟病及氣喘等患者 – 圖片 (1/8) • 勿用(盡量避免? )動態GIF – 網頁使用動態gif圖片,容易產生反效果 – 忽略難以察覺 – 分心而無法閱讀其他的網頁內容 – 剌激心臟病及氣喘等患者 – 造成視覺上的不適 20

圖片 (2/8) • 圖片請加上alt 敘述 – alt為圖片的替代文字 – 有意義的替代文字 – 無意義的裝飾性圖示以alt=“”標示 – 條列式小圖示的alt可採用“*” – 圖片 (2/8) • 圖片請加上alt 敘述 – alt為圖片的替代文字 – 有意義的替代文字 – 無意義的裝飾性圖示以alt=“”標示 – 條列式小圖示的alt可採用“*” – 用CSS改善項目符號 21

圖片 (3/8) • 圖片請加上alt敘述 圖片加上 alt 後的效果,會有黃色文字方塊顯示 22 圖片 (3/8) • 圖片請加上alt敘述 圖片加上 alt 後的效果,會有黃色文字方塊顯示 22

圖片 (4/8) 圖片上按右鍵 圖片內容 23 圖片 (4/8) 圖片上按右鍵 圖片內容 23

圖片 (5/8) • 無意義的裝飾性圖示以alt=“”標示 無意義的裝飾性圖示以 alt=“” 標示 (空字串) 24 圖片 (5/8) • 無意義的裝飾性圖示以alt=“”標示 無意義的裝飾性圖示以 alt=“” 標示 (空字串) 24

圖片 (6/8) 條列式小圖示的alt可採用“*” 25 圖片 (6/8) 條列式小圖示的alt可採用“*” 25

圖片 (7/8) 圖片內的文字再以真正的文字簡述 26 圖片 (7/8) 圖片內的文字再以真正的文字簡述 26

圖片 (8/8) 圖片內的文字再以真正的文字簡述 27 圖片 (8/8) 圖片內的文字再以真正的文字簡述 27

表格 (1/6) • 為了讓視覺障礙者可清晰理解表格資訊 – 必需標明表格行和列的標題 – 結構化的標記彼此的關係 5. 1: H 105100 對於每一個存放資料的表格『不是用來排版』,標示出行和列的標題 (th) 表格 (1/6) • 為了讓視覺障礙者可清晰理解表格資訊 – 必需標明表格行和列的標題 – 結構化的標記彼此的關係 5. 1: H 105100 對於每一個存放資料的表格『不是用來排版』,標示出行和列的標題 (th) 5. 2: H 105101 表格中超過二行/列以上的標題,須以結構化標記確認彼此間的結構與關係 窒礙難行的規範 5. 5: H 305004 表格須提供表格摘要說明 (summary) 5. 6: H 305105 資料表格須提供標題說明 (caption) 28

表格 (2/6) • 表格的用途 – 資料格式化呈現 • 例如:代理人名冊,電話表… – 排版 • 以表格來固定版面配置 • 將表格的框線設為 表格 (2/6) • 表格的用途 – 資料格式化呈現 • 例如:代理人名冊,電話表… – 排版 • 以表格來固定版面配置 • 將表格的框線設為 ” 0” • 表格寬與高請用相對尺寸 • 必要用到絕對尺寸的時候,請用CSS替代 29

表格 (3/6) • 所有表格 – 請加上summary – 因相關輔具能夠讀取summary資訊,使用輔具之 瀏覽者可事先得知表格內的資料種類,增加閱讀 網頁便利性 – 排版表格的summary可用”版型表格”或”*”表示 <table width=“ 表格 (3/6) • 所有表格 – 請加上summary – 因相關輔具能夠讀取summary資訊,使用輔具之 瀏覽者可事先得知表格內的資料種類,增加閱讀 網頁便利性 – 排版表格的summary可用”版型表格”或”*”表示