無障礙網頁設計技術手冊 - asec.com.t · web view1.1 h101000...

，而應該是。

規範三、適當地使用標記語言和樣式表單

3-1以適當的標記語言而不是圖片來傳達資訊[第二優先等級]

3-1-1結構與呈現

同2-1-1

3-1-2以現有的標記語言(如MathML)呈現替代影像

網頁中的影像對一些使用非圖像式瀏覽器(non graphical browser)的視障者而言，幾乎是沒有意義的。因此一些需要格式化的資訊，例如數學方程式，應以現有的標記語言(如MathML)取代圖像。

數學方程式：y=2xeq \o(\s\up 5(2　),\s\do 2(　))-3x+7

3-1-3關於所呈現的內容

對於重要的圖像應該提供文字說明；對於藉由樣式表呈現的重要文字或圖片(如透過" background-image","list-style",or"content"屬性)，也一樣必須提供替代文字，以確保在樣式表不被支援時，網頁中的重要資訊也一樣可以正確地傳達。

3-2在DOCTYPE中，使用標準規範的敘述，以識別網頁的HTML版本類型[第二優先等級]

3-2-1 DOCTYPE敘述

由於W3C長期以來致力於檢視網頁可及性的相關設計，並且制定許多HTML的標準規範，因此，目前身心障礙者所使用的瀏覽器，多是以W3C所制定的HTML標準為設計的準則。故網頁起始標題必須標明網頁設計所使用的HTML版本，以供瀏覽器作識別解讀。

舉例，網頁若使用HTML 4.01版本語言撰寫，可在W3C網站查詢到正確寫法http://www.w3.org/TR/html401/struct/global.html#idx-document_type_

declaration-3）。下面是宣告HTML 4.01版本語言的三種寫法：

上列三種DTD的宣告，說明如下：

· 第一種"strict.dtd"是用來宣告網頁文件中所用的所有標籤和屬性都是目前未被列為負面的。網頁的設計應儘可能使用此種嚴謹的語言寫法，以符合未來HTML的發展。

· 第二種"loose.dtd"包含了上述的"strict.dtd"所涵蓋的標籤與屬性以及負面標籤與屬性。如果在網頁呈現上有特別需求時，可用此類標籤及文件宣告。

· 第三種"frameset.dtd"包括上述"loose.dtd"的所有標籤，以及視窗分割標籤。當使用HTML4.01語言作網頁視窗分割設計時，應用此宣告。

3-3使用樣式表控制網頁排版與內容的呈現[第二優先等級]

同2-1-1

3-3-2重點強調

網頁上的文字須作重點強調時，應該使用EM及STRONG等強調標籤，而非使用I斜體字標籤及B粗體字標籤僅為呈現視覺上的差異性。

下面的兩個例子在網頁上的結果看似相同，但是前面的設計不當之處是用B標籤來呈現粗體的效果，第二個例子則是使用STRONG標籤的正確示範，除了能顯現粗體的效果也能明確標示出資料的重要性。

另外，在HTML 4.01中關於文字編輯的相關標籤和屬性，雖尚未全部被視為"負面"，但已被W3C建議盡量用樣式表來取代。已被HTML 4.01列為負面性的相關文字編輯標籤有、、及等，至於HTML第四版的負面標籤資料請見本手冊附錄四，或查詢W3C網頁：http://www.w3.org/TR/WCAG10-HTML-TECHS/#html-index。

3-3-3文字取代圖片

網頁開發者應該儘量使用樣式表(style sheet)而不是透過圖片來編排文字。對於視障者而言，雖然大部分的視障者藉由語音合成器(speech synthesizers)、點字閱讀機(braille displays)、圖像顯示機(graphical displays)等輔助器材可以閱讀透過圖片所傳達的訊息，然而，如果網頁開發者使用樣式表更能夠有效的控制網頁內容文字的編排，如顏色、字型、大小、粗細以及段落邊界等。對於已用為文字特殊效果的文字圖片，則應該加上適當替代文字。

3-3-4文字的編排

提供以下幾項CSS2屬性用來控制文字的編排：

· 'text-indent'：文字縮排應使用'text-indent'，而非BLOCKQUOTE或是其他結構元件達到首行縮排的效果。

· letter/word spacing：此兩種屬性乃是在設定字母間/字與字之間的空白大小。如果以一般使用的空白鍵方法呈現”H E L L O”這樣的效果，可能造成視障者辨讀成五個獨立字母。因此，要控制字元之間距離的正確做法是使用"word spacing"屬性，不但可以達到視覺效果，同時也能夠確保不同瀏覽器解讀的正確性。

· 'direction','unicode-bidi'：可用來設定瀏覽網頁內容的方向。

· first-letter及first-line：這兩個屬性是CSS2中用來設定段落文字中第一個字或第一行的兩種標籤。

此一範例乃是使用樣式表呈現字首放大(drop-cap)的效果：

3-3-5透過樣式表呈現排版、定位、層次及對齊的效果

盡量使用樣式表達成排版、定位、層次及對齊的網頁編排效果，例如使用'text-indent'，呈現文字縮排、使用'margin-top'來控制元件上邊界與其他文件內容的空白距離、使用'float：left'產生文繞圖的效果、使用'empty-cells'在表格的空白欄位中，適當地呈現該欄位，不需要為視覺效果而輸入空白鍵。

3-4使用相對而非絕對的尺寸設計標記語言與樣式表[第二優先等級]

3-4-1視窗大小應使用相對尺寸(如%)而非絕對尺寸(如pixel)

由於使用者常會因個別使用需求，而調整瀏覽網頁內容的視窗大小，因此視窗大小應使用相對單位，以利視窗大小在改變後，依然維持其網頁內容的可讀性，並且視窗內容的位置可隨視窗尺寸彈性變動。

3-4-2計量單位

網頁上計量單位有以下三種方式：

· 以em而非以pt為尺寸計量單位

H1﹛font-size：2em﹜非H1﹛font-size：12pt﹜

說明：em為該元素所使用的字形的高度，pt為像素(pixel)

· 以相對尺寸(%)為計量單位：例如左邊界15%、右邊界10%

BODY { margin-left：15%；margin-right：10%}

· 以絕對的計量單位：建議如要輸出具體尺寸的時候(如名片輸出)使用絕對計量單位。

businesscard { font-size：8pt }

3-5使用header標籤呈現文件結構[第二優先等級]

同2-1-1

3-5-2章節標題

為了方便使用者辨讀內容較長的文件，應該適當地使用HTML中的標題標籤(H1~H6)呈現長篇網頁文件章節的層次結構(H1至H6標籤由上而下的方式註記文件的章節標題)，而非以HR水平線分隔的方式來區隔章節。另外在HTML中，應使用STRONG而不是H1至H6標籤呈現粗體字效。

3-6適當地使用條列以及條列項目[第二優先等級]

同2-1-1

3-6-2條列式清單

HTML中的DL、UL及OL標籤應用來作為條列式資料的呈現，而非用來作縮排的排版效果。

透過有序號的清單(Ordered lists)可以協助非視覺式使用者(例如視障者)瀏覽網頁內容，並且以有意義的方式組織網頁內容的結構，避免使用者迷失在清單中。例如，網頁上有以下兩種條列式項目的表達方式，第一種"1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1"比第二種"1, 1, 2, 1, 3, 2, 1"更能清楚地表達各項目資料的關係。

第一種第二種 1. 1.

1.1 1.

1.2 2.

1.2.1 1.

1.3 3.

2.1 1.3-6-3在HTML清單中提供上下文的說明

網頁開發者應該使用UL標籤呈現無序號的清單，以及使用OL標籤呈現有序號的清單並且可結合CSS2作適當網頁上下文的呈現。

除非瀏覽器可以支援CSS2或是可以透過其他的方法控制清單，否則網頁開發者應該對於巢狀的清單提供上下文的說明。下列的例子是透過CSS1機制(.endoflist{display: none})顯示當樣式表可以呈現時，要如何隱藏清單中該項目已經結束之記號，以及當樣式表無法呈現時，要如何顯示清單中該項目已經結束，以避免與其他項目混淆。

3-7以Q及BLACKQUOTE標籤來標記引用語而非用來縮排[第二優先等級]

在網頁中，為適當呈現段落中的引用文，應該使用Q與BLOCKQUOTE標籤來標記引用語及引用文，切勿使用此兩種標籤僅為呈現縮排效果。

規範四、闡明自然語言的使用

4-1明確指出網頁內容中語言的轉換[第一優先等級]

由於視障者多使用語音合成器或是點字閱讀機來讀取網頁內容，因此，網頁內容應該透過lang屬性設定多種不同的國家語言，以利語音合成器或點字機做不同國家語言的資訊轉換。主要語系碼分別為en(英語)、fr(法語)、de(德語)、it(義大利語)、nl(荷語)、el(希臘語)、es(西班牙語)、pt(葡萄牙語)、ar(阿拉伯語)、he(希伯來語)、ru(俄語)、zh(中文)、ja(日語)。

4-2使用ABBR及ACRONYM說明文字縮寫與字首簡稱[第三優先等級]

網頁中如果需要透過文字縮寫或字首語詞傳遞資訊時，應該使用ABBR及ACRONYM提供完整的文字資訊。

4-3明確指出網頁文件主要使用的自然語言[第三優先等級]

