無障礙網頁練習( A (第一優先)等級 及 A+ 等級綜合練習)

練習 A(第一優先)等級解答

【說明： 紅色底線字 即是 解答，無障礙相關修正建議直接修改 Html 原始碼 】

■ 圖片和圖形按鍵需要加上替代文字說明

查看檢測碼：1.1 ：H101000 圖片需要加上替代文字說明， 1.4 ：H101003 對於表單中的圖形按鍵提供替代文字說明

測驗1.1： 請將以下圖片加上適當替代文字說明 解答： <img src="image/N2hack_S_flower02s.jpg" width="100" height="93" alt="向日葵" >	測驗1.1： 請問以下圖片的替代說明該利用何種符號來代替? 夏季防範境外傳入傳染性疾病。 解答： <img src="image/test-list.gif" width="20" height="37"alt="*" >	測驗1.1： 圖片有連結功能請加上替代文字說明 解答： <img src="image/test-pmenu.gif"width="134" height="60" border="0" alt="英文面試口與訓練教材" >
測驗1.1： 網頁中有很多圖片只是裝飾，又需要加上替代說明，該如何解決? ( [快速連結圖]旁邊的"橘色圖" 是 裝飾圖 ) 解答： <img src="image/test-nouse.gif" width="29" height="33" alt="" >	測驗1.4：請將以下表單中圖形按鍵提供替代文字 解答： <INPUT name="ButtonImage2" type="image" src="image/test-search.gif" alt="查詢">

■ 對於applet提供替代文字說明

查看檢測碼：1.2：H101001 對於applet提供替代文字說明

測驗1.2：請將以下用applet作的時鐘，提供替代說明

解答：
<APPLET CODE="Clock.class" Width=200 Height=160 align="middle" alt="現在時間">

■ 對於object提供替代文字說明

查看檢測碼：1.3:H101002 對於object提供替代文字說明

■ 影像地圖區域需要加上替代文字說明

查看檢測碼：1.5:H101004 影像地圖區域需要加上替代文字說明

測驗1.5：以下台北市及基隆市有用到影像地圖，點選後會"另開視窗"，請加上替代文字

解答：

<area shape="rect" coords="244,99,304,149" href="http://www.klcg.gov.tw/" target="_blank" alt="基隆市政府網站(另開新視窗)">
<area shape="rect" coords="145,136,220,183" href="http://www.taipei.gov.tw/" target="_blank" alt="台北市政府網站(另開新視窗)">

■ 當影像地圖使用為上傳按鈕時，每一作用區域必須分別使用不同的按鈕

查看檢測碼：1.6:H101105 當影像地圖使用為上傳按鈕時， 每一作用區域必須分別使用不同的按鈕

測驗1.6：下面 按鈕圖是ㄧ整張 而且使用了影像地圖 產生 按鈕 動作 ( 提示 需將圖切成2各按鈕圖，並且不使用影像地圖作用)

<FORM>
<INPUT type="text" name="keyword2" value="輸入搜尋字串">
<INPUT name="Submit" type="image" src="image/test-btn1.gif" alt="搜尋">
<INPUT name="Clear" type="image" src="image/test-btn2.gif" alt="重新輸入">
</FORM>

■ 當alt屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述

查看檢測碼：1.7：H101106 當alt屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述

測驗1.7：下圖用"alt"屬性寫超過150各英文字元，請幫忙修改

解答：當alt屬性的文字陳述大於150個英文字元時，另外提供文字敘述。

信件會突然全部不見 ?!
聽說 Outlook Express 逃不過 2 GB 的魔咒？

【狀況敘述】
本人前陣子開啟 Outlook Express 處理電子郵件時，發現原來所有的電子郵件突然全部不見了！聽說 Outlook Express 有 2 GB 的限制，超過就會發生這種慘劇~

請問：

(1) 這個「傳言」是真的嗎？
更新版本有用嗎？

(2) 怎麼檢查已經使用多少了？

(3) a) 這限制是整個 Outlook Express 一起算，
還是 「收信匣」、「寄件備份」等資料夾分別算？
b) 又，一開始這 2 GB 的限制是怎麼來的呢？

(4) 萬一 Outlook Express 裡的電子郵件突然全部不見，救得回來嗎？

(5) 如果仍使用 Outlook Express，對於這限制，學校是否有解決方案或建議？

