原則一：多媒體相關資訊的可及性

B.1.1 對於聽覺及視覺的內容要提供相等的替代文字內容 (A)圖片的替代文字

網頁使用性專家Nielsen認為圖像可以來加強內文說明，但從另一方面來說，圖像可

62

能會造成視覺上的凌亂或是傳輸速度的降低，因此對於圖像必須謹慎編排與使用 (2002)。對於視覺障礙或者是使用低頻寬的網路連線的使用者來說，可能因為文字瀏 覽器或關閉了圖片顯示的功能使得他們無法理解圖片內容。此外，一些WAP手機或 是PDA也可能不支援圖片的顯示，這時圖片的替代文字說明便相當重要了，使用alt 屬性為圖片加上替代文字說明，使用者便可以從圖片的替代文字中獲取和圖片相同 的資訊，並增加圖片被搜尋引擎發現的機會。民國九十年在黃朝盟與林家如為行政 院部會網站所做的親和性評估之中，此項的平均錯誤比率高達百分之六十一點七，

為所有平均錯誤率中比例最高的 ²⁹。事實上對於設計師來說，加入替代文字是相當 容易的事，在Dreamweaver等的網頁編輯軟體中都已有內建加入替代文字的功能，而 瀏覽器IE與Netscape也都支援此一功能，設計師若忽略了這一個小步驟便會大大降低 網頁親合性。

<img src="圖片檔名.jpg" alt="圖片替代文字" >

替代文字內容必須力求簡潔明瞭，Jakob Nielsen 便認為替代文字內容最好不要超過 八到十個字（2000）。替代文字太長或含糊不清反而造成瀏覽上的困難。如果替代文 字必須大於一百五十個字元時，可以使用 longdesc 屬性連結其它檔案進行較長的影 像描述說明，為避免某些瀏覽器不支援 longdesc 屬性，可再加一個額外的連結可供 點選。

<img src="圖片檔名.jpg" alt="圖片替代文字" longdesc="影像描述說明.htm" ><a href="影像描述說 明.htm" >影像描述說明，如[D]</a>

此外值得注意的是，替代文字描述必需有脈絡意義，譬如說 logo 圖像的描述文字是

「圖片」，經由聲音輸出，視障者只會聽到「圖片」這兩個字，這根本不會傳遞任何 有用的訊息。對於排版用、裝飾用或是項目符號而使用的圖片，有時填入替代文字 反而造成使用者在使用文字瀏覽器時的干擾。項目符號的解決方式是把 alt 屬性中的 替代文字請用*號代替，成為 null alt。其它可以使用Mark Pilgrim所指出的空字串alt 屬 性（不是空白字元）（2002）。國內的 Freego 軟體無法對替代文字內容進行檢測，必 需靠人工檢測或是設計師自行進行判斷。

<img src="項目符號圖片檔名.jpg" alt="*" >

以下是四點規範中關於圖片需要替代文字的檢測碼 (1) 圖片需要加上替代文字說明。

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

29 平均錯誤比率高達百分之六十一點七，為所有平均錯誤率中比例最高的

63

(3) 圖形替代文字陳述不夠清晰時，提供更多的文字描述(如使用 longdesc 屬性)。

(4) 提供 longdesc 以外的描述性超連結，來描述 longdesc 的內容。

(B)按鈕與影像地圖的替代文字

設計師常常為了美觀，將網頁的超連結文字置換成圖片，或是將表單的按鈕以圖片 顯示，這時對視覺障礙者來說，為了避免重要資訊遺漏，提供替代文字是相當必要 的。

<a href="所要連結的路徑"><img src="按鈕圖片.gif" alt="替代文字" ></a>

影像地圖能在單一影像上建立許多 hot spot 作用區域，對於視障與肢障的使用者來說 都會產生非常大的障礙，除了文字瀏覽器會略過這裡的資訊之外，許多舊的瀏覽器 也不支援用戶端的影像地圖，既沒有結構上的意義也浪費頻寬。使用影像地圖，網 頁開發人員要做很多工作(Jeffrey Zedman，2002)，因此可以話，最好不要使用影像地 圖。此外，值得一提的是，伺服器端的影像地圖是由 CGI Script 將使用者點選的動作 轉換成對應的 URL，而用戶端的影像地圖則是由瀏覽器來負責轉換，因此為了網頁 可及性，規範也建議使用用戶端的影像地圖。

為了增加可及性，使用影像地圖除了和圖片按鈕一樣要加上替代文字之外，還必需 額外提供文字連結，並增加" ["與"]"產生區隔，最後在文字連結的地方加上快速鍵的 操作，提供滑鼠以外的操作介面。同樣的，在網頁表單若使用影像地圖進行上傳的 動作，為避免使用者混淆，必需將影像地圖上的連結各自拆開，設計成獨立的按鈕。

<map id="map" name="map">

<area shape="rect" cords="10,20,30,40" href="連結 1" alt="替代文字 1" />

<area shape="circle" cords="200,200,50" href="連結 2" alt="替代文字 2" />

<area shape="poly" cords="400,300,500,100 ,200" href="連結 3" alt="替代文字 3" />

</map>

[<a href="連結 1" accesskey="英文字母 1" >連結文字 1</a>]

[<a href="連結 2" accesskey="英文字母 2" >連結文字 2</a>]

[<a href="連結 3" accesskey="英文字母 3" >連結文字 3</a>]

<form>

<input type="text" name="keyword" value="輸入搜尋字串" >

<input name="Submit" type="image" src="圖片檔案 1" alt="傳送檔案" />

<input name="Reset" type="image" src="圖片檔案 2" alt="清除重寫" />

</form>

64

