第五章 結論與建議
B.3 原則三：網頁開發和輸出入裝置相關技術處理的可及性
B.3.1 確保網頁能在新科技下良好地呈現 (A)樣式表
支援 CSS 的瀏覽器除了 IE 6 以外，IE7、Opera、Netscape、Firefox、Mac 的 Safari 與 文字瀏覽器 Lynx 對於 CSS 的支援都不太相同，許多 CSS 的新功能可能在舊的瀏覽 器也無法顯示，因此網頁設計師在設計網頁樣式時，可以使用 dl、dt 和 dd 標籤，如 此即使是移除版面樣式時，網頁也能傳達正確的資訊與維持原有的版面編排。
<div class="style">
<dl>
<dt class="style1">項目 1</dt>
<dd class="style2">項目 2</dd>
<dd class="style2">項目 3</dd>
<dd class="style2">項目 4</dd>
<dt class="style1">項目 5</dt>
<dd class="style2">項目 6</dd>
<dd class="style2">項目 7</dd>
<dd class="style2">項目 8</dd>
</dl>
</div>
以下是規範中關於樣式表的檢測碼
z 使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀。
73 (B)頁框
對於使用性與親合性來說，多數專家不建議使用頁框（如Jakob Nielsen），其原因是 許多瀏覽器無法支援，也會造成使用者迷惑於眾多網頁之中。規範中指出若要使用 頁框，頁框的內容都必須是 HTML 檔案，否則單一檔案(如圖片檔)無法加入替代文 字。設計師最好還必須提供 noframe 標籤，讓無法顯示頁框的時候，仍有 noframe 標 籤內的替代方法。此外，自從 HTML 4.0，提出了 inline frame（iframe 屬性），部份的 網頁內容可以嵌進其他獨立的網頁檔案，ifame 的檔案並不影響使用者的導覽，因此 Jakob Nielsen也建議設計者，可以使用 inline frame 在非得使用頁框設計的時候。
<frameset rows="*" cols="*,50%">
<frame src="a.htm" title="標題 1">
<frame src="b.htm" title="標題 2">
<noframes>
<p> a.htm 無法顯示之替代說明<p>
<p> b.htm 無法顯示之替代說明<p>
</noframes>
</frameset>
以下是規範中關於頁框的檢測碼 (1) 頁框連結必須是 HTML 檔案。
(2) 使用頁框時要指定不支援頁框時的辦法。
(C)程式
網站 the counter.com 曾經統計出有 11% 的網際網路使用者因為某些原因而不使用 Javascript (2002)，為了避免對於某些程式(如 script 或 applet)不支援的瀏覽器無法呈現 正確的資訊，因此網頁設計師也必須提供如 noscript 等標籤或替代文字，讓遭遇到不 支援此程式瀏覽器的使用者可以有其它的替代方法。
此外，若是利用 script 驅動事件(event)時，考慮到肢障者可能有操作上的障礙，必須 加 入 滑 鼠 以 外 的 操 作 方 式 ， 並 使 用 應 用 層 級 (application-level) 的 事 件 驅 動 裝 置 (triggers)，如在操作的部份加入 onfocus、onblur 與 tabindex 屬性讓鍵盤也能夠驅動事 件(圖表 I)。
74
Use(若使用)… …With(請搭配) Onmousedown Onkeydown
Onmouseup Onkeyup Onclick Onkeypress Onmouseover Onfocus
Onmouseout Onblur 圖表 I. 與滑鼠對應的鍵盤屬性
<script>
程式內容
</script>
<noscript >
<p>程式內容無法顯示之替代說明</p>
</noscrupt>
<a href="連結網址" onMouseOut="MM_swapImgRestore()" onBlur="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image19','','圖片 2 檔案',1)" onFocus="MM_swapImage('Image19','','圖片 2 檔 案',1)"><img src="圖片 1 檔案" alt="替代文字說明" name="Image10" width="100" height="27"
border="0"></a>
以下是規範中關於程式的檢測碼
(1) 使用 Script 語言需指定不支援 Script 時的辦法。
(2) 若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達。
(3) 若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作。
B.3.2 確保嵌入式使用者介面具有直接可及性
這一節如同上述，說明從外部嵌入的 scripts、applet 或是 objects 標籤裡的程式、圖片與動 畫等等，為了避免瀏覽器不支援而造成重要資訊無法顯示，網頁設計師必須提供額外不 支援時的替代方案。
B.3.3 設計裝置獨立網頁 (A)滑鼠以外的操作
為了讓肢障者、難以操作滑鼠的使用者或者是在沒有滑鼠可以操作的環境下能使用 輔具或鍵盤來操控，規範中說明了滑鼠以外的操作介面有下列三項（圖表 J）：
75
(1)確保需要滑鼠來啟動的事件，都可以使用鍵盤或其他方式來啟動。
(2)在網頁適當的地方提供快速鍵、選單或按鍵來代替滑鼠的使用。
(3)不要在網頁上設計需要滑鼠來啟動的事件。
圖表 J. 規範中，滑鼠以外的操作介面
在選擇方面，為了讓使用者可利用鍵盤 tab 鍵讓動作框逐一移過各個控制項直到選 擇到所要的選項，其順序必須細心安排，由上至下，由左到右，最好是諮詢使用者 的意見，才不會讓使用者迷惑，但如同Joe Clark認為：「Web developers are visual people. It is hard for them to imagine being blind. (2003)」，這在網頁設計者的實際製作 過程中很難完全實現。
網頁設計師可以使用 tabindex 屬性設定焦點移動的順序。而在驅動事件的方面，除 了使用 onfocus 與 onmouseover 屬性之外，表單傳送按鈕可以加上 onKeyPress 屬性，
讓鍵盤也能夠驅動事件與按鈕。
<img onmouseover="alert('文字內容')" onfocus="alert('文字內容')" tabindex="2" src="圖片 1 檔案">
以下是規範中關於程式的檢測碼
(1) 具體指出按下 Tab 鍵在表單控制項，超連結及物件間移動的順序。
(2) 對所有網頁內容元素，確保有滑鼠以外的操作介面。
(3) 確保事件的啟發不要求一定得使用滑鼠。
(B)快速鍵
由於純文字瀏覽器、語音合成器或是點字機是以線性的方式閱讀網頁中的內容，為 了增加親合性，即使使用者在瀏覽的過程中突然離開或中斷，他們之後想要繼續瀏 覽時，就可以使用快速鍵搭配「:::定位點(原名網頁導盲磚)」迅速到達網頁上任何一 個區塊，不必再重頭開始瀏覽。圖表 K是規範中對於定位點的功能說明。
(1)快速跳躍至網頁不同區塊，可避免使用者迷失在網頁中。
(2)方便使用者在各框架頁(frame)間快速移動。
(3)可導引使用者依自己需要，跳至所需的區塊中。
圖表 K. 定位點的功能說明
定位點最好再加上輔助說明區塊的位置，並連結到說明頁面，此外，可以將定位點 顏色設定與背景色相同來加以掩蓋，避免定位點破壞畫面。
為了加快使用者迅速找到常使用的超連結，以及方便無法使用滑鼠的使用者使用表 單元件，都應該提供快速鍵以利操作。網頁設計師在製作快速鍵時是使用 accesskey
76
屬性進行設定，並附上 title 屬性說明功用，讓使用者搭配鍵盤 ALT 鍵進行快速鍵的 操作，但必須注意的是，快速鍵不宜與瀏覽器預設的 ALT 快速鍵重覆(圖表 L)，也 最好與數字做搭配(圖表 M)，避免造成不必要的困擾。
快速鍵 功能
ALT+F 檔案 ALT+E 編輯 ALT+V 檢視 ALT+A 我的最愛 ALT+H 說明 ALT+T 工具
ALT+D 選取 ［網址］ 列中的文字 圖表 L. 會與 IE 瀏覽器衝突之快速鍵
鍵盤快速鍵 功能 Alt+0 親和力聲明 Alt+1 主頁面 Alt+3 目錄 Alt+4 搜尋 Alt+8 使用聲明 Alt+9 回饋
圖表 M. 建議使用的快速鍵
＜a accesskey="L" href="intro.jsp" title="左側區域"＞ ::: ＜/a＞
＜a accesskey="C" href="intro.jsp" title="中間區域"＞ ::: ＜/a＞
＜a accesskey="R" href="intro.jsp" title="右側區域"＞ ::: ＜/a＞
以下是規範中關於快速鍵的檢測碼
(1) 對經常使用的超連結，增加快速鍵的操作。
(2) 對於表單元件考慮提供鍵盤快速鍵的操作。
B.3.4 使用過渡的解決方案 (A)連結
Mark Pilgrim認為強迫鏈結會開出一個新視窗（pop-up）而讓「上一頁」按鈕失效，
進而破壞前一個視窗的瀏覽歷程，因此也不建議使用<a target="_blank">標記來強迫 開啟新視窗(2002)。也請不要用 script 語言自動轉移網頁的網址，而應該讓使用者自 行決定是否要開啟新的視窗連結。必須注意的是，在開啟一個新視窗連結之前，網 頁設計師有義務預先告知使用者，以避免使用者不經意開啟過多新的視窗而迷失其
77
中，並且造成網路連線的負擔。此外，在多個相鄰的連結之間，為了增加識別性，
請以[ ]、( )、{ }、|、－…等符號加以區隔。
[<a href="新視窗網址" target="_blank">連結說明(另開新視窗)</a>]
[<a href="新視窗網址" target="_blank">連結說明(另開新視窗)</a>]
[<a href="新視窗網址" target="_blank">連結說明(另開新視窗)</a>]
以下是規範中關於連結的檢測碼
(1) 除非使用者知道將會開啟一個新視窗，不要隨便開啟一個新視窗。
(2) 如果使用 script 語言開啟新視窗或改變目前視窗的網址，要讓使用者能事先知道。
(3) 勿單以空白間隔分開相連之超連結。
(B)表格
對於只有直欄格式的資料表格，應該提供替代的線性文字網頁，避免使用者混淆。
<a href="線性文字網頁">表格內容說明</a>
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<td>表格內容 1</td>
<td>表格內容 2</td>
</tr>
</table>
以下是規範中關於表格的檢測碼
z 若有以表格直欄格式呈現的網頁文字內容時，提供線性文字替代。
(C)表單
表單控制項若沒有適當的配合說明，使用者將難以進行表單的操作，除了說明內容 必須簡單明瞭之外，也需注意擺放的位置，以提高親和性。網頁設計師可以利用 label 標籤來註明表單控制項說明。此外，無論是表單的單行文字欄位與多行文字區域，
必須顯示預設值或說明，讓使用者更容易理解要填入的內容以進行輸入的動作。
78
<form>
<label for="屬性名稱 1">表單控制項說明</label>
<input type="text" name="說明 1" id="屬性名稱 1" value="預設值或說明">
< label for="屬性名稱 2">工作經歷：</ label >
< textarea name="說明 2" id="屬性名稱 2" rows="行數" cols="字元寬度">
多行文字區域預設值或說明 </textarea>
</form>
以下是規範中關於表單的檢測碼
(1) 在表單控制項上，以 label 標記提示資訊
(2) 確保表單的控制項與控制項說明之間的配合很適當。
(3) 在網頁文字輸入區中須有預設值。
B.3.5 使用國際與國內官方訂定的技術和規範 (A)版本與語碼
因為推行樣式表的關係，W3C 公布許多 HTML 4.0 以後負面的標籤與屬性（圖表 N）， 網頁設計者必須加以避免沿用這類過時的 HTML 語法，而使用取代上述的新標籤與 屬性。此外，在設計製作時，版本使用上也必須跟隨最新的國際標準規範，如使用 HTML4.0 與 CSS2 版本進行無障礙網頁開發，減少各瀏覽器相容性的問題。
負面的格式設定標籤 負面的外觀屬性 其它負面
center alink applet
basefont vlink isindex
font bgcolor dir
strike 或 s color menu
u link
圖表 N. 過時的 html 語法(引用自Steven H.)
以下是規範中關於版本與語碼的檢測碼 (1) 避免使用過時的 html 語法。
(2) 儘量使用開放性的最新國際標準規範。
79 (B)彈性的樣式與內容
由於無障礙網頁服務的對象是所有使用者而不是單單僅為了身心障礙者，因此如果 可以，多提供幾種呈現樣式以及內容，以及使用開放型的格式(如 pdf)，讓使用者自
由於無障礙網頁服務的對象是所有使用者而不是單單僅為了身心障礙者，因此如果 可以，多提供幾種呈現樣式以及內容，以及使用開放型的格式(如 pdf)，讓使用者自