220 likes | 404 Views
無障礙網頁設計規範 與檢測碼介紹 (規範一至七及相關檢測碼). 講師:王亘宇 台北大學 AboutWeb 網路發展小組. 行政院研究發展考核委員會. 簡報大綱. 無障礙網頁開發規範 國內外規範 網站常見的錯誤 檢測碼介紹 無障礙網頁檢測工具 標章申請說明. 一、無障礙網頁開發規範. 十四條規範 基源於 WAI 所制定之 WCAG 1.0 (Web Content Accessibility Guidelines 1.0 , May,1999) 九十條檢測碼 三個優先等級. 十四條規範. 規範一:對於聽覺及視覺的內容要提供相等的替代文字
E N D
無障礙網頁設計規範與檢測碼介紹(規範一至七及相關檢測碼)無障礙網頁設計規範與檢測碼介紹(規範一至七及相關檢測碼) 講師:王亘宇 台北大學AboutWeb網路發展小組 行政院研究發展考核委員會
簡報大綱 • 無障礙網頁開發規範 • 國內外規範 • 網站常見的錯誤 • 檢測碼介紹 • 無障礙網頁檢測工具 • 標章申請說明
一、無障礙網頁開發規範 • 十四條規範 基源於WAI所制定之WCAG 1.0 (Web Content Accessibility Guidelines 1.0, May,1999) • 九十條檢測碼 • 三個優先等級
十四條規範 • 規範一:對於聽覺及視覺的內容要提供相等的替代文字 Guideline 1. Provide equivalent alternatives to auditory and visual content. • 網頁有非文字的聽覺或視覺內容時,應提供同等內容的替代文字 例如:1.1:H101000 圖片需要加上替代文字說明 1.3:H101002 對於object提供替代文字說明 (下一張舉例說明)
規範一 舉例:1.1:H101000 圖片需要加上替代文字說明 不良設計 圖片沒有提供替代文字 <IMG src="view.jpg"> 正確示範 IMG標籤中用alt屬性加入替代文字說明 <IMG src="view.jpg" alt="山谷中和風餐館的照片">
規範一 舉例: 1.3:H101002 對於object提供替代文字說明 不良設計 對於附屬應用程式object未提供替代文字說明 <OBJECT> <PARAM name="AnimationatStart" value="true"> …… <EMBED src="bubu01.asf"></EMBED> </OBJECT>
規範一 舉例: 1.3:H101002 對於object提供替代文字說明 正確示範一 <OBJECT> <PARAM name="AnimationatStart" value="true"> …… <EMBED src="bubu01.asf"></EMBED> 植物馬鞍藤的介紹影片:馬鞍藤是屬於旋花科,和牽牛花是親戚,為多年生的…… </OBJECT>
規範一 舉例: 1.3:H101002 對於object提供替代文字說明 正確示範二 <OBJECT classid="java: bubu01.class" width="500" height="500"> <OBJECT data=" bubu01.mpeg" type="video/mpeg"> <OBJECT data=" bubu01.gif" type="image/gif"> 植物馬鞍藤的介紹影片:馬鞍藤是屬於旋花科,和牽牛花是親戚,為多年生的…… </OBJECT> </OBJECT> </OBJECT>
十四條規範 • 規範二:不要單獨靠色彩來提供特殊資訊 Guideline 2. Don't rely on color alone. • 對顏色辨識能力有障礙的人而言,網頁資訊可能因顏色所傳達導致資訊的散失或受損 例如:2.1:H102100 確保所有藉由顏色所傳達出來的 訊息,在沒有顏色後仍然能夠傳達出來 (下一張舉例說明)
規範二 舉例:檢測碼 (a:不當設計) 檢測碼格式: X999999ex:H|3|14|2|99 • 橘色:網頁語言 H(HTML)(本案訂定)|S(SVG)|X(XML) • 金色:優先等級 其值為1|2|3 • 紫色:十四條規範 其值為01|02|03 …|14 • 粉紅色:檢測狀態(Status) 其值為0|1|2 0:機器辨識/機器檢測 1:機器辨識/人工檢測 2:人工辨識/人工檢測 • 白色:規範內的流水號碼 其值為00|01|02|03| . . .
規範二 舉例:檢測碼 (b:顏色無法呈現時的狀況) 檢測碼格式: X999999 ex: H|3|14|2|99 • 橘色:網頁語言 H(HTML)(本案訂定)|S(SVG)|X(XML) • 金色:優先等級 其值為1|2|3 • 紫色:十四條規範 其值為01|02|03 …|14 • 粉紅色:檢測狀態(Status) 其值為0|1|2 0:機器辨識/機器檢測 1:機器辨識/人工檢測 2:人工辨識/人工檢測 • 白色:規範內的流水號碼 其值為00|01|02|03| . . .
H 1 05 0 02 十四條規範 舉例:檢測碼 (c:正確示範) 檢測碼格式: X999999ex:H|3|14|2|99 • 起始字母:網頁語言 H(HTML)(本案訂定)|S(SVG)|X(XML) • 第一位數碼:優先等級 其值為1|2|3 • 第二、三位數碼:十四條規範 其值為01|02|03 …|14 • 第四位數碼:檢測狀態(Status) 其值為0|1|2 0:機器辨識/機器檢測 1:機器辨識/人工檢測 2:人工辨識/人工檢測 • 第五、六位數碼:規範內的流水號碼 其值為00|01|02|03| . . . 字母 一 二三 四 五六
規範三 • 規範三:適當地使用標記語言和樣式表單 Guideline 3. Use markup and style sheets and do so properly. • 須嚴格遵守此標記的原本設計的目的,以免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解 例如:3.2:H203001 確定網頁設計文件,有效使用正 規的HTML語法 (下一張舉例說明)
規範三 舉例: 3.2:H203001 確定網頁設計文件,有效 使用正規的HTML語法 網頁文字段落中重要訊息的呈現 不良設計 <P>網頁文字段落中<B>重要訊息</B>的呈現</P> 正確示範 <P>網頁文字段落中<STRONG>重要訊息</STRONG>的呈現</P>
十四條規範 • 規範四:闡明自然語言的使用 Guideline 4. Clarify natural language usage • 標示自然語言使用的變化,以方便語音合成器和點字輸出機來處理 範例: <html lang="en"> <html lang=“fr"> <html lang="zh"> <html lang=“ja"> 例如:4.1:H104200 明確地指出網頁內容中語言的轉換 4.3:H304002 明確指出網頁文字所使用的自然語言 (下一張舉例說明)
規範四 舉例:4.1:H104200 明確地指出網頁內容中語言的轉換 「法國人樂觀知命,常掛在嘴上的一句話是C'est la Vie」 不良設計 <P>「法國人樂觀知命,常掛在嘴上的一句話是C'est la Vie」</P> 正確示範 <P>「法國人樂觀知命,常掛在嘴上的一句話是<SPAN lang="fr">C'est la Vie</SPAN>」</P>
規範四 舉例:4.3:H304002 明確指出網頁文字所使用的自然語言 不良設計 <HTML> <HEAD> <TITLE>中華民國總統府網站</TITLE> </HEAD> <BODY>網頁內容</BODY> </HTML> 正確示範 <HTML lang="zh-TW"> <HEAD> <TITLE>中華民國總統府網站</TITLE> </HEAD> <BODY>網頁內容</BODY> </HTML>
十四條規範 • 規範五:建立編排良好的表格 Guideline 5. Create tables that transform gracefully. • 非表格結構的資訊以表格標籤來處理時,網頁內容會被切割成順序錯亂且無法理解的資訊,應該避免使用表格標籤做單純排版功能 (下一張舉例說明表格資料的順序性)
A:常見設計的習慣 中文流行歌曲TOP 10 2002-8-3 ~ 2002-8-9 1 娛樂焦點新聞 3 • 張惠妹 / 知道 • 劉德華/愛如此神奇 • 孫燕姿 / 自選集 • 任賢齊 /任逍遙 • 阿杜 /撕夜 • 梁靜茹 / 夜夜夜夜 • S.H.E / 美麗新世界 • 許紹洋 /鬍渣 • 林憶連 / Better Man • 李聖傑 /痴心絕對 2 • 英國年輕人酷愛貝克漢 冷落維多莉亞 • 懇談4小時 苦苓蘇玉珍歡喜和解 • 張淳淳為潘越雲 傳「瘦」妙方 • 黃嘉千 如願加入葛福鴻旗下 • 澄清網路緋聞 吳宗憲:我不是W天王 4 B:實際讀取的順序 1 2 3 2002年8月7日 娛樂週報 4 規範五 舉例:表格的設計應注意資料安排的順序性
十四條規範 • 規範六:確保網頁能在新科技下良好地呈現 Guideline 6. Ensure that pages featuring new technologies transform gracefully • 確認在較新的科技不支援或關掉的時候,網頁仍然具有可及性,仍然可以讓使用者處理網頁內的資訊 例如:6.4:H106103 網頁內的程式物件沒有作用時,確保 網頁內容仍然可以傳達 (下一張舉例說明)
規範六 舉例: 6.4:H106103 網頁內的程式物件沒有作用時, 確保網頁內容仍然可以傳達 不良設計 當程式物件沒有作用時,網頁內容將無法傳達 正確示範 加入替代文字,若程式物件沒有作用時,將確保網頁內容仍然可以傳達。
十四條規範 • 規範七:確保使用者能處理時間敏感內容的改變 Guideline 7. Ensure user control of time-sensitive content changes. • 時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或捲軸等方式來呈現或自動更新資訊內容 例如:7.3:H207002 避免使用marquee標籤移動文字 7.6:H207005 不要自動轉移網頁的網址 (下一張舉例說明)