(6) 如果不使用 Outlook Express，學校是否有其他解決方案？或建議其他電子郵件軟體？

■ 提供longdesc以外的描述性超連結(如D超連結)，來描述longdesc的內容

查看檢測碼：1.8：H101007 提供longdesc以外的描述性超連結(如D超連結)，來描述longdesc的內容

測驗1.8：下圖有用longdesc(請檢視原始碼)說明英語沉浸園網址 ，請增加替代說明

詳細說明_1

[注意]：別以為這圖甚麼說明都沒有，由於能支援longdesc標籤的瀏覽器非常少，實用性非常低，如果想看此圖的"longdesc"寫了些甚麼， 請利用 Netscape，及 Mozilla Fire Fox 瀏覽器，找到此圖 壓右鍵 選擇"屬性"，其中的"描述"。

解答：
詳細說明_1網址：http://wec.shu.edu.tw/www/link/link1_myet.htm

■ 所有語音檔案必須有文字旁白

查看檢測碼：1.10：H101109 所有語音檔案必須有文字旁白

無測驗1.10，但請點選右邊連結查看了解：http://www.cib.gov.tw/Media/Media_Short_Film.aspx

■ 以可及性的影像來替代ASCII文字藝術

查看檢測碼：1.11：H101210 以可及性的影像來替代ASCII文字藝術

測驗1.11：下面文字中有ASCII的文字，請替換( 提示 替換成圖片並加上Alt替代文字)

　　　　　今天天氣很好:)

解答：今天天氣很好

■ 視訊中的聲音必須提供同步文字型態的旁白

查看檢測碼：1.12：H101111視訊中的聲音必須提供同步文字型態的旁白

無測驗1.12，但請點選右邊連結查看了解：http://www.cib.gov.tw/Media/Media_Criminal_Reporter.aspx

[注意]：這1.12碼與1.10碼最大的差別是，1.12碼是將文字加入影片中(提供給聽障者)

■ 伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結

查看檢測碼：1.13:H101112 伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結

無測驗1.13，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A11.htm

[注意]：需Mosaic2.0b1 或Netscape 11n 以上版本來看, 其它的瀏覽器有的並不支援ISMAP的功能

■ 多媒體視覺影像呈現時，必須提供聽覺說明

查看檢測碼：1.14：H101213多媒體視覺影像呈現時，必須提供聽覺說明

無測驗1.14，但請點選右邊連結查看了解：http://enable.nat.gov.tw/document/1_14.jsp

■ 多媒體呈現時，必須同步產生相對應替代的語音或文字說明

查看檢測碼：1.15：H101214多媒體呈現時，必須同步產生相對應替代的語音或文字說明

無測驗1.15，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A13.htm

■ 確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來

查看檢測碼：2.1：H102100確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來

測驗2.1：下面是用顏色說明，請修正(當顏色都沒有時，如何說明)

解答：
上述的同學名單中，標示綠色A為第 1 名同學，藍色B為第 2 名同學，橘色C為第 3 名同學，土黃色D為第 4 名同學。

■ 明確地指出網頁內容中語言的轉換

查看檢測碼：4.1：H104200 明確地指出網頁內容中語言的轉換

測驗4.1：請將後面的法文加上語言轉換 (其他國家的自然語言代碼查詢這裡)

「法國人樂觀知命，常掛在嘴上的一句話是C'est la Vie」

解答：<p>「法國人樂觀知命，常掛在嘴上的一句話是<span lang="fr">C'est la Vie</span>」</p>

■ 對於每一個存放資料的表格(不是用來排版)，標示出行和列的標題。如果表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係

查看檢測碼：5.1：H105100 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題