透過HTML標籤的lang屬性，標示出網頁內容主要使用的自然語言：

規範五、建立編排良好的表格

5-1對於存放資料的表格，標示出行和列的標題[第一優先等級]

視障者多藉由語音合成器或是點字閱讀機來辨讀網頁表格，但也僅能閱讀表格中的文字，無法理解表格的行列間相對從屬關係。因此針對表格的設計，必須使用headers或scope提供表格資料之間的結構關係，以方便非視覺性的瀏覽器解讀表格內容。

可使用id與headers屬性的配合，提供表格資料之間的結構關係。

語音合成器所呈現的如下：

對於一般使用者而言，此表格所呈現的如下：

議員姓名

消費咖啡杯數

咖啡種類

是否加糖

李小安

摩卡

吳大義

拿鐵

也可以使用scope屬性來呈現表格資料之間的結構關係。

5-2當表格中超過二行/列以上的標題時，須以結構化的標記確認彼此間的從屬關係[第一優先等級]

當表格內容必須結合行與列的標題提供完整資訊時，應針對表格中各行與列的標題，使用axis提供表格內容從屬關係，以利線性瀏覽器讀取表格內的資訊。

以下範例是使用axis屬性來提供下面這個表格之間的結構關係：

上述例子在一般瀏覽器中所呈現的表格資料如下：

王小強與李大明旅行開支表

餐飲費

住宿費

交通費

小計

王小強

92年10月18日

92年10月19日

小計

李大明

92年10月20日

92年10月21日

小計

總計

5-3避免以表格作多欄文字呈現的設計[第二優先等級]

同2-1-1

5-3-2表格排版

純文字瀏覽器皆以由左而右、由上而下的方式閱讀表格。因此如果要使用表格編排版面時，必須確保表格內容能夠以由左而右、由上而下的方式呈現，否則應該提供替代的方式表達資訊。

雖然某些標籤可以產生視覺效果，但卻容易造成視障者閱讀網頁時的困擾(例如使用TH標籤雖然可以呈現表格內容置中及粗體字效果，但容易誤導視障者將該標籤內容視為表格中行或列的標題)。因此為了避免混淆表格內的資訊，勿以表格的標題標籤呈現網頁格式的視覺效果。

5-3-3透過樣式表呈現排版、定位、層次及對齊的效果

同3-3-5

5-4若表格作為版面配置時，勿使用架構性的元件(如TH表格的標題資料標籤)作為網頁視覺效果[第二優先等級]

同2-1-1

5-4-2表格排版

同5-3-2

5-5表格需提供摘要說明[第三優先等級]

視障者即使透過語音合成器或點字閱讀機的輔助，也不易閱讀以表格表達的網頁資訊。故如果必須使用表格表達網頁資訊時，不僅要提供表格標題與摘要說明，也必須同時對此表格內容提供摘要及結構說明。

在提供表格標題說明部分，可透過CAPTION標籤提供表格的標題，或是將title放置在TABLE標籤中，提供標題簡要說明。

表格常常以多行/列的格式呈現，但是當視障者閱讀網頁內容時，如果沒有提供表格巢狀標題或是表格內容從屬關係的摘要說明，則無法辨讀此表格所傳達的網頁內容，因此需使用summary屬性提供表格內容的摘要說明。

對於非資料性(作為排版用)之表格，也可在表格摘要(summary屬性)中，簡單敘述該表格最為排版使用，或敘述該表格的排版狀況。

5-6對於表格中過長的標題，提供簡稱[第三優先等級]

由於視障者所使用的語音合成器會讀取表格中每一行列的標題，因此為了縮減視障者辨讀表格內容的時間，可以透過abbr對於表格中行/列過長的標題，提供簡稱。

規範六、確保網頁能在新科技下良好地呈現

6-1確保在樣式表無法呈現時仍可以閱讀網頁內容[第一優先等級]

確保網頁內容在樣式表無法使用時仍可以閱讀，也就是說一份網頁文件在透過不支援樣式表的瀏覽器，仍可以正確地提供使用者網頁資訊。

6-1-1關於所呈現的內容

同3-1-3

6-1-2分隔線與邊框線

分隔線(Rules)與邊框線(borders)可以呈現"分隔"的視覺效果，但是若不以視覺呈現的方式傳達網頁內容時，分隔線與邊框線便沒有意義。因此建議網頁開發者應該使用樣式表，定義分隔線(Rules)與邊框線(borders)，以下為使用CSS屬性定義邊框樣式的幾項方式：

· "border"、"border-width"、"border-style"、"border-color"。

· "border-spacing"及"border-collapse"。

· "outline"、"outline-color"、"outline-style"及"outline-width"。

如果使用分隔線(如HR屬性)呈現結構時，應確保視障者在語音或是純文字瀏覽器的輔助下，仍是可以獲得網頁資訊(如使用有結構的標記語言)。

6-1-3適當地使用網頁語言及樣式表呈現網頁內容

使用CSS2中的定位屬性，可以設定文字內容在網頁上的指定位置。以下例子說明使用CSS樣式表應注意的原則：

· 確保網頁在移除CSS樣式表之後，使用者仍然可以辨讀正確的網頁內容。

· 一般使用TABLE標籤所呈現的表格效果，可以使用CSS的定位屬性來表現同樣的效果。

以下舉例在一個網頁上，使用CSS做兩組資料的呈現：

在不注意CSS設計的原則時，若採用以下不良設計：

當上述的例子當樣式表不被支援時，所有的內容則會呈現為一直線的文字。

同樣內容的呈現，接下來的範例使用有結構性的標記標籤(DL)在CSS支援時，可以達到欲呈現的網頁結果，並且在瀏覽器不支援CSS樣式表時，仍可以清楚傳達網頁內容。

6-2確保當動態網頁更新時，替代網頁也能同時更新[第一優先等級]

6-2-1對於附屬應用程式(applets)及物件(objects)提供文字及非替代文字說明

同1-1-7

6-2-2頁框來源

當頁框中的網頁內容改變時，其替代文字內容也必須同時更新。所以，網頁的頁框不應該直接連結到某個圖像或是物件，而是應該連結到HTML檔案，檔案中再包含該圖像或是物件，並且提供替代文字，才能確保動態網頁與替代網頁間的一致性。

以下為不良設計，應避免頁框直接連結到某個圖像或是物件：

以下為正確範例，頁框直接連結到HTML檔案：

6-2-3 Script的替代呈現方式

同1-1-12

6-3若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達[第一優先等級]

6-3-1對於附屬小程式(applets)及物件(objects)提供文字及非替代文字說明

同1-1-7

6-3-2具可及性的scripts

網頁事件驅動設計是script的一種，這種script是用在某些事件(如移動滑鼠、使用鍵盤按鍵、下載檔案等)被啟動時。在HTML4.01中，網頁事件驅動設計乃是透過事件驅動屬性(這種屬性通常是以"on"為開始，如"onkeyup")。

有一些事件驅動乃是為了要達到裝飾的效果(如透過強光強調圖片或是改變文字的顏色)，也有一些使用事件是為了達到更多文字內容的效果(如完成計算、提供使用者重要的資訊或是提供表單)，因此當網頁物件使用事件驅動時，網頁開發者應該注意以下幾點：

· 使用應用層級(application-level)的事件驅動裝置(triggers)而應避免使用互動層級(interaction-level)的事件驅動裝置。在HTML4.01中，應用層級的屬性有"onfocus"、"onblur"以及"onselect"。

· 如果必須使用單一獨立的驅動裝置時，網頁開發者應該要提供替代的驅動裝置，也就是針對相同的元件提供兩種事件驅動裝置，如下(Use指的是要透過滑鼠的操作，而with乃是提供除了滑鼠操作外，亦可以透過鍵盤的使用啟動事件驅動裝置)：

Device Handler Correspondences

Use...

...with

onmousedown

onkeydown

onmouseup

onkeyup

onclick

onkeypress

onmouseover

onfocus

onmouseout

onblur

· 勿設計只能透過單一驅動裝置啟動事件，如只能使用滑鼠啟動。

實際範例請參見9-3-1。

6-4使用scripts與applets時，確保事件驅動不需依賴某特定裝置[第二優先等級]

同2-1-1

6-4-2具可及性的附屬小程式(applets)

同1-4-2

同6-3-2

6-5當程式物件沒有作用時，確保網頁內容仍然可以傳達[第二優先等級]

6-5-1替代的網頁

提供具可及性的替代技術，如下：

· 引導使用者至相同內容的無障礙網頁。

· 使用伺服器端的script建立無障礙網頁，在有需求時提供給使用者。

· 可參考Frames及Scripts所提供的替代技術，例如Frames使用NOFRAME標籤、Scripts使用NOSCRIPT標籤提供替代的網頁。

· 提供網頁24小時諮詢服務，如電話號碼、傳真號碼、電子郵件或是通訊地址。

以下兩點是如何連結至另一替代網頁的技術：

· 設定原始與替代網頁彼此間的連結，以便使用者來回兩個網頁。

· 使用META標籤指定可替代的網頁。瀏覽器會依照使用者的瀏覽器種類或是預設值，自動讀取可替代的網頁。

6-5-2語音資訊

同1-4-1

6-5-3 LINK標籤與可替代的網頁

LINK標籤可以用來指定可替代的網頁。依照使用者的瀏覽器種類或是預設值，自動讀取可替代的網頁。

