第五章 結論與建議
B.2 原則二：網頁結構和呈現處理的可及性
B.2.1 不要單獨靠色彩來提供特殊資訊
對於視障者來說，網頁上藉由顏色所傳達的資訊是沒有意義的，因此網頁設計者必須 以文字清楚的說明每個顏色代表什麼意思，哪些內容又屬於這個顏色，重點可以以粗 體或斜體標示出來，底線則可以代表連結。弱視者、老年人或是使用黑白或單色螢幕 的使用者，過於接近的顏色並不容易分別，因此網頁設計者需注意內容色彩與背景色 應該有明顯的對比以利使用者識別。此外，為了能讓使用者的電腦快速下載，網頁背 景應該越單純越好(黃朝盟，趙美慧，2002)，過於花俏炫目的背景會造成使用者視覺疲 勞與過度刺激，必須加以避免以增加識別性，一般來說深顏色的文字附在淺色的背景 上通常是增加對比的最好方法。
以下是規範中關於色彩的檢測碼
(1) 確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來。
(2) 確保前景顏色與背景顏色彼此呈現明顯的對比。
3.2.2 適當地使用標記語言和樣式表單 (A)難以表示或複雜的內容
許多複雜的數學算式或是化學元素符號，不好用普通文字呈現，許多網頁設計師會 選擇以圖片方式表達此類複雜的內容，雖然方便卻會造成文字瀏覽器與語音合成器 的無法解讀，對於身心障礙者造成困擾，因此遭遇此類內容時仍必須使用存在的 HTML 或 XHTML 標籤加一顯示出來。
<p>y=2x<sup>2</sup>-3x+7</p>
<p>H<sub>2</sub>O</p>
以下是規範中關於難以表示或複雜的內容的檢測碼
z 以實際存在的標記語言(如 MathML)呈現網頁內容(如數學方程式)，避免使用圖形 影像呈現。
(B)標籤語碼的使用
網頁的一開始，必須使用 DOCTYPE 標籤來指定這個網頁想要使用的「文件類型定 義（document type definition）DTD」，並指定您要使用哪個 HTML 或是 XHTML 版本(圖 表 G)，通常在網頁製作一開始，網頁編輯軟體就自然動幫你加上了，但必須注意不 同的瀏覽器對於不同版本的顯示會有差異。
69
版本 DOCTYPE 標籤內容
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">
圖表 G. 不同版本的 DOCTYPE 標籤
<p>何謂<q>領導潛在素質</q>？雷蒙卡特爾曾說： </p>
<blockquote>"優秀領導者所具備之品格特征包括如下幾個方面：情緒穩定、主導能力富有熱情、勤勤 懇懇、處世大膽、意志堅強、自信、自制力。"< /blockquote >
以下是規範中關於標籤語碼使用的檢測碼
70 (C)結構與排版
許多人僅使用方便的表格進行排版，造成文件內許多不必要的樣式設定，如此不但 加重傳輸頻寬的負荷與伺服器的工作負擔，更對於文字瀏覽器、語音合成器與點字 機等在轉譯時產生困難，因此造成身心障礙者不易閱讀的問題，日後也不易更新。
因此為了網頁可及性與符合Web標準，最好使用少量XHTML表格建立版面配置，盡 量使用CSS(Cascading Style Sheets)30，避免使用巢狀結構的多層表格(Jeffrey Z.，2002)，
如此不但讓各種裝置與瀏覽器皆能存取網頁，也大大減少轉譯上的干擾與障礙。如 今IE6 瀏覽器已支援了大部份的CSS功能設定，因此網頁設計師還必須小心某些瀏覽 器不支援CSS樣式表的顯示結果問題。
今日顯示器推陳出新，各種尺寸的瀏覽大小與解析度會造成不同的網頁顯示結果。
雖然 Web 標準的預設字型大小為 16px/96ppi，許多網頁設計師為了美觀便進行字型 大小的更改，卻造成了老年人與弱視者的困擾。另一個困擾使用者的原因是有關於 網頁的列印輸出，其格式大小也難以控制。這時雖然使用絕對尺寸單位（px），各家 瀏覽器便不會如相對尺寸（％）一般難以控制，卻讓使用者無法依自己的需求變換 版面或字型大小。因此Jokob Nielsen還是認為，解決上述問題的主要原則就是以百 分比來進行寬度設定，而字型大小也可以依使用者的偏好進行變換(2000)。無障礙網 頁開發規也建議以相對尺寸(如%與 em)來進行設定，或者利用 DOM 等方式，在瀏覽 器未提供文字縮放功能時，仍可讓使用者選擇文字的大小(Jeffrey Z.，2002)，藉此增 加親合性與使用性。附帶一提的是網頁字型最小不要小於 9px，網頁設計師可在 CSS 的 font-size:設定 xx-large、x-large ~ x-small 與 xx-small 等 CSS 關鍵字來避免使用者難 以閱讀的困擾。
為了避免使用者迷惑，版面使用巢狀標題可以讓使用者更清楚整個文件的結構，並 增加一致性。內文的排版上，h 標籤必須以 h1~h6 的順序進行標題設定。
<h1>最大標題</h1>
<h2>大標題</h2>
<h3>中標題</h3>
…
<h6>最小標題</h6>
以下是規範中關於結構與排版的檢測碼
(4) 盡可能使用樣式表單控制網頁排版與內容的呈現。
(5) 要使用相對尺寸(如 %)而非絕對尺寸(如像素)。
(6) 適當使用巢狀標題呈現文件結構。
30 CSS(Cascading Style Sheets)，串接式樣式表：一種供撰寫樣式表之用的語言。
71 B.2.3 建立編排良好的表格
由於明眼人有具有跳耀式的視覺能力，因此很容易可以感受到表格的便利性，但對於 視障者而言，錯綜複雜的表格無疑是如團霧般的迷宮，往往令其深陷其中而不知所云，
其主因為視障者只能接受線性排列的資料(蘇聖煌，2006)。因此若非必要，最好不要使 用表格表格。表格對於文字瀏覽器、語音合成器與點字機等等在轉譯時是從左到右，
從上至下的順序以線性的方式閱讀。
這一節的規範主要說明的是「資料型的表格」而不是「排版用的表格」設定。一般皆 使用 table 標籤來製作表格，並加入 summary 屬性為表格提供摘要。此外，必須使用 caption 標籤加上表格標題。行於列的標題皆使用 th 標籤進行設定，標題名稱若過於冗長，可 以使用 abbr 標籤加以簡化。th 標籤可以使用 id、scope 與 axis 屬性指定儲存格之間的結 構關係，而表格內容則以 td 標籤設定，並以 headers 屬性指明該儲存格所對應的 id 屬性，
方便使用者查找與對應。
<table border="1" summary="表格摘要">
<caption>表格標題</caption>
<tr>
<th></th>
<th id="h1" axis="屬性 1">標題說明 1</th>
<th id="h2" axis="屬性 1">標題說明 2</th>
<th id="h3" axis="屬性 1">標題說明 3</th>
</tr>
<tr>
<th id="h4" axis="屬性 2">標題說明 4</th>
<td headers="h1 h4">內容 1</td>
<td headers="h2 h4">內容 2</td>
<td headers="h3 h4">內容 3</td>
</tr>
<tr>
<th id="h5" axis="屬性 2">標題說明 5</th>
<td headers="h1 h5">內容 5</td>
<td headers="h2 h5">內容 6</td>
<td headers="h3 h5">內容 7</td>
</tr>
</table>
72 以下是規範中關於資料表格的檢測碼
(1) 在網頁內容呈現設計時，避免以表格做多欄文字的設計。
(2) 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題。
(3) 資料表格須提供標題說明。
(4) 表格行列過長的標題，須提供縮寫或簡稱。
(5) 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係。
(6) 表格須提供表格摘要說明(如 summary 屬性)。
(7) 若表格只做為版面配置時，勿使用表格之結構標記(如 th 標籤)作為網頁格式視覺效 果。