A級無障礙網頁製作 主講人：劉威良 臺南大學資訊教育所

Presentation on theme: "A級無障礙網頁製作 主講人：劉威良 臺南大學資訊教育所"— Presentation transcript:

1 A級無障礙網頁製作 主講人：劉威良 臺南大學資訊教育所
無障礙網路空間網頁製作初階(1) A級無障礙網頁製作 主講人：劉威良 臺南大學資訊教育所 2005年12月21日

2 A 級需通過之28條檢測碼 (1/4) 1.1：H101000 圖片需要加上替代文字說明
1.2：H 對於applet提供替代文字說明 1.3：H 對於object提供替代文字說明 1.4：H 對於表單中的圖形按鍵提供替代文字說明 1.5：H 影像地圖區域需要加上替代文字說明 1.6：H 當影像地圖使用為上傳按鈕時，每一作用區域必須分別使用不同的按鈕 1.7：H 當alt屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述

3 A 級需通過之28條檢測碼 (2/4) 1.8：H 提供longdesc以外的描述性超連結(如D超連結)，來描述longdesc的內容 1.9：H 圖形替代文字陳述不夠清晰時，提供更多的文字描述(如使用longdesc屬性) 1.10：H 所有語音檔案必須有文字旁白 1.11：H 以可及性的影像來替代ASCII文字藝術 1.12：H101111視訊中的聲音必須提供同步文字型態的旁白 1.13：H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結 1.14：H101213多媒體視覺影像呈現時，必須提供聽覺說明

4 A 級需通過之28條檢測碼 (3/4) 1.15：H101214多媒體呈現時，必須同步產生相對應替代的語音或文字說明
6.1：H 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀 6.2：H 頁框連結必須是HTML檔案

5 A 級需通過之28條檢測碼 (4/4) 6.3：H106102 使用Script語言需指定不支援Script時的辦法

6 1.1:H101000 圖片需要加上替代文字說明 在瀏覽器無法顯示影像時，可以利用ALT屬性所指定的說明文字來代替影像。例如協助視覺障礙者增進網頁文字及影像視覺可讀性(visual readability)之螢幕閱讀器(screen reader)；螢幕閱讀器可以自動將ALT屬性所指定的說明文字解譯至語音合成器(speech synthesis)作語音輸出，或解釋至點字顯示器(brsille display)顯示點字。 舉例： 網頁上的圖片使用alt屬性提供替代文字。

7 範例： <img border="0" src="images/title.bmp" width="542" height="86" alt="Manuka 教育學園">

8 1.3:H101002 對於object提供替代文字說明 範例：
由於各種瀏覽器並不是完全支援網頁中OBJECT屬性中所有可以放置的影像、文件、Applet、Active X及Video等多種物件格式資訊。因此在OBJECT標籤中間必須寫入文字說明，用來替代瀏覽器無法辨識之物件格式。 範例： 下面的設計是以OBJECT提供一段有關馬鞍藤植物介紹的影片（馬鞍藤.asf），其中OBJECT標籤內未提供替代文字說明，因此在某些不支援OBJECT的瀏覽器上，這段影片中的資訊完全無法呈現。

9 範例：

10 1.5:H101004 影像地圖區域需要加上替代文字說明 範例：
由於一些視障者所使用的純文字瀏覽器無法直接取得影像地圖之超連結資訊，因此，影像地圖中所設定的各超連結區域，必須藉由AREA標籤中alt屬性來提供替代文字說明，以便於這類的特殊瀏覽器取得各超連結資訊。 範例： 此例子是在網頁製作影像地圖，整個圖片雖有“網站導覽圖“的alt文字說明，但是圖片中的連結卻沒有各自的文字替代。 正確的設計對於每個連結區域AREA標籤中加上alt說明連結的訊息。

11 範例：

12 1.7:H101106 當alt屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述 範例：
由於alt屬性所陳述的文字，是用以搭配網頁物件，例如：圖片、動畫、Applet或聲音在瀏覽器所無法呈現的時，作為輔助說明。因此陳述應以簡潔清晰為主，說明內容若需詳細時，則應考慮另設網頁或單獨陳述的方式表達。 範例： 如果網頁中的一個圖片所提供的替代文字字數過多，則應將完整的圖片文字說明置放於另一個網頁，並以文字連結該網頁，例如”請點選圖片下方的圖片說明”，以提升網頁的可及性。

