無障礙網頁設計規範
l
前言
l
規範內容
壹、 前言
網際網路發展之初，主要是用來在不同電腦平台之間分享文字資料，然而隨著多媒體科技的發展，許多網頁設計者為了提高網站的吸引力，往往使用大量的影音內容，但卻未在同時考慮身心障礙者在使用這些資訊時所可能碰到的問題，因而使得今日的網際網路障礙重重。近年來許多世界性的組織，包括我國政府都開始注意到相關的問題，因此提倡「網際網路無障礙」的概念，希望提供一個平等參與的網路服務空間。所以在校內推廣無障礙網頁的觀念，希望校內各網頁朝向完全無障礙網站之方向努力，以落實公平服務社會各族群之目標。
貳、 規範內容
本規範是為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的規範條文，特參考W
(一)
對於聽覺及視覺的內容要提供相等的替代文字內容
網頁開發者在網頁中遇到非文字的聽覺或視覺內容時，如果能同時提供同等內容的替代文字，將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。(範例一)
視覺的內容包括圖像、圖表、動畫等，而聽覺的內容則包括音樂、語言和各種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像，「下一頁」是適當的替代性文字，譬如一個煙火的動畫，「有煙火聲效的煙火場景動畫」，則是適當的替代視覺與聽覺的內容。
這些替代文字在網頁中所帶給我們的方便性與好處是因為語音合成器與點字顯示器等技術的成熟。網頁資訊可藉由這兩項技術，讓非文字內容得以讓視覺障礙者用聽的或觸摸的方式了解其資訊內容，對於一些有閱讀困難的人（經常伴隨著認知障礙、學習障礙、和耳聾）的人來說，要了解這些非文字的內容，可經由語音合成器來朗讀替代文字，將有極重要的幫助。替代文字的顯示不但可以符合聽障者的需求，對於非身心障礙的一般網頁瀏覽者也是有額外的幫助。
l 範例一
用alt說明圖片內容： <A href="routes.html"><IMG src="topo.html" alt="前往體育館的路徑圖">
</A>
l 範例二
若圖片內容需要較長說明，可用longdesc另外連結一個頁面：
<IMG src="97sales.gif" alt="Sales for 1997 " longdesc="sales97.html">
(二)
不要單獨靠色彩來提供特殊資訊
對許多人而言，顏色本身有它的內涵，譬如我們習慣用紅色來表示重要的資訊，但是在非彩色螢幕環境下或對顏色辨識能力有障礙的人而言，原本顏色所傳達的訊息可能會散失或受損，網頁內容的傳達將達不到可及性要求。譬如當前景和背景在色澤上太接近時，有的人可能無法分辨，譬如不同物品的敘述用不同顏色來代表時，有的色盲者可能也無法分辨。
(三)
適當地使用標記語言和樣式表單
在一般的網頁標記語言中，標記有分作結構標記（structural markup）與呈現標記（presentation markup）兩種，兩者在內涵上意義完全不同，在呈現效果上也有不同。例如表格標籤、表單標籤、標題標籤、段落標籤等都是結構標記，粗體字標籤、斜體字標籤、換行標籤、保留文字編排標籤等都是呈現標記。網頁設計者使用標記語言時，須嚴格遵守此標記的原本設計的目的，以避免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解。例如非表格資訊使用表格標籤來產生呈現編排效果、如使用標題標籤來產生大字體的效果(範例三)、如使用保留文字編排標籤來產生類似表格的編排呈現效果，都是一些常見的錯誤使用範例。
l 範例三
放大第一個字體，使用自訂dropcap設定取代CSS的first -letter：
<HEAD><TITLE>Drop caps</TITLE><STYLE type="text/css"> .dropcap { font-size : 120%; font-family : Helvetica } </STYLE></HEAD><BODY><P><SPAN class="dropcap">O</SPAN>nce upon a time...</BODY>
(四)
闡明自然語言的使用
本條規範所指的自然語言是指中文、英文、日文或韓文等語言。網頁設計者應該在文件裡標示自然語言使用的變化(範例四)，以方便語音合成器和點字輸出機來處理，以自動地將其轉換成新的語言，讓不同語言的使用者能順利讀取這份文件。網頁設計者也應該定義文件內容的主要自然語言，遇到縮寫和簡稱，應提供進一步的說明(範例五)，以免造成語音合成機或點字輸出機的誤判解讀。而且這些自然語言的標記可以讓搜尋引擎藉由這些標記來精確找出具有關鍵字的相關文件(範例六)。對學習障礙、認知障礙、或聽覺障礙者而言，自然語言標記也改進了網頁的可讀性。
l 範例四
用SPAN標明語言的轉換：
<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. </P>
l 範例五
用ACRONYM對縮寫做說明：<P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!
l 範例六
在HTML開頭標明主要用語言：<HTML lang="fr"> ....rest of an HTML document written in French...</HTML>
(五)
建立編排良好的表格
表格是網頁資訊的一種特殊資料架構，其包括的行、列、和資料格都有特別的資訊涵義，因此瀏覽器在碰到網頁的表格標籤時，都提供可以適當呈現表格的相關功能。但是許多人在網頁開發時，表格呈現在各行和各列的整齊劃一特性讓許多人非常喜歡用來做網頁資訊的呈現排版功能。如此使用對於一般瀏覽器使用者而言，並不會造成任何問題，而且網頁呈現也整齊美觀。但是這種處理方式對於使用螢幕閱讀機或點字顯示器等各種特殊輸出裝置的視障人士而言，非表格結構的資訊以表格標籤來處理時，網頁內容會被切割成順序錯亂且無法理解的資訊。
因此網頁開發者應該避免使用表格標籤做單純排版功能。在使用表格來呈現資訊時，應該確實設計表格應有結構，表格的行和列以及表格本身應該利用適當標籤來標明行標題、列標題、以及表格標題。(範例七)
l 範例七
在表格裡先用summary說明用途，並在每一格中標上header以清楚知道對應欄位：
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH id="header1">Name</TH> <TH id="header2">Cups</TH> <TH id="header3" abbr="Type">Type of Coffee</TH> <TH id="header4">Sugar?</TH> <TR> <TD headers="header1">T. Sexton</TD> <TD headers="header2">10</TD> <TD headers="header3">Espresso</TD> <TD headers="header4">No</TD>
</TABLE>
(六)
確保網頁能在新科技下良好地呈現
網際網路的技術日新月異，網頁開發者往往在設計網頁時，會使用新科技來強化其網頁運作功能，因而忽略掉使用舊瀏覽器來處理資訊的人士可能發生的種種問題。因此網頁開發者應該要確認在較新的科技不支援或關掉的時候，網頁仍然具有可及性，仍然可以讓使用者處理網頁內的資訊。
(七)
確保使用者能處理時間敏感內容的改變
在網頁資訊中所謂時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或捲軸等方式來呈現或自動更新資訊內容。因為某些有認知障礙、神經疾病人士在閱讀快速移動的文字或閃爍的圖形會造成其注意力分散或者身體不適的現象。視覺障礙者所使用的螢幕閱讀機的功能可能無法閱讀捲軸文字，肢體障礙者可能因為只能做小區域的操作，而不能和移動中的資訊內容做互動操作。為了顧及以上人士使用網頁的需求，網頁開發者應該小心使用這些時間敏感內容的操作設計(說明一)，要確定瀏覽器所提供的控制機制可讓身心障礙人士處理這些資訊，否則就應該考慮提供這些資料物件或網頁的替代方案。
l 說明一
不應該再META裡限制時間，且重新載入網頁。<META http-equiv="refresh" content="60">
(八)
確保嵌入式使用者介面具有直接可及性
網頁在設計使用者介面的操作時，必須確認其是否遵循了可及性設計的原則，亦即使用者介面的功能和操作使用是否有考慮到網頁使用者可能無法使用滑鼠操作，因此網頁的使用者介面的操作設計應該具有鍵盤可操作化、或者可自行發聲等特性。
當一個網頁內的嵌入式物件擁有它的自有的介面時，這介面必須是具有可及性的設計。假如嵌入物件的介面無法做到可及性設計，就必須提供一個可及性的替代解決方案。像是用onkeydown以來代替onmousedown、onkeyup代替onmouseup、onkeypress代替onclick等等。
(九)
設計裝置獨立網頁
裝置獨立網頁所代表的意思是指網頁使用者可以使用他們偏愛的輸入（或輸出）裝置-如滑鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置─來和其使用的瀏覽器互動。舉例來說，如果一個網頁內輸入功能的控制只能以滑鼠或其他的點選設備來啟動，那麼對那些無法使用一般瀏覽器而必須以聲音輸入、或者以鍵盤或其他非點選設備來使用網頁的人而言，將會無法使用這個網頁。
網頁開發者在使用影像地圖或當成連結使用的影像時，所使用的替代文字說明部份，可以讓使用者在不必使用滑鼠等點選設備就能與他們互動。(範例八、九)
l 範例八
用鍵盤的”alt+C”鍵開啟鏈結：<A accesskey="C" href="doc.html" hreflang="en" title="XYZ company home page">XYZ company home page</A>
l 範例九
利用TAB鍵控制表單填寫順序，以方便用鍵盤操作：<FORM action="submit" method="post"><INPUT tabindex="2" type="text" name="field1"><INPUT tabindex="1" type="text" name="field2"><INPUT tabindex="3" type="submit" name="submit"></FORM>
(十)
使用過渡的解決方案
本條規範所指的「過渡的」是指網頁語言內有新技術出現時，可能因為廠商發展的瀏覽器所實作的功能還不完備，無法充分提供可及性考量時，網頁開發者在使用此新技術時，應該額外設計和提供可及性的解決方案，使運用輔助科技和較舊版的瀏覽器仍能正確的操作。舉例來說，較舊版的瀏覽器不允許使用者瀏覽至空的編輯對話框(empty edit boxes)。較老舊的螢幕閱讀器在閱讀連續的一串連結時，會將其視為只有一個連結。這些網頁內功能強大的主動元件因而變成存取困難或根本無法存取。同樣地，網頁內的超連結操作產生改變現有的視窗或突然出現新視窗的動作時，對於無法看到這些狀況的使用者來說，也可能會是非常迷惑的。
這些過渡的可及性的解決方案，並非是永久需要，可能在廠商發展的新版瀏覽器所實作的功能完備時，即可提供新技術在訂定發展之時所規劃的可及性功能。因此一旦網頁科技已經合併了預期的特性或能力，可能這些檢測碼在未來就不是必要的。
(十一)
使用國際與國內官方訂定的技術和規範
網頁開發者在設計網頁時，應該儘量使用廣泛被採用的國際與國內官方訂定的技術和規範，避免使用單一廠商開發的特殊網頁技術。因為許多國際訂定的技術和規範會考慮技術的開放性和各系統的互通性，而且也往往有比較多的可及性考慮。例如W
目前網頁技術還有許多非W
網頁開發者應該注意到，在做文件格式的轉換時，例如，從PDF、PostScript、RTF等格式轉換成為W
(十二)
提供內容導引資訊
網頁在處理內容導引資訊之時，應提供上下文(context)和定向(orientation)資訊來幫助使用者了解複雜的網頁架構或相關元件。把元件分組和提供有關元件之間的脈絡關係對所有使用者都是有用的。(範例十、十一)網頁開發者應該要注意到一個網站內網頁各部分之間的複雜關係，對於有認知障礙的和有視覺障礙的人要做解讀可能會相當困難的。因此應該要考量他們的困難，提供詳細的內容導引資訊。
l 範例十
利用FIELDSET區隔表單中不同類別，LEGEND為不同類別的標題：
<FORM action="http://example.com/adduser" method="post"> <FIELDSET><LEGEND>個人資料</LEGEND>
<LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname" tabindex="2"> ...more personal information... </FIELDSET> <FIELDSET><LEGEND>醫療紀錄</LEGEND>
...medical history information... </FIELDSET></FORM>
l 範例十一
在下拉式選單中把相關項目用OPTGROUP分類：<FORM action="http://example.com/prog/someprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="GROUP1"> <OPTION label="1.1" value="g1.1">第一項 <OPTION label="1.2" value="g1.2">第二項 <OPTION label="1.3" value="g1.3">第三項 </OPTGROUP> <OPTGROUP label="GROUP2"> <OPTION label="2.1" value="g2.1">第一項 <OPTION label="2.2" value="g2.2">第二項 </OPTGROUP></SELECT></FORM>
(十三)
提供清楚的瀏覽網站機制
一個網站具有清楚和一致的瀏覽機制對於認知障礙或視覺障礙者是非常重要的。這種規劃考量不僅可讓身心障礙者獲益，而且可讓所有使用者在使用網站資訊時不會迷失。因此網頁開發者可以規劃各種引導資訊、瀏覽棒、網站地圖等等，以提供清楚和一致的瀏覽機制。如此可增進使用者在網站上快速而精確地找到特定資訊。
(十四)
確保簡單清楚的網頁內容
網頁開發者應確認文件的內容和用詞是清楚和簡易的，讓使用者可以更容易地理解網頁內容。使用清楚和簡易的語言可促進有效的溝通。對認知或學習障礙的人而言讀取或理解正式或官方用詞的文字書面資訊，可能是困難的。使用清楚和簡易的語言也可使那些母語與你不同的人受益，這包括那些主要以手語溝通的人。
因此網頁開發者應該採用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞，這將讓所有的使用者受益，特別是對認知障礙和閱讀困難的人有幫助。然而，仍然應該要確認網頁內的各個圖像應擁有替代文字說明以提供給全盲、弱視或任何無法觀看圖片的人來使用。