無障礙網頁設計技術手冊 · web view中華民國九十二年十月...

，而應該是。

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

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

改善的設計：

行政院本會

行政院勞委會

行政院農委會

改善的設計：

休閒雅痞型

古板上班族

正確範例：

山谷中和風餐館的照片

改善的設計：

歡迎進入無障礙網路

正確範例：

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

正確範例：

台灣三大入口網站包含 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}

正確範例：

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%)﹜

正確範例：

學習歷程檔案

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

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

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

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)}

無障礙網頁設計技術手冊

正確範例：

… (以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">

不良設計：

手機品牌銷售排行榜

正確範例：

手機品牌銷售排行榜

University

無障礙網頁設計技術手冊 · web view中華民國九十二年十月...

Documents