13 範例：

14 1.8:H101007 提供longdesc以外的描述性超連結，來描述longdesc的內容 範例：
例中IMG標籤設定longdesc屬性為連接另一網頁來輔助說明圖片的意義，為避免瀏覽器無法辨別longdesc屬性，造成使用者無法取得資訊，可以提供longdesc以外的描述性超連結，來描述longdesc的內容（於圖片下方提供說明頁的文字連結），以提升網頁的可及性。

15 範例： <a target="_blank" href="../logo.htm">
<img border="0" src="../images/title.bmp" alt="本教育學園Logo設計徵求活動，萬元獎品等您來拿！活動日期8/26~9/15，Manuka教育學園主辦。" width="542" height="86" longdesc="logo.htm"></a>

16 1.11:H101210 以可及性的影像來替代ASCII文字藝術 範例：
儘量避免使用ASCII符號設計圖例，應以一般圖像來呈現圖例資訊，因為可以使用IMG標籤中alt屬性提供文字敘述說明。若是一定要使用ASCII符號時，也必須提供該示範圖例的描述說明，以利文字型態瀏覽器讀取其示範圖例的資訊。 範例： 例如我們常用的微笑表情 : ) ，應以一個實際的圖像來呈現，對於這個使用的圖像，同樣必須以alt屬性提供該圖像的文字敘述。當用來取代ASCII符號設計的圖片所需提供的替代文字過長時，應使用longdesc屬性或是敘述連結。

17 範例：

18 6.2:H106001 頁框連結必須是HTML檔案 網頁的頁框不應該直接連結到某個圖像或是物件，而是應該連結到一個HTML檔案，在此HTML檔案中再包含該圖像或是物件，並且提供替代文字。

19 範例： <frame name="top" scrolling="no" noresize TITLE="網站標題區" target="contents" src="title.htm" marginwidth="6" marginheight="6">

20 7.1:H107200 確保網頁設計不會致使螢幕快速閃爍 範例：
有些時候網頁設計者會使用到一些網頁的物件來增加網頁中的動態的效果，例如使用applets、 plug-ins、scripts，或是在網頁中加入動態圖片或是影片，這些網頁物件的使用都有可能會造成電腦螢幕快速閃爍。 範例： 不當設計的例子是使用scripts，讓網頁的背景顏色不斷的閃爍改變，造成使用者瀏覽網頁時的視覺困擾。

21 11.1:H111200 如果你不能使這個網頁無障礙化，提供另一個相等的無障礙網頁
當網頁內容在運用W3C所提供的可及性技術之後，還是無法達到網頁內容可及性的目的，則網頁內容設計者必須提供與原網頁具備相同資訊或功能的可及性替代網頁。例如： 在網頁原始版本上方提供具備相同資訊內容的純文字版本的網頁朝連結，提供身心障礙者作為可及性網頁內容的選擇。 使用META資訊來指出不同版本的替代文件，以供身心障礙者依據不同型態或喜好的瀏覽器自動載入閱讀使用。

22 12.1:H112000 需要定義每個頁框的名稱 為了方便身心障礙者使用特殊的瀏覽器閱讀網頁頁框中的資訊，網頁開發者需要為每一個頁框加上標題。 範例： 在FRAMESET標籤中使用title屬性可以用來為頁框設定一個名稱，讓使用者在未進入此頁框時便可知道頁框中的大概內容。

23 框架頁HTML

24 14.1:H114200 網頁內容要使用簡單易懂的文 網頁內容文字應力求清晰簡潔，以利於閱讀或認知障礙者容易識別閱讀。例如：
標題及超連結應力求簡潔明確，因為有些使用者直接以檢視標題及超聯結 作為快速閱讀網頁內容的方式。 一個段落描述一項主題。 使用通用語句，而不是俚語或特殊用語。例如使用「非常」而不是「超」，使用「幾歲」而不是「貴庚」。 避免使用複雜的句型結構。

25 範例： 「牝牡驪黃」宜使用「表面現象」

26 參考資料來源 無障礙網頁空間服務網 （http://enable.nat.gov.tw/index.jsp）
小牛頓科學網站 （

27 待續… 無障礙網路空間網頁製作初階(2)