同1-4-2

6-5-5指定不支援頁框時的辦法

同1-1-10

6-5-6附屬應用程式(scripts)的適度轉換

當瀏覽器不支援附屬應用程式(scripts)時，網頁開發者必須確保網頁可及性。應該注意下列兩點：

· 避免使用突然飛進來的內容，因為當使用者的瀏覽器無法處理scripts時，則無法辨讀網頁內容。

· 避免使用"javascript"作為超連結，因為當scripts無法使用時，此連結則會成為無效連結。

規範七、確保使用者能處理時間敏感內容的改變

7-1除非使用者能夠控制螢幕閃爍，否則應該避免螢幕閃爍[第一優先等級]

7-1-1螢幕快速閃爍

螢幕閃爍或是快速移動，對於一些對光過敏的使用者而言，容易引起視覺上的不適，這種不適最易發生在閃爍頻率介於4到59赫茲(Hertz是每秒閃爍的次數) ，尤以20赫茲左右最為嚴重，所以應該避免在網頁上設計螢幕閃爍或是快速移動的效果。

7-1-2視覺影像的呈現

同1-3-1

同1-4-2

7-2避免使用螢幕閃爍的設計[第二優先等級]

同1-4-2

7-2-2文字樣式效果

以下可用來設計閃爍式文字樣式的CSS2屬性：

· 底線、刪除線、以及閃爍："text-decoration"。如果網頁必須呈現閃爍效果時，切勿使用BLINK或 MARQUEE標籤，建議使用CSS中"text-decoration：blink"屬性，不僅可以達到文字閃爍的效果，同時也可以透過樣式表控制其效果。

7-3應該避免文字在網頁中移動，除非使用者能夠控制該動作[第二優先等級]

7-3-1視覺影像的呈現

同1-3-1

7-3-2動畫

當透過動畫呈現網頁內容時，應該提供相等的文字替代說明。

同1-4-2

7-3-4透過樣式表與scripts設計網頁內容的移動

可透過樣式表與附屬應用程式，對網頁元件做動作的設計，例如隱藏與顯現文字，以及變化文字的顏色和位置。

7-4避免網頁定時自動更新的設計，除非使用者能夠自行控制此更新[第二優先等級]

7-4-1網頁自動更新

不顧及使用者是否有網頁更新的需求就自動更新網頁，容易造成使用者瀏覽網頁時的不便，因此，若有網頁自動更新的需求時，可以透過靜態網頁上的連結，提供使用者至另一新頁面選擇。

7-4-2 META標籤

由於無法預估使用者需要多久的時間來讀完網頁上的資訊，因此網頁開發者必須避免設計自動定時更新網頁內容的功能，而應提供較新資訊的連結，讓使用者有所選擇。

下列設計是使用MATA標籤使網頁定時自動更新的不良設計：

下面例子是設定原網頁30秒後自動轉換成另一個指定網頁，這樣的設定也應盡量避免，但是如果必須提供使用自動轉址，應該在網頁中告知使用者網頁將會在多久之後自動轉址，並設計文字連結，提供使用者選擇可自行連結至指定網頁。

同1-4-2

7-5應該避免使用標記語言自動轉移網址[第二優先等級]

7-5-1網頁自動更新

同7-4-1

7-5-2 META標籤

同7-4-2

規範八、確保嵌入式使用者介面具有直接可及性

8-1使用程式性元件(如scripts、applets及Objects)時，應確保其可及性[若為重要性功能屬第一優先等級，否則屬第二優先等級]

8-1-1附屬小程式(applets)及物件(objects)的文字及非文字替代說明

同1-1-7

同6-3-2

規範九、設計裝置獨立網頁

9-1應提供用戶端影像地圖替代伺服器端影像地圖的連結[第一優先等級]

在網頁上應盡量使用usemap屬性的客戶端影像地圖來代替伺服器端影像地圖(ismap)的設計，下面範例是同時使用伺服器端影像地圖及客戶端影像地圖，當瀏覽器不支援伺服器端影像地圖時，瀏覽器會使用客戶端影像地圖來替代。

9-2確保所有元件的操作介面，可不必依靠特定啟動裝置[第二優先等級]

「特地啟動裝置」指的是特別指定某一種裝置，例如必須用滑鼠才能啟動，而使用其他設備如鍵盤就不能作用的設計，就是得依靠特定啟動裝置的設計，也是在無障礙網頁中應該被避免的。

同6-3-2

同1-4-2

9-3應該指定具邏輯性的事件啟動裝置，而不是依賴性的事件啟動裝置[第二優先等級]

9-3-1獨立性啟動裝置與依賴性啟動裝置

網頁上啟動裝置簡單地區分成以下兩類：

1.獨立性(device-independent)：具邏輯性，不須依賴某一種裝置的設計，使用應用層級的屬性，如"onfocus"、"onblur"以及"onselect"。

2.依賴性(device-dependent)：具使用互動層級的屬性，如"onmouseover"及"onclick"，是依賴某種單一啟動裝置的設計，例如必須透過滑鼠才能操作的設計。

下面的第一個例子就是依賴性驅動裝置的設計，只有使用滑鼠(onmouseover)將游標移至該圖片時，才會出現設計的效果(跑出Boxster的命名緣由說明)。

下面的第二個例子則是獨立性驅動裝置的設計，不僅可以透過滑鼠的游標亦可以使用Tab鍵移動至該圖片，啟動該圖片所設定的效果(跑出Boxster的命名緣由說明)。

同6-3-2

同1-4-2

9-4 透過連結、表單與物件提供Tab鍵操作順序[第三優先等級]

9-4-1鍵盤便捷鍵的設定

鍵盤便捷鍵的設定對於只能以鍵盤操作的使用者而言(如肢體障礙者以及視覺障礙者)，是非常重要的。舉例來說，當肢體障礙者無法有效率的使用滑鼠時，可透過便捷鍵的設計，如按下Alt+C即可連到定義accesskey="C"的連結區塊。因此，網頁開發者應提供便捷鍵的操作，以利使用者能使用便捷鍵順利瀏覽網頁內容。"accesskey"就是在HTML第四版之後新增的屬性，作為設計便捷鍵的功能。

9-4-2表單中便捷鍵的設定

表單中便捷鍵可以透過tabindex屬性設定Tab鍵移動的順序。下列的範例即以tabindex屬性設定Tab鍵在表單中元件的移動順序為：field2 – field1 - submit。

下一個例子，則是示範幾個便捷鍵的設定。對於"使用者名稱"設定便捷鍵為alt+"U"、"性別"設定為alt+"S"及"建議事項"設定為alt+"X"，使用者可利用便捷鍵的設定，迅速地將游標移動至表單中各個欄位。

9-5對於重要的連結提供鍵盤便捷鍵的設定[第三優先等級]

9-5-1鍵盤便捷鍵的設定

同9-4-2

9-5-2表單中便捷鍵的設定

同9-4-3

規範十、使用過渡的解決方案

10-1除非使用者知道將會開啟新視窗，否則不應該隨意開啟新視窗[第二優先等級]

10-1-1目標頁框的設定

W3C建議網頁開發者應該避免使用target="_blank"屬性開啟新視窗。如果必須開啟新視窗時，也應先讓使用者知道，以下舉例示範：

10-2適當使用標籤標示表單控制項間的關聯性[第二優先等級]

10-2-1對於表單控制項提供說明標籤

表單的設計可透過LABLE標籤的for提示表單控制項，舉例如下：

10-3以直欄式表格並排呈現網頁資訊時，應該提供線性替代文字[第三優先等級]

10-3-1直欄式表格

某舊版的螢幕閱讀器，是以由左而右、由上而下的方式閱讀網頁，這類的瀏覽器無法正確辨讀直欄式的表格，因此，對於此類直欄式表格設計應該在該網頁或是另一網頁上提供直線性的替代文字。

以下例子是兩個直欄格式的資訊在一般網頁上的呈現：

然而若從較舊版的螢幕閱讀器讀出，結果可能會變成錯誤的資訊如下：

因此，對於此類直欄式的表格，應該要在該網頁或是直接可連結到的網頁上提供線性的替代文字。這個範例的做法是在該表格之前提供一個連結，連到另一個有線性替代文字的網頁。

10-4應該在網頁文字輸入區中設定預設值[第三優先等級]

10-4-1表單控制項的特殊技巧

以下舉例在INPUT標籤中使用value屬性設定提示文字，如果是文字輸入欄位(TEXTAREA標籤)則可以在TEXTAREA標籤中輸入提示文字：

當圖片已經作為上傳按鈕時，應提供該圖片的替代文字說明：

10-5避免單以空白間隔區分鄰近的連結[第三優先等級]

10-5-1群組化以及繞過群組的超連結

當一些相關的連結形成群組超連結時(如導覽列)，應該將此群組設計成一個區域。導覽列往往是使用者在閱讀網頁首先會接觸到的區域，對於使用語音合成器的視障者而言，能夠在選擇其所欲的連結前，透過導覽先得知相關群組的超連結。另外，在增設群組前應該提供可以繞過此群組的超連結，以利視障者不需要此群組時，能迅速繞過此群組，增加閱讀效率。以下提供幾項可以繞過群組的技術：

· 提供使用者可以繞過錨點的連結。