以下是五點規範中關於按鈕與影像地圖需要替代文字的檢測碼 (1) 對於表單中的圖形按鍵提供替代文字說明。

(2) 影像地圖區域需要加上替代文字說明。

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

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

(5) 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結。

(C)多媒體影音的替代文字

網頁設計師在網頁上加入了動態影像與聲音…等等的多媒體，雖然能夠讓網頁內容 更加豐富、傳達更多資訊，但也必須注意到網路頻寬的限制，以避免低頻寬的網路 使用者難以使用。對於身心障礙者來說，文字瀏覽器無法呈現出動態的影像，因此 設計時必須提供另外同等於影像內容的文字描述說明。而對於聽障者或是需要安靜 (或處於噪音)的環境來說，影片的聲音或對話最好加上同步字幕解說，或者是使用 longdesc 屬性提供這些影片聲音資訊的文字副本，以文字描述聲音與旁白的內容。

以下是四點規範中關於多媒體影音需要替代文字的檢測碼 (1) 所有語音檔案必須有文字旁白。

(2) 視訊中的聲音必須提供同步文字型態的旁白。

(3) 多媒體視覺影像呈現時，必須提供聽覺說明。

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

(D)其它的替代文字

Java 的小型應用程式 Applet 可嵌入網頁之中，在網頁上呈現各種 Java 的特效與功 能，然而許多瀏覽器並不支援 Java Applet，因此若是設計師使用 applet 標籤時，應該 提供替代文字說明，說明內容。而 object 標籤則是 W3C 打算取代 applet 標籤的，可 以放置影片、FLASH 動畫、Applet 與 Active X…等等多種物件格式資訊，為了增加 親合性，也一樣必須加入替代文字進行說明。

<applet code="RainbowText.class" codebase="script/" width="400" height="100" alt= "替代文字" >

<param name="text" value="網頁名稱">

</applet>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"

width="760" height="59">

<param name="movie" value="flash/mainbanner0.swf">

65

<param name="quality" value="high">

<embed src="flash/mainbanner0.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760"

height="59">替代文字說明</embed>

</object>

以 ASCII 文字藝術呈現資訊對於許多使用者或是身心障礙者來說都是非常容易造成 混亂與不清楚的，若無法避免使用必須加上清楚的圖片以及替代文字說明。

<p>ASCII 文字藝術呈現<img src="圖片檔" alt="替代文字說明" ></p>

以下是三點規範中關於其它需要替代文字的檢測碼 (1) 對於 applet 提供替代文字說明。

(2) 對於 object 提供替代文字說明。

(3) 以可及性的影像來替代 ASCII 文字藝術

。

B.1.2 闡明自然語言的使用 (A)指定自然語言

自然語言(natural language)(註 16)的指定對於視障者使用輔具時的辨別是有需要的，

雖然不指定語言時，一般瀏覽器仍能自動辨別顯示，但為了避免傳達錯誤訊息與造 成亂碼，網頁設計師仍必須指定整個 html 的自然語言。此外，在適合的情境之下賦 予文字或標籤適當的「意義（meaning）」也是親和性相當重要的一環（圖表十九）。

而遭遇文句中自然語言轉換，也最好加以指定，最主要是以 lang 屬性來進行自然語 言指定，繁體中文使用 zh-tw，英文使用 en，法語則是 fr。

<html lang="zh-tw">

中文內容…

中文內容…<span lang="en">英文內容</span>

中文內容…

</html>

第一原則 使用（目標）讀者易於理解的語言。

第二原則 使用的文字要在情境中具有意義。

第三原則 使用的文字要在情境外具有意義。

第四原則 小心處理表情符號跟非正式書寫模式。

圖表 E .自然語言的親合力原則（引用自 Jedi＇s BLOG，2007 年 05 月 16 日）

66 以下是二點規範中關於自然語言的檢測碼 (1) 明確地指出網頁內容中語言的轉換

。

(2) 明確指出網頁文字所使用的自然語言

。

(B)縮寫與組合字

遭遇到機關部門名稱或是專有名詞等等，文句中常使用到縮寫(abbreviation)與組合字 (acronym)，這樣雖然能精簡文句，但許多人仍不瞭解其背後的真正意思，因此為增 加可及性，設計師有必要說明其背後的全名或是完整的意思。這時可以使用 abbr 標 籤及 acronym 標籤加入 title 屬性來進行詳細說明縮寫與組合字。值得一提的是 abbr 標籤 IE 並不支援。

<abbr title="Severe Acute Respiratory Syndrome">SARS</abbr>

<acronym title="High Technology">Hi-Tech</ acronym >

以下是規範中關於縮寫與組合字的檢測碼

z 使用 abbr 及 acronym 標籤表示網頁中呈現的文字縮寫與簡稱

。

B.1.3 確保使用者能處理時間敏感內容的改變 (A)閃爍與動態效果

不斷閃爍的畫面令許多人感到不悅，不僅易分散使用者注意力使得閱讀困難，也容 易造成眼睛的疲勞，甚至可能造成光源性癲癇患者(photosensitive epilepsy)的生命危險 (Jeffrey Zedman，2002)。blink 標籤是 Netscape 開發的功能，目的是讓文字不斷的閃爍，

IE 瀏覽器並不支援此標籤。此外，IE 的 marquee 標籤的跑馬燈功能也如同 blink 標籤 一樣都應該盡量避免，而採取重點式的設計(黃朝盟，2002)，直至目前 XHTML 仍不

IE 瀏覽器並不支援此標籤。此外，IE 的 marquee 標籤的跑馬燈功能也如同 blink 標籤 一樣都應該盡量避免，而採取重點式的設計(黃朝盟，2002)，直至目前 XHTML 仍不