第五章 結論與建議
B.4 原則四：網頁瀏覽機制的可及性
B.4.1 提供內容導引資訊 (A)名稱與資訊
為了讓使用者更加清楚網頁中的每個資訊與功能，在分割頁框上，網頁設計師必須 在每個頁框的 frame 標籤中加入 title 屬性，說明這個頁框的功用，若需要更詳細的 描述其中的內容與功用，和上述替代方案一樣，以 longdesc 屬性提供其它檔案或網 頁補充說明。
<frameset cols="150,*" frameborder="yes" border="2" framespacing="0">
<frame src="網頁 1" title="網頁 1 說明" longdesc="補充說明網頁 1 的檔案">
<frame src="網頁 2" title="網頁 2 說明" longdesc="補充說明網頁 2 的檔案">
</frameset>
(1) 需要定義每個頁框的名稱
(2) 如果頁框名稱無法描述頁框中的內容的話，應加上額外敘述
(B)群組
為了建立清楚的視覺階層，使用 div 或 ul 標籤將網頁內容中有相關的功能與元素群 組起來，不僅可讓網頁設計師更方便套用樣式表，也可以讓使用者更容易聯想與瞭 解其內容的歸類與屬性。
80
<div>
<h1>標題</h1>
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
</div>
表單也是一樣，使用 fieldset 標籤將相同性質表單項目群組在一起，來與其它群組的 表單進行區隔，並使用 legend 標籤標示此群組的性質與功能。在下拉式選單的部份，
雖然Steve Krug認為下拉式選單在大部份情況下是弊多於利（2006），但因為其節省 空間且充滿效率，仍然有許多設計師偏好使用。值得注意的是，下拉式選單大量的 項目最好依字母或筆劃排列，並可以在 select 標籤中增加 optgroup 標籤，將相同性質 的選項群組起來，方便使用者進行查找與點選。
<form>
<fieldset>
<legend>群組說明 1</legend>
<label for="lastname">屬性名稱 1</label>
<input type="text" id="屬性名稱 1" tabindex="1" value="預設值或說明">
<label for="firstname">屬性名稱 2</label
<imput type="text" id="屬性名稱 2" tabindex="2" value="預設值或說明">
</ fieldset >
< fieldset >
< legend >群組說明 2</ legend >
…
< fieldset >
</form>
<form>
<label>屬性名稱 1</label>
<select>
<optgroup label="群組名稱 1">
<option selected>項目 1</option>
<option>項目 2</option>
<option>項目 3/option>
</optgroup >
81
< optgroup label="群組名稱 2">
<option>項目 4</option>
<option>項目 5</option>
<option>項目 6</option>
</optgroup >
</select>
</form>
以下是規範中關於群組的檢測碼
(1) 儘可能將網頁內容有相關之元素聚集在一起 (2) 把太長的選單項目群組起來
(3) 在表單控制項中，使用 fieldset 及 legend 標籤作群組間的區隔
B.4.2 提供清楚的瀏覽網站機制 (A)超連結與導覽列
超連結能夠幫助使用者快速連結到所要的資訊，但大部份的超連結說明都過於簡略 且含糊不清，增加了使用者查找資料的時間，因此超連結說明必須有意義且清楚明 白，也可以在 a 標籤中加入 title 屬性提供文字說明，以區別不同的連結，讓使用者 不必藉由上下文脈絡就可以瞭解該連結的功能。而相同屬性的超連結，也要細心的 使用 div 標籤群組包圍起來，以 id 屬性說明群組內容。
<div id="群組說明">
[<a href="錨點 1" >略過群組超連結</a>][<a href="網頁 1">超連結 1</a>]
[<a href="網頁 2">超連結 2</a>][<a href="網頁 3">超連結 3</a>]
[<a href="網頁 4">超連結 4</a>][<a href="網頁 5">超連結 5</a>]
[<a href="網頁 6">超連結 6</a>]
</div>
<a name="錨點 1" tabindex="1">網頁主要內容</a>
…網頁主要內容…
一個網站的每一個部份都採用類似導覽設計的網站，就顯然比每一頁都全然不同的 網站，更能在較短的時間讓使用者熟悉(黃朝盟，趙美慧，2002)。讓使用者快速的連 結到所需要的資訊，Nielsen也指出要將主導覽區列置於比較明顯的地方，最好能緊 鄰網頁主要內容(2002)。還有一點非常重要，Mark Pilgrim認為要比導覽列更先呈現 主要內容(2002)，為了增加網頁親和性，必須在導覽列群組附近加入略過此群組的 超連結，此功能對一般人來說沒有什麼作用，但是文字瀏覽器在每次載入時，就會 線性的重頭開始轉譯導覽列，因此有必要在導覽列群組的最前方以錨點與 tabindex 屬性增設「略過導覽列」的超連結以及快速鍵，避免身心障礙者得經過手動才能跳 過導覽列閱讀內容。此外，網頁設計師也可以將此超連結在 CSS 的屬性設為不顯示，
82 增加網頁版面的美觀。
以下是規範中關於超連結與導覽列的檢測碼
(1) 設計並確保有意義的超連結說明，便於網頁內容的閱讀 (2) 如果需要的話，為每個超連結加上內容描述
(3) 指向不同網址的超連結，不可使用相同的超連結說明 (4) 能辨別出意義上有群組相關的超連結
(5) 若有群組超連結，在群組之前增設一項繞過此區域的超連結 (7) 網頁設計使用清楚且一致的導覽機制
(8) 提供網頁導覽連結工具列，以利存取網站導覽結構
(B)標題
Mark Pilgrim認為：「網站上的每個頁面，都該有個獨一無二且具有意義的頁面標題 (2002)。」瀏覽器視窗必須為每個網頁提供標題，也就是title標籤，「我的最愛」功能 便是以此網頁主標題做為預設名稱，視窗標題也利於搜尋引擎查找到你的網頁，因 此對於視窗標題的命名必須特別注意，Nielsen便認為視窗標題必須是帶有資訊的，
其中應包含此網頁的簡述，文字內容不能太長 31，此外標題、段落、及列表之前也 都最好使用標題標籤進行說明，標題標籤以h1~h6 的順序簡潔明瞭的讓使用者瞭解 其內容的重要性與其在巢狀階層中的位置。
(1) 使用能讓使用者瞭解的詞彙。
(2) 讓使用者不必閱讀全文，就能概略瞭解該主題的相關網頁內容。
(3) 避免誤導，讓讀者不必浪費時間到不感興趣的網頁。
圖表 O. 標題 (引用自黃朝盟，趙美慧，2002)
以下是規範中關於標題的檢測碼 (1) 為網頁加上標題
31 Nielsen的 113 條首頁設計法則中提到視窗標題的有第 72、73、74、75 與 76 條，分別是：
72 條 使用一些帶有資訊的字眼做為視窗標題的起始，通常為公司名稱。
73 條 無需將最上層的網域名稱像是".com"，也放到視窗標題裡，除非它跟"Amazon.com"一樣算是公 司名稱的一部份。
74 條 無需把"Homepage"也放到視窗標題裡，這種做法毫無意義。
75 條 視窗標題應該包含對此網站的簡述。
76 條 視窗標題不能太長，最好不要超過七或八個字，而且少於 64 個字母。
83
(2) 在網頁標題、段落、及列表之前，提供辨別訊息以利識別
(C)網頁資訊
網頁設計師可以在 head 標籤中註明各種關於此網頁的資訊，包括語言、編碼、內容 資訊、關鍵字、著作權、作者資訊與連絡方式…等等。此外，使用 link 標籤與 rel 屬性可以標示出此頁在整個網站內的所在位置，某些瀏覽器(如 Opera)還可以應用此 資訊顯示於標頭功能中，link 標籤與 rel 屬性還可以指定外部連結的 CSS 檔案等其它 附加資訊。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=編碼種類">
<meta http-equiv="description" content="內容概要">
<meta http-equiv="keywords" content="關鍵字">
<link rel="next" href="下一頁連結">
<link rel="prev" href="上一頁連結">
<link rel="start" href="首頁或第一頁連結">
<link rel="glossary" href="專有名詞解說頁連結">
<link rel="index" href="索引頁連結">
<link rel="up" href="上一層頁連結">
<link rel="first" href="第一頁連結">
<link rel="last" href="最後一頁連結">
<link rel="help" href="說明頁連結">
<link rel="copyright" href="著作權頁連結">
<link rel="author" href="關於作者頁連結">
<link rel="search" href="搜尋頁連結">
<link rel="made" href="製作者的電子郵件地址">
<link rel="stylesheet" type="text/css" href="外部 CSS 檔案" media="指定方式">
</head>
以下是規範中關於網站資訊的檢測碼
(1) 使用 metadata 標籤來記載電腦可以了解運用的網頁資訊 (2) 以 metadata 標籤來識別網頁文件包含於整體文件內的所在位置
(D)網站地圖
提供網站地圖(圖表 P)是必要的，它除了指明整個網站的結構，也可以防止使用者迷 失在眾多的網頁之中，除此之外，還可以提供此網站使用了哪些親和性的功能，如
84 快速鍵與網頁定位點的說明…等等。
圖表 P. 網站地圖 以下是規範中關於網站地圖的檢測碼
z 為網站提供網站地圖或整體性的簡介
(E)搜尋
網站具有搜尋功能是相當重要的，Steve Krug 甚至認為每一頁都應該有個搜尋欄位 (2006)，其搜尋功能應該有文字欄位與名為 SEARCH 按鈕，提供使用者直接且快速 的方式找到想要的資訊，可以的話，提供不同的搜尋方式選項，讓使用者依自己的 需要提供更快速的搜尋。
z 若網站具有搜尋功能，可以設計不同的網頁內容搜尋方式，以提供不同技能與喜 好者搜尋選用
(F)其它
請不要在網頁的內容使用文字排列成圖形的 ASCII 文字藝術，如此不僅造成語音合 成器與點字機等等無法轉譯出正確資訊，也會混淆使用者。
z 避免在網頁上使用 ASCII 文字藝術
85
附錄 C
附錄 C 為第一階段問卷調查結果之描述性統計、問卷調查回收狀況、受測者的背景、製作的無 障礙網頁與製作動機等，並對於無障礙網頁設計者的基本認知來進行調查。後半部份是對於網站 結構規劃、編輯設計與檢測認證的看法進行描述性統計資料分析。
A.受測者背景資料分析
本項目原本是置於問卷最後一個大項，為調查第一部份「調查 1-1」的範圍。為了對 於受測者進行初步瞭解，首先將五十四位受測的無障礙網頁設計者所回傳的有效問卷 資料進行統計，結果說明如圖表 Q。
類別 項目 人數 百分比%
男 31 57.41%
性別
女 23 43.59%
18(含以下)至 25 歲 19 35.19%
26 至 35 歲 28 51.85%
年齡
36 至 40 歲(含以上) 7 12.96%
高中職(含以下) 3 5.56%
大學(含專科、科技大學、技術學院) 38 70.37%
學歷背景
碩士 13 24.07%
自然科學 1 1.85%
工程 / 科技 3 5.56%
電子 / 資訊 18 33.33%
管理 / 商學 6 11.11%
社會科學 1 1.85%
人文 2 3.70%
專長領域
藝術 / 設計 23 42.59%
不滿半年 3 5.56%
半年以上不滿一年 4 7.41%
網頁製作資歷
一年以上 47 87.04%
圖表 Q. 受測者背景資料分析
(1)性 別：男性三十一位，佔有效樣本的百分之五十七點四一；女性二十三位，佔 有效樣本的百分之四十三點五九。問卷回收的男女網頁設計者比率相差 並不大。
(2)年 齡：十八(含以下)到二十五歲十九位，佔有效樣本的百分之三十五點一九；
(2)年 齡：十八(含以下)到二十五歲十九位，佔有效樣本的百分之三十五點一九；