· 透過樣式表提供使用者隱藏錨點超連結。

· 在HTML4.01中可以使用MAP標籤群組相關的連結，並且透過title屬性定義此群組。

規範十一、使用國際與國內官方訂定的技術和規範

11-1使用最新版本的W3C技術[第二優先等級]

由於W3C長期探討可及性議題，也已建立了無障礙網頁開發的相關規範原則，因此建議使用W3C技術。

以下簡單列述一些相關的W3C技術：

· MathML用於數學運算式

· HTML、XHTML與XML用於結構化文件

· RDF用於meta data

· SMIL用於多媒體的呈現

· CSS與XSL用於定義樣式表

· XSTL提供樣式轉換

11-2避免使用過時的HTML語法[第二優先等級]

11-2-1 HTML標籤與屬性

如果新標籤與舊標籤都可以達到相同的網頁效果時，應該採用新標籤，因為新的瀏覽器漸漸只支援新標籤而不支援舊標籤，所以應避免使用過時的HTML標籤(請參考附錄四「HTML 4.01標籤索引」，或上W3C網站見詳細資料：http://www.w3.org/TR/WCAG10-HTML-TECHS/#html-index)。

以下舉例，在網頁上用

替代過時的

同樣可以達到目錄清單的效果：

11-2-2確保使用者可以控制樣式

CSS的"!important"讓使用者可以控制網頁編排樣式，並以防止設定被其他樣式覆蓋。以下例子說明在網頁上的某一段文字不依照其它一般文字的設定(取代原設定)，而特別採用大型字體的設計。

在使用CSS1的時候，即使有"!important"的設定，網頁開發者還是可以在網頁中作不同的最後樣式變化。但是，到了CSS2時，"!important"屬性則會超越(覆蓋)任何其它的樣式設定。另外，CSS2的"inherit "屬性可以簡化"!important"的使用，以下舉例說明強制設定此網頁上所有的背景顏色是白色，文字顏色是黑色：

11-2-3字型樣式

提供幾項設定字型樣式的技術：

· 應提供一般使用者都可以接受的字型。

· 使用CSS2屬性控制字型樣式，如font-family、font-size、font-size-adjust、 font-stretch、font-style、font-variant、與font-weight，取代HTML屬性中控制字型的FONT、BASEFONT、face與 size。

· 如果一定要使用HTML屬性控制字型，則可使用BIG與SMALL。

11-3提供選擇讓使用者依據個人喜好(如語言、網頁內容等)瀏覽網頁[第三優先等級]

11-3-1內容的可選擇性

網頁上可以有以下幾項方法提供給使用者選擇：

· 提供網頁內容的其他版本，如不同語言的內容。

· 透過標記語言提供網頁內容有不同的樣式或語言版本呈現。

· 內容的可選擇性乃是為了滿足每位使用者的需求。舉例來說，如果有位美國人使用中文網站，可以透過此網站上提供的英文版本瀏覽。

11-3-2關於音效的樣式表

確保視障者透過CSS2音效屬性所取得的語音資訊與透過有聲瀏覽器所取得的視覺資訊是相同的。以下範例是CSS2所使用的一些音效屬性：

11-3-3內容表現方式的可及性

採用CSS2一起使用以下屬性的設定，就可以讓使用者有不同網頁內容呈現的選擇

· attribute selectors

· the attr() function and the 'content' property

· the：before and：after pseudo-elements

以下例子中，alt屬性中的內容會在圖像之後被解讀出，(即使瀏覽器不顯示圖像時，也一樣)。

11-3-4媒體類型

相同的網頁內容可提供不同的媒體類型以供使用者選擇使用，透過CSS2的媒體類型去設計樣式表，可以減少下載檔案的時間。這些樣式表可以配合點字裝置、語音合成器或是TTY裝置呈現內容。

11-4如果不能使這個網頁無障礙化時，需提供另一個相等的無障礙網頁，且替代網頁應與原網頁同步更新[第一優先等級]

11-4-1替代的網頁

同6-5-1

規範十二、提供內容導引資訊

12-1定義每個頁框的標題[第一優先等級]

在FRAME標籤中使用title屬性提供頁框標題。

12-2當頁框的標題無法明白表示頁框中的內容時，應提供額外的描述[第二優先等級]

12-2-1文字替代

同1-1-1

12-2-2對網頁頁框的內容提供說明

同1-1-9

12-3適當地透過更多群組以區隔過長的資訊[第二優先等級]

12-3-1有結構的群組

以下為採用HTML4.01群組網頁內容的方法：

· 使用FIELDSET將同類的群組表單控制項加以群組並且透過LEGEND標籤描述。

· 使用OPTGROUP標籤將選單項目適當地分類群組起來，以利使用者迅速了解選單項目。

· 對於表格資料使用CAPTION描述此表格。

· 透過THEAD、TBODY、TFOOT與COLGROUP群組表格中的行和列。

· 巢狀清單應使用UL、OL與DL呈現。

· 使用H1-H6有結構地設計文件檔以及編排過長的文字。

· 將相關的連結加以群組。

12-3-2對於相類似的表單控制項加以群組

使用FIELDSET標籤區隔相類似的表單控制項並且使用LEGEND標籤提供敘述。

12-4透過label標籤明確地呈現表單控制項要表達的網頁資訊[第二優先等級]

12-4-1對於表單控制項提供說明標籤

以下例子乃是在HTML中使用的呈現表單控制項要表達的網頁資訊：

規範十三、清楚的瀏覽網站機制

13-1清楚地定義每個超連結的目標頁框[第二優先等級]

13-1-1連結文字

文字連結不應該使用過於籠統的文字敘述，如"click here"或"更多"，因這類文字連結只適合在整體瀏覽網頁時使用，而不適合經由鍵盤跳躍式地瀏覽網頁時各別讀取。所以，文字連結應該能更清楚地表達連結到的網頁內容，例如"關於海獅的更多說明"會比"更多說明"清楚且適當。

除了清楚地定義每個超連結外，網頁開發者可透過A標籤中的title屬性明確地說明超連結的資訊內容。

在同一個網頁上，所有相同的文字連結都應該指到同樣的網頁內容，不應使用同樣的文字敘述作連結卻連到不同的地方。若有相同的文字連結必須連到不同的網頁(或檔案時)，則應利用A標籤的title屬性作適當說明以便區分。

視障者有幾種不同的障別，有些是全盲、有些是無法閱讀較小的字體、也有些無法閱讀移動快速的文字，這些視障者無法用眼睛快速瀏覽網頁內容，而通常在使用有聲瀏覽器時，為瞭解網頁全貌或找到某一個連結，他們通常使用Tab按鍵一一讀取網頁上的各連結。因此，對於一連串相關的連結，應該要在第一個連結提供這些連結的說明，然後在接下來的連結中用title屬性詳細說明，請參考以下範例：

13-2使用metadata提供網頁及網站的相關資訊[第二優先等級]

13-2-1 Metadata

Metadata傳達的是網頁內容的相關資訊。好的Metadata可以提供使用者極為重要的資訊，以下即為在HTML中可以提供的有用資訊：

· TITLE標籤：設定網頁的標題。

· ADDERSS標籤：提供網頁的開發者相關資訊。

· META標籤：提供網頁文件資料，包含關鍵字及網頁開發者的相關資訊，同7-4-2。

· DOCTYPE敘述：用以識別HTML版本類型，同3-2-1。

· LINK標籤與導覽工具：使用LINK標籤與link types描述網頁導覽的功能，同13-9-2。

· LINK標籤與可替代的網頁：連結標籤可以用來指定可替代的網頁，同6-5-3。

13-2-2適當地使用條列以及條列項目

同3-6

13-3提供有關於網站版面設計的資訊(如網頁地圖或是文字表格)[第二優先等級]

13-3-1導覽的資訊

導覽的機制(如網路地圖Site Map)可以提供使用者清楚了解網頁位置。透過導覽列、網路地圖與搜尋機制，一般使用者可以較輕易地閱讀網頁資訊。然而對於較複雜的網站而言，身心障礙者便不易透過上述的方式正確地建構他們閱讀的心靈地圖，因此為了幫助他們，網頁開發者應該提供網頁導覽的簡單說明。

另外，網頁開發者應該設計不同的網頁搜尋方式，以提供不同技能與偏好的使用者搜尋。大部分的搜尋方式多是由使用者鍵入關鍵字進行資料搜尋，然而，有些使用者在搜尋的過程中，常常會發生拼字錯誤或是無法使用正確的語言，以致於無法找到相關的網頁資訊。故搜尋方式應該包含拼字檢查、提供"best guess"的替代方法、query-by-example及相類似搜尋等。

13-4使用一致的導覽機制[第二優先等級]

13-4-1一致性的導覽

網頁編排的一致性可以讓使用者容易找到和使用導覽機制，同時也能讓使用者輕易地跳過導覽機制直接找到重要網頁資訊。一致性的設計不但可以幫助視障者和學習有障礙的人士，對於一般網路者的瀏覽網頁也都非常有利，因為，一般使用者可以藉由網頁的一致性設計而直覺性地在正確的地方找尋到適合的網頁內容。

13-5提供導覽列及可行的導覽機制[第三優先等級]

同13-3-1

13-6將相關連結加以群組化並提供繞過此群組的方法[第三優先等級]

13-6-1群組化以及繞過群組的超連結

同10-5-1

13-7若網站具有搜尋功能，可設計不同的網頁內容搜尋方式，以提供不同技能與喜好者搜尋選用[第三優先等級]

同13-3-1

13-8在網頁標題、段落、及列表之前提供辨別資訊[第三優先等級]

13-8-1對於網頁內容的了解

網頁開發時應注意以下事項，以利使用者對於網頁內容的了解：

· 編寫的樣式

· 應提供清楚且嚴密的標題與文字描述連結，並且應提供有資訊性的標題以利使用者可以快速瀏覽網頁而不用逐一閱讀。

· 網頁上每個段落文章，開頭即以清楚簡單的文句敘述說段落重點。這種做法不但可以讓人一目了然，也方便視障者在語音合成器的輔助下快速了解網頁重點，但若是網頁文字的設計是將重點改在段落文字的最後，那麼視障者必須讀取完整這段文字才能了解文意內容。

· 限制每一段落要有一個重要的概念。

· 對於俚語、專業術語、及相似文字的特殊含意，除非網頁開發者在中能夠明確說明，否則應該避免出現在網頁中。

· 盡量使用大眾通用的文字。例如，應該使用”始祖”而非”濫觴”；又如應該使用”begin”而非”commence”。

· 避免使用複雜的句子結構。

· 多媒體應用

有些網頁內容配合多媒體的應用可以更清楚地表達網頁訊息，但是，並非所有的情況都是如此，也有些多媒體的使用反而造成使用者的困擾。

以下是應用多媒體的呈現以補充文字的不足之範例：

· 說明一個複雜資料的圖表，例如過去幾年的財務狀況圖表。

· 文字轉換成的手語短片。

· 事前錄製的音樂帶或語音資料透過語音合成器，可以幫助一些無法閱讀的使用者接收由語音所傳達的資訊。

13-9對於有關聯性的網頁提供資訊[第三優先等級]

例如，在HTML中透過LINK標籤和rel、rev屬性或是存檔的類型(如zip、tar、gzip與stuffit等)對於有關聯性的網頁提供資訊。

13-9-1有關聯性的文件

如果沒有組合有關聯性的文件，容易造成使用者閱讀的困擾，因此可透過以下的方式，對於有關聯性的文件提供資訊：

· 使用matadata描述網頁間的關係(如link matadata元件)

· 透過存檔的類型(如zip、tar、gzip與stuffit等)。

13-9-2 LINK標籤與導覽工具

使用LINK標籤與連結類型描述網頁導覽機制和組織。

13-10避免使用ASCII文字藝術[第三優先等級]

13-10-1避免使用ASCII文字藝術呈現圖案

網頁上的ASCII藝術可能作各種不同設計，以下是一種用來作為圖表的呈現：

避免使用ASCII文字藝術設計圖例，應該是以一般圖像來顯示圖例資訊，應可借用一般圖像的屬性提供更詳細的文字說明。如網頁開發者必須使用ASCII的話，則應該提供一個文字連結可跳過該段ASCII圖，並在旁邊設計描述內容的連結，舉例如下：

例如我們常用的微笑表情：），在一些螢幕解讀器中會直接讀出”冒號””右括弧”，因而無法正確傳達原意。故可以使用ABBR標籤中的title屬性提供替代說明，範例如下：

另外對於使用來取代ASCII符號設計的圖片，同樣必須透過alt屬性提供該圖像的文字敘述。如果所需提供的替代文字過長時，應使用longdesc屬性或是敘述連結提供詳細的文字敘述。

規範十四、確保簡單清楚的網頁內容

14-1網頁內容應使用最簡單清楚的文字[第一優先等級]

同13-8-1

14-2提供有文字說明的圖片或是透過影音的呈現以利使用者理解網頁內容[第三優先等級]

同13-8-1

14-3確保網頁呈現方式的一致性[第三優先等級]

14-3-1一致性的導覽

同13-4-1

14-3-2提高一致性

W3C建議網站中使用CSS編排網頁，以提高網頁的一致性並減少維護時的工作量，以下提供使用CSS的注意事項：

· 樣式表中的設定項目應該盡量精簡，可供各網頁共同使用。

· 儘量使用外連式的樣式表而不是內嵌式的樣式表，並且避免行內樣式表。

· 當使用超過一個以上的樣式表時，應在所有的樣式表中針對相同的設定使用相同的類別(class)名稱。

肆、附錄

附錄一：90條標準檢測碼與技術手冊對應表

編號

檢測碼

要點內容

本手冊章節

H101000

圖片需要加上替代文字說明

H101001

對於applet提供替代文字說明

H101002

對於object提供替代文字說明

H101003

對於表單中的圖形按鍵提供替代文字說明

H101004

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

H101105

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

H101106

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

H101007

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

H101108

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

H101109

所有語音檔案必須有文字旁白

H101210

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

H101111

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

H101112

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

H101213

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

H101214

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

H301015

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

H102100

確保所有藉由顏色所傳達出來的訊息，在沒有顏色後仍然能夠傳達出來

H202101

確保前景顏色與背景顏色彼此呈現明顯的對比

H203200

以實際存在的標記語言(如MathML)呈現網頁內容(如數學方程式)，避免使用圖形影像呈現

H203001

確定網頁設計文件，有效使用正規的HTML語法

H203002

在doctype標籤中，使用標準規範的敘述以識別HTML版本類型

H203203

盡可能使用樣式表單控制網頁排版與內容的呈現

H203004

要使用相對尺寸(如%)而非絕對尺寸(如像素)

H203005

適當使用巢狀標題呈現文件結構

H203106

避免使用header標籤來產生粗體字效果

H203107

項目符號及編號之標籤(如li、ul)僅可使用於實際網頁內容的項目條列，不可用於編輯格式

H203108

確保q和blockquote標籤只是用來當引用語而不是用來縮排

H203209

以q及blockquote標籤來標記引用語

H104200

明確地指出網頁內容中語言的轉換

H304201

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

H304002

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

H105100

對於每一個存放資料的表格（不是用來排版），標示出行和列的標題

H105101

表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係

H205102

在網頁內容呈現設計時，避免以表格做多欄文字的設計

H205103

若表格只做為版面配置時，勿使用表格之結構標記(如th標籤)作為網頁格式視覺效果

H305004

表格須提供表格摘要說明(如summary屬性)

H305105

資料表格須提供標題說明

H305106

表格行列過長的標題，須提供縮寫或簡稱

H106100

使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

H106001

頁框連結必須是HTML檔案

H106102

使用Script語言需指定不支援Script時的辦法

H106103

若網頁內的程式物件沒有作用時，確保網頁內容仍然可以傳達

H206104

若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作

H206005

使用頁框時要指定不支援頁框時的辦法

H107200

確保網頁設計不會致使螢幕快速閃爍

H207001

避免使用blink標籤閃爍螢幕

H207002

避免使用marquee標籤移動文字

H207103

避免使用動態gif圖片

H207004

不要讓網頁每隔一段時間自動更新

H207005

不要自動轉移網頁的網址

H208100

對由Scripts、Applets及Objects所產生之資訊，提供可及性替代方式

6-2、8-1

H109000

盡量使用客戶端影像地圖替代伺服器端影像地圖連結

H209201

對所有網頁內容元素，確保有滑鼠以外的操作介面

H209002

確保事件的啟發不要求一定得使用滑鼠

H309103

具體指出按下Tab鍵在表單控制項，超連結及物件間移動的順序

H309204

對經常使用的超連結，增加快速鍵的操作

H309105

對於表單元件考慮提供鍵盤快速鍵的操作

H210100

除非使用者知道將會開啟一個新視窗，不要隨便開啟一個新視窗

H210101

如果使用Script語言開啟新視窗或改變目前視窗的網址，要讓使用者能事先知道

H210102

確保表單的控制項與控制項說明之間的配合很適當

H310103

若有以表格直欄格式呈現的網頁文字內容時，提供線性文字替代

H310004

在網頁文字輸入區中須有預設值

H310005

勿單以空白間隔分開相連之超連結

H111200

如果你不能使這個網頁無障礙化，提供另一個相等的無障礙網頁

H211201

儘量使用開放性的最新國際標準規範

H211202

避免使用過時的HTML語法

H311203

允許使用者依照個人喜好設定網頁呈現方式與內容

H112000

需要定義每個頁框的名稱

H212101

如果頁框名稱無法描述頁框中的內容的話，應加上額外敘述

H212102

把太長的選單項目群組起來

H212103

在表單控制項中，使用fieldset及legend標籤作群組間的區隔

H212204

儘可能將網頁內容有相關之元素聚集在一起

H212105

在表單控制項上，以label標籤提示資訊

H213200

設計並確保有意義的超連結說明，便於網頁內容的閱讀

H213101

如果需要的話，為每個超連結加上內容描述

H213202

指向不同網址的超連結，不可使用相同的超連結說明

H213203

使用metadata標籤來記載電腦可以了解運用的網頁資訊

H213004

為你的網頁加上標題

H213205

為你的網站提供網站地圖或整體性的簡介

H213206

網頁設計使用清楚且一致的導覽機制

H313207

提供網頁導覽連結工具列，以利存取網站導覽結構

H313208

能辨別出意義上有群組相關的超連結

H313209

若有群組超連結，在群組之前增設一項繞過此區域的超連結

H313210

若網站具有搜尋功能，可以設計不同的網頁內容搜尋方式，以提供不同技能與喜好者搜尋選用

H313211

在網頁標題、段落、及列表之前，提供辨別訊息以利識別

H313212

以metadata標籤來識別網頁文件包含於整體文件內的所在位置

H313213

避免在網頁上使用ACSII文字藝術

H114200

網頁內容要使用簡單易懂的文字

H314201

使用可及性的圖形促進網頁內容的理解

H314202

網頁彼此間設計呈現的風格要一致

附錄二：標準檢測碼的格式說明

本附錄說明標準檢測碼的設計包括網頁文件語言、優先等級、規範條文、和檢測狀態等因素。

標準檢測碼格式為一個字母和六位數： X999999 這七個字符共可分為五欄，如后所示：

起始字母：網頁語言

本字母代表本標準檢測碼適用的網頁語言，目前本規範訂定HTML語言相關的檢測碼，就以H字母表示，其值為H。

註：未來若訂定XML或SVG語言的標準檢測碼，就以其他字

母表示，例如，X或S。

第一位數碼：優先等級

本數碼代表本標準檢測碼所屬的優先等級。其可能值為1|2|3

第二、三位數碼：十四條規範(Guideline)

本數碼代表本標準檢測碼所屬的規範條文。

其可能值為01|02|03|04|05|06|07|08|09|10|11|12|13|14

第四位數碼：檢測狀態(Status)

本數碼代表本標準檢測碼的檢測狀態。檢測狀態代表本檢測碼是否能夠歸納出其檢測項目可以由機器辨識或機器檢測的規則。若是其檢測項目可以明確導出由機器辨識其在網頁原始碼的正確位置的規則，我們稱此檢測碼為機器可辨識(Machine Identifiable)；若是其檢測項目可以明確導出由機器檢測其在網頁原始碼的內容是否符合可及性設計的規則，我們稱此檢測碼為機器可檢測(Machine Checkable)。一個檢測碼要先能夠辨識其檢測項目可套在網頁原始碼的正確位置，才能進一步檢測其在網頁原始碼的內容是否符合可及性設計。因此標準檢測碼的檢測狀態可以定義為以下三種：

0：機器辨識/機器檢測(Machine Identify/Machine Check)

1：機器辨識/人工檢測(Machine Identify/Human Check)

2：人工辨識/人工檢測(Human Identify/Human Check)

其可能值為0|1|2

註：依檢測狀態的定義，不可能發生人工辨識/機器檢測(Human Identify/Machine Check)，因為若機器無法辨識檢測項目在網頁原始碼的正確位置，即無法做檢測工作。

第五、六位數碼：規範內的流水號碼

本數碼為標準檢測碼在規範內的流水號碼。因為一條規範可能超過十個標準檢測碼，因此採用兩位數，由00開始。

其可能值為00|01|02|03| . . .

附錄三：HTML網頁元件與技術手冊對應表

類別

類別細項

技術手冊章節

1.文件結構與metadata

· Metadata

3-2、6-5、7-4、7-5、13-2、13-9

· 有結構的群組

3-5、12-3

2.語言資訊

· 明確指出網頁內容中語言的轉換

· 明確指出網頁文件主要使用的自然語言

3.文字標記語言

(Text markup)

· 重點強調

· 使用ABBR及ACRONYM說明文字縮寫與字首簡稱

· Quotations

· 以現有的標記語言(如MathML)呈現替代影像

4.清單(Lists)

· 使用樣式表改變清單的條列項目圖片

1-1、3-6

5.表格(Tables)

· 表格資料

5-1、5-2、5-5、5-6

· 表格排版

5-3、5-4

· 直欄式表格

· 新舊版表格標籤的相容性

6.連結(Links)

· 文字連結

1-1、13-1

· 群組化與繞過群組的連結

10-5、13-6

· 鍵盤便捷鍵的設定

9-4、9-5

7.圖片與影像地圖

· 圖片的簡短替代文字

· 圖片的較長文字敘述

· ASCII文字藝術

· 影像地圖

1-1、1-2、1-5、9-1

· 影像圖形的顏色

· 動畫

8.附屬小程式(Applets)及物件( Objects)

· 對於附屬小程式(applets)及物件(objects)提供文字及非文字替代說明

1-1、6-2、6-3、8-1

· 具可及性的附屬小程式(applets)

1-4、3-4、6-4、6-5、7-1、7-2、7-3、7-4、8-1、9-2

9.聽覺及視覺

· 語音資訊

1-4、6-5

· 多媒體的替代文字

· 嵌入多媒體物件

10.頁框(Frames)

· 定義每個頁框的標題

· 描述頁框的關係

1-1、12-2

· 指定不支援頁框時的辦法

1-1、6-5

· 頁框來源

· 目標頁框的設定

· 頁框的替代方式

11.表單(Forms)

· 表單中快速鍵的設計

9-4、9-5

· 表單控制項群組化

· 對於表單控制項提供說明標籤

10-2、12-4

· 圖像式的按鈕

· 表單控制項的特殊技巧

· 新舊版表單標籤的相容性

12.Scripts

· Scripts的適度轉換

· 具可及性的Scripts

6-3、6-4、8-1、9-2、9-3

· Script的替代呈現方式

1-1、6-2

· 網頁更新與開啟新視窗

7-4、7-5、10-1

附錄四：HTML 4.01標籤索引

以下表格說明：

· 此索引表列出所有HTML 4.01的標籤。

· 標籤名稱後出現星號"*"者為負面標籤(將在未來的語言中可能被淘汰)。

· 第二直欄列出該標籤出現在其他HTML版本的狀況。

· 第三直欄是各標籤的使用角色。

· 此表格資料來源請見：http://www.w3.org/TR/WCAG10-HTML-TECHS/#html-index

標籤名稱

在其他版本的出現狀況

角色屬性

2.0，3.2

Structure

ACRONYM

Structure

ADDRESS

2.0，3.2

Metadata

APPLET*

Replaced

Structure

2.0，3.2

Presentation

2.0，3.2

Processing

BASEFONT*

Presentation

Processing

Presentation

BLOCKQUOTE

2.0，3.2

Structure

2.0，3.2

Structure

2.0，3.2

Presentation

BUTTON

Structure

CAPTION

Structure

CENTER*

Presentation

2.0，3.2

Structure

2.0，3.2

Structure

COLGROUP

Structure

2.0，3.2

Structure

Metadata

Structure

2.0，3.2

Structure

2.0，3.2

Structure

2.0，3.2

Structure

2.0，3.2

Structure

FIELDSET

Structure

Presentation

2.0，3.2

Structure

Replaced

FRAMESET

Presentation

2.0，3.2

Structure

2.0，3.2

Structure

2.0，3.2

Presentation

2.0，3.2

Structure

2.0，3.2

Presentation

IFRAME

Replaced

2.0，3.2

Replaced

2.0，3.2

Structure

Metadata

ISINDEX*

2.0，3.2

Structure

2.0，3.2

Structure

LEGEND

Structure

2.0，3.2

Structure

2.0，3.2

Metadata

Structure

2.0，3.2

Structure

2.0，3.2

Metadata

NOFRAMES

Alternative

NOSCRIPT

Alternative

OBJECT

Replaced

2.0，3.2

Structure

OPTGROUP

Structure

OPTION

2.0，3.2

Structure

2.0，3.2

Structure

Processing

2.0，3.2

Presentation

Structure

Presentation

2.0，3.2

Structure

SCRIPT

3.2 (DTD)

Processing

SELECT

2.0，3.2

Structure

Presentation

Structure

STRIKE*

Presentation

STRONG

2.0，3.2

Structure

3.2 (DTD)

Processing

Presentation

Structure

TEXTAREA

2.0, 3.2

Structure

2.0, 3.2

Metadata

Structure

2.0, 3.2

Presentation

2.0, 3.2

Structure

2.0, 3.2

Structure

附錄五：參考規範

本規範主要參考世界網路集團的資訊網可及性推動組織WAI訂定的無障礙網頁相關標準。其標準可分為三大類分述如下：

規範(Guidelines)

· Http://www.w3.org/TR/WCAG10/，無障礙網頁設計規範1.0/網頁內容可及性規範1.0(Web Content Acceswsibility Guidelines 1.0)

· Http://www.w3.org/WAI/AU/，編輯工具可及性規範1.0(Authoring Tool Accessibility Guidelines 1.0)

· Http://www.w3.org/WAI/UA/，使用者代理人可及性規範1.0(User Agent Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/xag，可擴充標記語言可及性規範(XML Accessibility Guidelines)

檢驗表(Checklists)

· Http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html，網頁內容可及性檢驗表1.0(Checklist for Web Content Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/ATAG10/atag10-chktable.html，編輯工具可及性檢驗表1.0(Checklist for Authoring Tool Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/2002/PR-UAAG10-20021016/uaag10-chktable.html，使用者代理人可及性檢驗表1.0(Checkpoints for User Agent Accessibility Guidelines 1.0)

技術文件(Techniques)

· Http://www.3w.org/TR/WAI-WEBCONTENT-TECHS/，無障礙網頁設計規範技術文件1.0/網頁內容可及性規範技術1.0(Techniques for Web Content Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/WCAG10-CORE-TECHS/，無障礙網頁設計規範核心技術文件(Core Techniques for Web Content Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/WCAG10-HTML-TECHS/，無障礙網頁設計規範HTML技術文件，(HTML Techniques for Web Content Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/WCAG10-CSS-TECHS/，無障礙網頁設計規範CSS技術文件，(CSS Techniques for Web Content Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/2002/NOTE-ATAG10-TECH-20021029/，編輯工具可及性規範的技術1.0(Techniques for Authoring Tool Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/UAAG10-TECH/，使用者代理人可及性規範的技術1.0(Techniques for User Agent Accessibility Guidelines 1.0)

· Http://www.w3.org/TR/AERT/，可及性檢測和修復技術的技術(Techniques for Accessibility Evaluation and Repair)

· Http://www.w3.org/TR/SMIL-access/，同步多媒體整合語言的可及性特性(Accessibility Features of SMIL)

· Http://www.w3.org/TR/CSS-access/，串接式樣表單的可及性特性(Accessibility Features of CSS)

· Http://www.w3.org/TR/SVG-access/，可縮放向量圖形語言的可及性特性(Accessibility Features of SVG)

· Http://www.w3.org/WAI/References/HTML4-access，超文件標記語言的可及性改進(Accessibility improvements in HTML 4.0)

附錄六：中英文名詞對照表

Abbreviation 文字縮寫

Accessibility 可及性

Accesskey 便捷鍵 / 快速鍵

Acronym 字首簡稱

Alignment 對齊

Animated images 動畫

Applet 附屬小程式

Application-level 使用應用層級

ASCII art ASCII文字藝術

Assistive technology 輔助科技

Authoring tool 編輯工具

Backward compatible 反向相容

Blockquote 引用文

Braille 點字

Braille display 點字閱讀機 / 點字顯示器

Browser 瀏覽器

Bullet 條列項目圖示

Button 按鈕

Bypassing link 繞過群組的超連結

Caption 表格說明

Cascading Style Sheet(CSS) 串接呈現表單

Class 類別

Client-side 客戶端

Code 程式碼

Cognitive disability 認知障礙

Content developer 內容開發者

Content negotiation 內容的可選擇性

Context 上下文

Device independent 裝置獨立的

Disabled 不啟動 / 無法使用的 / 障礙的

Document Content，Structure，and Presentation 文件內容、結構、和表達

Drop-down menu 下拉式選單

Dynamic HTML(DHTML) 動態HTML

Embedded styles 內嵌式的樣式表

Equivalent 等效

Form controls 表單控制項

Frame 視窗分割(頁框)

Graphical buttons 圖像式的按鈕

Graphical displays 圖像顯示機

Grouping 群組化

Hearing disability 聽力障礙

Human Check 人工檢測

Human Checkable 人工可檢測

Human Identify 人工辨識

Human Identifiable 人工可辨識

Hypertext Markup Language(HTML) 超文件標示語言

Image map 影像地圖

Inline style sheets 行內樣式表

Ismap 伺服器端影像地圖使用屬性

Interaction-level 使用互動層級

Labling 提供說明標籤

Layout 排版

Layering 層次

Linearized table 直欄式表格 / 線性化表格

Link text 連結文字

Linked style sheets 外連式的樣式表

List 條列項目

Longdesc 說明文件

Machine Check 機器檢測

Machine Checkable 機器可檢測

Machine Identify 機器辨識

Machine Identifiable 機器可辨識

Markup 標記語言

Mental map 心靈地圖 / 心像地圖

Multimedia 多媒體

Natural Language 自然語言

Navigation Mechanism 導覽機制 / 導航機制

Navigation bar 導覽列 / 導覽條

Nested 巢狀

Neurological disability 神經疾病

Non graphical browser 非圖像式瀏覽器 / 纯文字瀏覽器

Object 物件

Optgroup 選項組

Option 選項

Orientation 定向

Physical disability 肢體殘障

Pixel 像素

Pop-up 動態彈出說明框

Positioning 定位

Presentation element 表達元素

Presentation markup 呈現標記語言 / 呈現標記

Priority 優先等級

Quotations 引用文

Screen magnifier 螢幕放大器

Screen reader 螢幕閱讀機

Script 附屬應用程式

Section headings 章節標題

Server-side 伺服器端

Site map 網站地圖

SMIL(Synchronized Multimedia Integration Language) 同步化多媒體整合語言

Speech synthesizer 語音合成器

Structural element 結構元素

Structural markup 結構標記

Style sheet 樣式表

Summary 摘要

SVG(Scalable Vector Graphics) 可縮放向量圖語言

Table 表格

Tabular information 表格資訊

Target 目標

Trigger 事件驅動裝置

TTY 使用固定間距字元方格的一種媒體格式

Uri(Uniform Resource Identifier) 資源識別字串

Url(Uniform Resource Locator) 網址

User agent 使用者代理人

Visual disability 視覺障礙

WAI(Web Accessbility Initiative) 資訊網可及性推動組織

WCAG (Web Content Accessibility Guidelines) 無障礙網頁內容可及性規範

W3C(World Wide Web Consortium) 世界網路集團 / 全球資訊網協會

XML(Extensible Markup Language) 可擴充標記語言

附錄七：網站導覽機制之網頁導盲磚與快速鍵設計建議

網站應提供可行的導覽機制，與一致性的設計，且所有導覽機制應在網站地圖(網站導覽、Site Map)項下宣告，所有宣告之導覽機制，應適用於全網站之設計，在此提供二種替代滑鼠操作的設計建議，使設計之網站更方便操作。

一、快速鍵(Access Key、Hot Key)提供在不使用或不能使用滑鼠操作網頁的環境，也能快速操作網頁。

快速鍵語法︰accesskey = character

鍵盤操作︰Alt + [character]

快速鍵可使用於以下標籤(Tag)屬性︰A,AREA,BUTTON,INPUT,LABEL,LEGEND, TEXTAREA.

建議設計︰

1.alt + 1 ︰回首頁 alt + S ︰至搜尋欄位

2.一般網站設計區若分為左、中、右等三區，其中左區為主選單，中區為內容顯示區，右區為廣告區，建議快速鍵之設定如下︰

alt + L (Left) ︰代表回左區主選單

alt + C (Context) ︰代表回內容顯示區主選單

alt + R (Right)︰代表回右區主選單

二、網頁導盲磚與替代網頁及快速鍵應用

網頁導盲磚︰以文字意象表示無障礙網頁導引功能。

文字型式︰以三個”:”表示網頁導盲磚，如 ”:::” 。

圖像型式︰以”:::”製作為圖像，連結時於alt說明。

備註︰1.由於各國對快速鍵之設定規定不一，以上謹屬建議性質，未來會訂定一致性原

則。有關快速鍵設定，請參考

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html/

2.網頁導盲磚設計為淡江盲生資源中心建議，可用於替代網頁之連結及群組設計時於各群組間之跳動連結。已引用網頁導盲磚設計網站，請參考http://news.chinatimes.com/

改善的設計：

行政院本會

行政院勞委會

行政院農委會

改善的設計：

休閒雅痞型

古板上班族

正確範例：

山谷中和風餐館的照片

改善的設計：

歡迎進入無障礙網路

正確範例：

植物馬鞍藤的介紹影片：馬鞍藤是屬於旋花科，和牽牛花是親戚，為多年生的……

正確範例：

台灣三大入口網站包含 Yahoo!奇摩網及PChome與蕃薯藤

正確範例：

longdesc=" aboutweb.html ">

在aboutweb.html網頁上放置完整的文字說明：

台北大學網路發展小組：

www.AboutWeb.org台北大學網路發展小組成立之初的宗旨在於為現代政府機構的各種網站規劃、應用發展與維護提供一個質高價廉的專業服務………。

正確範例：

詳細說明

在coffee.html網頁中提供詳細文字說明：

咖啡共和國是一個介紹咖啡相關資訊的網站，內容包含咖啡文化、咖啡豆種類、煮泡方式等資訊，能讓咖啡迷們全面性的瞭解所有與咖啡相關的知識。

正確範例：

咖啡共和國是一個介紹咖啡相關資訊的網站，內容包含咖啡文化、咖啡豆種類、煮泡方式、產地等資訊的介紹，能讓咖啡迷們全面性的瞭解所有與咖啡相關的知識。

正確範例：

圖表：

企業推動e-learning最常遭遇的困難文字說明

在e_url.html網頁上提供了完整的文字敘述：

企業推動e-learning最常遭遇的困難包括：

缺乏高階主管支持 43 %

成本因素 35%

缺乏完善規劃 32%

企業文化障礙 30%

優先順序錯誤 29%

企業策略無法配合 28%

正確範例：

以下場景取自ET影片，影片中電話鈴聲響起，然後有人接聽電話。旁白同步提供電話響起的字幕與提示鈴響的字幕。

[鈴聲響起]

[鈴…]

哈囉？請問找誰？

正確範例：

法國人樂觀知命，常掛在嘴上的一句話是C'est la Vie

正確範例：

範例列舉：

"http://www.w3.org/TR/html4/strict.dtd">

"http://www.w3.org/TR/html4/loose.dtd">

"http://www.w3.org/TR/html4/frameset.dtd">

正確範例：

第一層標題

第二層標題

第三層標題

正確範例：

一個成功的領導者都有著領導潛在素質。何謂領導潛在素質？雷蒙卡特爾曾說：

”優秀領導者所具備之品格特征包括如下幾個方面：情緒穩定、富有熱情、勤勤懇懇、處世大膽、意志堅強、自信、自制力。”

正確範例：

y=2x2-3x+7

不良設計：

src="boxster01.jpg">

正確範例：

/*設定此份文件主體文字顏色是黑色，而背景顏色是白色*/

BODY {color：#000000 !important；background：#FFFFFF !important}

/*要求其它所有網頁元素也都和上面!important設定一樣(背景白色，文字黑色)。不過這個承襲的顏色卻有可能再被其它更特定的樣式所覆蓋。*/

*{color：inherit ! important；background：inherit !important}

正確範例：

略過ASCII art

……網頁上的ASCII art文字藝術……

ASCII文字藝術說明

正確範例：

個人資料

姓氏：

名字：

個人醫療紀錄

正確範例：

scope屬性的範例：

議員姓名

消費咖啡杯數

咖啡種類

是否加糖?

李小安

摩卡

吳大義

拿鐵

小計7502700540

李大明

92年10月20日

92年10月21日

小計7503090550

總計150057901090

axis屬性正確範例：

王小強與李大名的旅行開支表

餐飲費

住宿費

交通費

小計

王小強

92年10月18日

92年10月19日

正確範例：

Ｈ1{voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au")}

正確範例：

使用者名稱：

性別：

男性 LABEL >

女性

建議事項：

正確範例：

向日葵咖啡館年度業績

正確範例：

由於全球專家都認為SARS極可能在今年秋冬捲土重來，預計將對亞洲的Hi-Tech工業造成嚴重的威脅。

正確範例：

… 此網頁內容乃是以繁體中文顯示 …

不良設計：

H1﹛color：red﹜

正確範例：

H1﹛color：#808000﹜

H1﹛color：rgb(50%,50%,50%)﹜

不良設計：

小壯2003年減重期間體重變化

KG___________________________________________________

100 | * * |

95 | * * |

90 | * |

85 | * |

80 | * * * |

75 | * * * |

70 | |

65 | |

60 | |

55 | |

50 | |

01 02 03 04 05 06 07 08 09 10 11 12 月

正確範例：

學習歷程檔案

學習歷程檔案是教師實施評量的新趨勢，

也是「以學生為中心」的教學重點，如能善用兩者，相互為用，將可達到最大的教學效果。

以下則是上面所用到樣式表的設計：

h3.title { font-family: 新細明體, mingliu, taipei; font-size: 120%; font-weight: bold}

.txt { font-family: 新細明體, mingliu, taipei; font-size: 100%; color:#000000; line-height: 150%}

.redtxt { font-family: 新細明體, mingliu, taipei; font-size:100%; color:#ff0000; line-height: 150%}

.menu2{position: absolute; top: 3em; left: 10em;

margin: 0px; font-family: sans-serif;

font-size: 120%; color: red; background-color: white}

.item1{position: absolute; top: 7em; left: 0em; margin: 0px}

.box{position: absolute; top: 5em; left: 5em}

DVD出租排行榜

VCD出租排行榜

綠巨人浩克

魔鬼終結者3

王牌天神

海底總動員

霹靂嬌娃2

綠巨人浩克

正確範例：

alt="蕃薯藤">

正確範例：

不良設計：

正確範例：

longdesc="promo_desc.html">

政府宣導廣告的頁框

顯示國內新聞的頁框

pomo_desc.html可提供類似下列的資訊：

本頁框提供政府宣導廣告的連結：禁煙、禁止酒後駕車、節約用水及飯前洗手，飯後漱口。

news_desc.html會提供類似下列的資訊：

本頁框提供國內各種新聞的連結：社會新聞、體育新聞、地方新聞、科技新

聞及娛樂新聞。

正確範例：

姓名：

各地未來一週天氣炎熱，午後都會出現雷震雨，各地應做防範豪雨準備。

台北地區今天天氣涼爽，午後出現溫和陽光，氣溫在攝氏二十二至二十五度之間。

台北地區今天天氣涼爽，午後出現各地未來一週天氣炎熱，午

溫和陽光，氣溫在攝氏二十二至二後都會出現雷震雨，各地應

十五度之間。做防範豪雨準備。

正確範例：

台北地區今日以及未來一週天氣狀況

台北地區今天天氣涼爽，午後出現溫和陽光，氣溫在攝氏二十二至二十五度之間。

各地未來一週天氣炎熱，午後都會出現雷震雨，各地應做防範豪雨準備。

正確範例︰

不良設計：

< META HTTP-EQUIV=" refresh" content="10">

此網站網址已經變更，網頁將自動轉往新網址。

改善的設計：

壯壯通訊行網址已經變更，30秒後網頁會自動連結到壯壯通訊行全球資訊網的新首頁。

想要立即前往新網址或瀏覽器未能自動更新到新網址，請選擇連結。

壯壯通訊行網

正確範例：

中央區塊

正確範例：

[略過導覽列]

[回首頁]

[搜尋]

[最新消息]

如何使用本網站

正確範例：

台灣各主要城市氣溫與紫外線強度

—表格欄位的HTML編碼省略—

正確範例：

月收入

H1{padding-top: 1em; border-top: 2px}

正確範例：

[電影]

[音樂]

植物馬鞍藤的介紹影片：馬鞍藤是屬於旋花科，和牽牛花是親戚，為多年生的……

不良設計的結果顯示：

DVD出租排行榜VCD出租排行榜綠巨人浩克魔鬼終結者3王牌天神綠……

不支援CSS時，正確範例的結果顯示：

DVD出租排行榜

綠巨人浩克

魔鬼終結者3

王牌天神

VCD出租排行榜

海底總動員

霹靂嬌娃2

綠巨人浩克

正確範例：

台灣各主要城市氣溫與紫外線溫度

正確範例：

台北花火秀

href="text_only" media="aural, braille, tty">

正確範例：

�[立法院] �[考試院] �[監察院]

[司法院] �[行政院] �

正確範例`：

IMG:after {content: attr(alt)}

正確範例：

姓名：

性別

男性

女性

汽車廠牌：

奧迪

賓士

寶馬

密碼

建議：

請輸入您的寶貴建議

無障礙網頁設計技術手冊

正確範例：

我的研究作品、

PDF檔、

TXT檔

正確範例：

… (以Tcl Script顯示昨天NBA公牛隊與爵士隊的分數) …

昨天NBA公牛隊與爵士隊比賽的結果：

不良設計：

公牛隊95分，爵士隊85分

公牛與爵士

……其他分數資料……

正確範例：

以下的範例摘錄一段獅子王中辛巴與父親對話的影片片段，旁白在不影響原有的對話下，重點介紹影片中無法藉由對話表現出來的影片內容。

辛巴：耶

〔旁白：辛巴跟在父母親的後面，在草原中奔跑。辛巴的母親微笑看著辛巴與父親並肩坐在一起，觀賞落日的餘暉。〕

父親：陽光照耀在我們國度的每一個吋土地上。

辛巴：哇

正確範例：

網站導覽

[最新消息]

[進入]

[搜尋]

本週前10名]

台中

良好

高雄

良好

headers屬性的範例：

議員姓名

消費咖啡杯數

咖啡種類

是否加糖?

李小安

摩卡

吳大義

拿鐵

正確範例：

P { font-size:32pt !important}

正確範例：

不良設計：

網路發展小組

欲呈現的網頁結果：

DVD出租排行榜 VCD出租排行榜

綠巨人浩克海底總動員

魔鬼終結者3 霹靂嬌娃2

王牌天神綠巨人浩克

正確範例：

台灣主要城市天氣概況與紫外線強度

主要城市地區

降雨機率百分比

陽光紫外線強度

台北

良好

語音合成器解讀結果：

議員姓名：李小安，消費咖啡杯數：10，咖啡種類：摩卡，是否加糖：是

議員姓名：吳大義，消費咖啡杯數：5，咖啡種類：拿鐵，是否加糖：否。

正確範例：

width="440" height="40" align="baseline" alt="無障礙網路空間服務網！">

正確範例：

.box{position: absolute; top: 5em; left: 5em}

DVD出租排行榜

綠巨人浩克

魔鬼終結者3

王牌天神

VCD出租排行榜

海底總動員

霹靂嬌娃2

綠巨人浩克

正確範例：

姓名：

工作經歷：

-- 請輸入您的工作經歷--

正確範例：

國立台北大學

.dropcap { font-size : 120%; font-family : Helvetica }

National

Taipei

正確範例：

語文能力：

(語文能力項目結束)

體育專長：

(體育專長項目結束)

正確範例：

國內外相關連結(以下連結開啟新視窗)

不良設計：

網頁文字段落中重要訊息的呈現

正確範例：

網頁文字段落中重要訊息的呈現

正確範例：

onfocus="alert('車款Boxster的命名緣由......')" tabindex="2"

src="boxster01.jpg">

不良設計：

手機品牌銷售排行榜

正確範例：

手機品牌銷售排行榜

正確範例：

以下提供各書籍下載資料：

『.com的策略規劃與設計』

Word檔

PDF檔 /

TXT檔 /

『第二本書』

Word檔 /

PDF檔 /

TXT檔 /

University

無障礙網頁設計技術手冊 - asec.com.t · web view1.1 h101000...

Documents