測驗5.1：請將此表格行與列標題 (請參考：http://mis2.nkmu.edu.tw/90441060/final/freebook/A16.htm )

解答：(請檢查此段的html 原始碼)

■ 使用CSS樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

查看檢測碼：6.1：H106100 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

無測驗6.1，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A17.htm

■ 頁框連結必須是HTML檔案

查看檢測碼：6.2：H106001 頁框連結必須是HTML檔案

無測驗6.2，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A18.htm

■ 使用Script語言需指定不支援Script時的辦法

查看檢測碼：6.3：H106102 使用Script語言需指定不支援Script時的辦法

無測驗6.3，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A19.htm

■ 若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達

查看檢測碼：6.4：H106103 若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達

無測驗6.4，但請點選右邊連結查看了解：http://enable.nat.gov.tw/document/6_4.jsp

■ 確保網頁設計不會致使螢幕快速閃爍

查看檢測碼： 7.1 ：H107200 確保網頁設計不會致使螢幕快速閃爍

無測驗7.1，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A21.htm

■ 盡量使用客戶端影像地圖替代伺服器端影像地圖連結

查看檢測碼：9.1 ：H109000 盡量使用客戶端影像地圖替代伺服器端影像地圖連結

無測驗9.1，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A22.htm

■ 如果你不能使這個網頁無障礙化，提供另一個相等的無障礙網頁

查看檢測碼： 11.1 ：H111200 如果你不能使這個網頁無障礙化，提供另一個相等的無障礙網頁

無測驗11.1，但請點選右邊連結查看了解：http://enable.nat.gov.tw/document/11_1.jsp

■ 需要定義每個頁框的名稱

查看檢測碼：12.1 ：H112000 需要定義每個頁框的名稱

測驗12.1：解答檔 請下載

■ 網頁內容要使用簡單易懂的文字

查看檢測碼：14.1 ：H114200 網頁內容要使用簡單易懂的文字

無測驗14.1，但請點選右邊連結查看了解：http://mis2.nkmu.edu.tw/90441060/final/freebook/A25.htm

練習 A+ 等級

■ 若網頁物件使用時，確定勿僅使用滑鼠操作，確保有滑鼠以外的操作

查看檢測碼：9.2 ：H209201 對所有網頁內容元素，確保有滑鼠以外的操作介面

無測驗9.2，但請點選右邊連結查看了解：http://enable.nat.gov.tw/document/9_2.jsp

■ 對由Scripts、Applets及Objects所產生之資訊，提供可及性替代方式

查看檢測碼：8.1 ：H208100對由Scripts、Applets及Objects所產生之資訊，提供可及性替代方式

測驗8.1：請將下段加上可及性替代方案

<SCRIPT language="VBScript"> <!-- msgbox"歡迎來到壯壯通訊行首頁" --> </SCRIPT>

解答：增加一行<noscript>說明</noscript>

<SCRIPT language="VBScript"> <!-- msgbox"歡迎來到壯壯通訊行首頁" --> </SCRIPT>

<noscript>歡迎來到壯壯通訊行首頁</noscript>

■ 對經常使用的超連結，增加快速鍵(Accesskey)的操作

查看檢測碼：9.5 ：H309204 對經常使用的超連結，增加快速鍵的操作

測驗9.5：請在[回首頁]那ㄧ行，加上快速鍵"C"鍵的設定

<P>壯壯通訊行</P>
<P>
[<A href="linkto/ex.jsp">回首頁</A>]
解答：[<A href="linkto/ex.jsp" accesskey="c" >回首頁</A>]

[<A href="linkto/ex.jsp">手機資訊</A>]
[<A href="linkto/ex.jsp">手機配件</A>]
[<A href="linkto/ex.jsp">保固資訊</A>]
</P>

[注意]：
在無障礙網頁中，Accesskey 是與 導盲磚 ::: ㄧ起搭配使用，
並以此 作出 上、左、中(內容區)、右 網頁定位，
在台灣，對於這四各定位 已有通用的英文字母或數字設定， 上 U 或 B、左 L 、中(內容區) C 、右 R ，
如果網站上有搜尋功能 快速鍵共通英文 是 S
最後導盲磚均連結至" 網站導覽 (網站地圖) "

必學!! 進階測驗9.5：
請將 單位網頁 作出導盲磚，並設連結至 網站導覽(網站地圖)，
通用網頁 編排欄位如下(請找出與單位網站最相似的來加，其中文字只是方便辨識，實際上只會有導盲磚)

解答：(請檢視html 原始檔)

上[:::]，左[:::]，右[:::]，內容區[:::]

■ 為你的網站提供網站地圖或整體性的網站導覽簡介

查看檢測碼： 13.6 ：H213205 為你的網站提供網站地圖或整體性的簡介

測驗13.6，請先點選右邊連結參考：http://www.taipei.gov.tw/cgi-bin/SM_theme?page=42abe1be

參考後，試著將單位網站做出網站導覽且加上快速鍵的說明