網路城邦
上一篇 回創作列表 下一篇  字體:
無障礙網頁設計的原則規範
2010/08/27 11:12:02瀏覽333|回應0|推薦0

http://www.piece2ec.com.tw/News.asp?Id=81

無障礙網頁設計的原則規範

前言

無障礙網頁設計, 就是遵循無障礙網站設計之規範,提供網頁導盲磚、鍵盤快速鍵(Access Key)、網站導覽(Site Navigator)等無障礙網頁之設計,為使對滑鼠操作有障礙之人士,亦可快速瀏覽網站之任何資訊。

本規範的規劃和訂定主要是參考W3C(World Wide Web Consortium)協會的WAI(Web Accessibility Initiative)組織訂定的無障礙網頁內容標準相關規範,並參照各國在制定無障礙網頁相關政策和推廣策略的做法,及國內近年來在身心障礙者保護政策、無障礙空間的推動、視覺障礙者在無障礙網路相關措施的努力等經驗所訂定。

本規範所訂定的網頁各種可及性設計的準則內容,其適用範圍包括有視覺障礙 (visual disabilities)、聽力障礙 (hearing disabilities)、肢體障礙 (physical disabilities)、和認知障礙或神經疾病 (cognitive or neurological disabilities)等方面的身心障礙人士使用網頁資訊所必須考慮的種種因素。除此之外,其考慮因素也包括這些身心障礙人士所使用的特殊上網裝置(包括螢幕閱讀機、螢幕擴大機、特殊按鈕、特殊鍵盤、特殊顯示裝置、點字輸入裝置和點字顯示器等),這些裝置可能是使用各種不同的操作系統,或只具有基本的網頁瀏覽功能。

本規範可供公眾網站的擁有者、網站管理人員、網頁開發者、及身心障礙人士使用,網站擁有者及網頁開發人員在規劃網站的架構與內容時,應先參考本規範,以開發出無障礙的網站。若是網站內容無法符合本規範的相關條文,應該依據本規範的條文做必要的修改以符合網頁的無障礙設計。身心障礙人士在上網瀏覽網站資訊時,若碰到無法克服的障礙,可參考本規範的條文透過適當管道要求網站擁有者予以修正。

本規範內容包括無障礙網頁可及性設計四項原則、三個優先等級、六個檢測等級、十四條規範、和八十九個標準檢測碼。其章節安排的順序可提供一個資訊網站在處理無障礙網頁的規劃、開發、設計、檢測、和認證等工作時,可以依各發展階段對於無障礙網頁開發的需要提供相關的指引。


無障礙網頁設計準則

網頁設計開發人員在設計網頁時應該依循的作業方式和考量原則。

一、無障礙網頁設計可及性設計原則
網頁設計開發人員在規劃網站的架構、資源內容的整理和呈現的處理、網頁相關技術的取捨等相關因素時,應該依循下列四個無障礙網頁可及性設計原則。

原則一:多媒體相關資訊的可及性

針對網頁內各種多媒體資訊(包括影像、圖形、語音、音樂、影片等)應加入替代或等值的文字以提高這些資訊的可及性。因為這些替代文字可以讓螢幕閱讀機、點字顯示器等各種特殊輸出裝置做進一步處理,讓視覺障礙者或聽覺障礙者可以使用其他替代方式獲得其資訊內容。至於針對認知障礙或神經疾病人士而言,應該在網頁的重要資訊上避免使用炫光、快速動態影像等媒體效果,以免造成其在使用網頁時的不適。
有關此原則的詳細內容包括在規範一、二、四、七、十四。

原則二:網頁結構和呈現處理的可及性

網頁結構的設計很容易因為網頁呈現美觀的考量而犧牲可及性設計。例如,網頁設計者可能因為考量網頁文字對齊和美觀,而採用表格和頁框做排版功能,如此一來網頁就可能具有許多無任何資訊意義的表格和頁框而混淆了特殊輸出入裝置的處理功能;網頁設計者可能因為要凸顯資訊內容的對照關係而採用不同顏色的區域,這可能造成特殊輸出入裝置無法辨識的狀況。以上設計的方式都可能破壞網頁的可及性設計,因此在規劃網頁結構和呈現時應同時考量可及性的因素,適當的使用網頁的結構標籤,忠實地利用結構和呈現標籤原先設定的功能,毋貪一時的便利或美觀而混用不當的標籤。
有關此原則的相關詳細內容包括在規範二、三、五。

原則三:網頁開發和輸出入裝置相關技術處理的可及性

全球資訊網相關技術的進步日新月異,隨時會出現許多新的技術,包括新的輸出和輸入裝置、Script語言、網頁內的程式物件、網頁排版語言、以及特殊媒體技術等。網頁設計在融入這些技術時,應考慮提供給身心障礙人士的特殊上網裝置可能尚不支援此項技術,因此在新技術引入時,應該考慮網頁資訊在不支援此技術時的各種可及性替代方案,讓身心障礙人士可以在不支援此技術時,仍然可以使用此網頁的資訊內容。例如,網頁設計應考慮網頁使用者可能無法使用滑鼠,因此必須考慮使用替代鍵盤人士操作網頁的相關需求;網頁設計在使用到網頁內的程式物件時,必須考慮特殊上網裝置可能無法執行此程式物件,因此應該提供替代網頁或相關措施讓使用網頁者可以獲得其資訊內容。
有關此原則的詳細內容包括在規範六、八、九、十、十一。

原則四:網站瀏覽機制的可及性

網站內各網頁的瀏覽機制應考量可及性操作的需求。身心障礙者因為其障礙的差異,在使用特殊上網裝置瀏覽網頁時,其瀏覽操作不如市面上一般瀏覽器那麼方便和靈活,因此網站瀏覽機制的設計應力求簡單清楚,讓網頁使用者可以依其需求來瀏覽網站。例如有些肢體障礙者只能做小區域的操作,網頁資訊的安排和設計應考慮其限制,讓使用者仍然能夠瀏覽網站資訊。
有關此原則的詳細內容包括在規範十二、十三。

二、無障礙網頁設計程序

本節說明網頁開發人員如何在網站開發過程中融入本規範所規定的各種網頁無障礙考量,使開發完成的網站資訊具有無障礙設計,以方便所有人士使用網站資訊。

步驟一:網站規劃階段
網頁開發者應該依照無障礙網頁可及性設計的四個原則來整理資訊和規劃網站。例如,在整理網站的多媒體資訊時,應該訂出良好的描述規則來設計各種多媒體資訊的替代文字說明;對於輸入項目多且操作功能複雜的網頁,應該考慮使用替代網頁;網頁各項操作不應限定只能以滑鼠操作,應該考慮鍵盤操作;網站的子系統網頁架構不宜太複雜,網頁的配置和結構也力求單純,以方便身心障礙者瀏覽。

步驟二:網站設計階段
網頁開發者在設計個別網頁時,應該依照無障礙網頁十四條規範的內容和精神來設計網頁使用的標籤和相關處理物件。例如,適當的使用網頁結構標籤和呈現表單,不應該貪一時的便利或美觀而混用不當的標籤。另外,網頁開發者在網頁編輯工具的選擇上,可儘量選擇具有網頁可及性功能的網頁編輯工具。在多媒體資訊和網頁文件的格式上,可以儘量選用具有可及性特性的檔案格式和技術。例如W3C訂定的SMIL多媒體語言和其他格式的多媒體語言比較起來就有較佳的可及性和開放性。另外,W3C訂定的SVG二維向量圖語言和具有類似功能的Flash向量圖格式比起來,也有較佳的可及性和開放性。

步驟三:網站檢測階段
網頁完成後,網頁開發者可透過無障礙網頁檢測工具來檢測網頁的可及性設計。本規範訂定了六種檢測等級註,其中有三種檢測等級是可由機器自動檢測; 有三種檢測等級是必須由人工加以判別與檢測。網頁開發者可以先使用相關檢測工具做機器檢測的作業。若機器檢查出來有未通過的檢測碼,可參考標準檢測碼相關訊息和範例說明來做網頁規劃和設計的修改。網頁經過機器檢測之後對於有些檢測碼的內容和檢測項目無法由機器判別與檢測者,則須再由人工依檢測碼的內容做判別與檢測的作業。人工檢測作業的部份可以採取自我認定或由一個公正機構或組織來處理,其施行細節再由相關辦法規範之。

步驟四:網頁認證階段
網頁內容通過檢測完成後,網頁開發者可以依據相關網頁通過的檢測等級在本規範相關的官方網站內下載各個檢測等級所對應的檢測認證標章,並參照其規定方式在網頁的適當位置放置檢測認證標章和說明。讓網頁使用者可以得知此網頁通過的無障礙網頁規範認證的等級。
註:檢測等級的詳細內容請參照請本規範第肆章檢測等級。


優先等級

本規範為了讓網頁開發者和網頁使用者能夠對網頁的可及性設計有明確的評估方式和一致的認定準則,特參考WAI組織在相關無障礙網頁標準的設計,以三個優先等級來規範無障礙網頁的可及性設計。此三個優先等級會直接反映到本規範訂定的十四條規範、標準檢測碼、檢測等級、和檢測認證標章。三個優先等級的定義如后所示:

一、第一優先權
網頁內容開發者在開發網頁時必須滿足這個檢測碼。否則,某些使用者或團體將會發現不可能使用此文件的資訊。滿足這個檢測碼對一些使用網頁文件的團體來說,是一種基本的需求。

二、第二優先權
網頁內容開發者在開發網頁時應該滿足這個檢測碼。否則,某些使用者或團體將會發現有困難來使用此文件的資訊。滿足這個檢測碼,將可對網頁文件移除重要障礙。

三、第三優先權
網頁內容開發者在開發網頁時可以納入這個檢測碼的要求。否則,某些使用者或團體將會發現有可能有困難來使用此文件的資訊。滿足這個檢測碼,將可對網頁文件改善可及性。

檢測等級
本規範在網頁無障礙設計的檢測等級的規劃在設計時經參考國內外相關的做法,考慮三個主要因素:優先等級、機器檢測還是人工檢測、以及標準檢測碼的狀態。其中優先等級的考量可以反映網頁設計的可及性程度;機器檢測或人工檢測的考量可以反映檢測者的身份;標準檢測碼的狀態的考量可以反映檢測處理方式的認定。

機器檢測(M)
單星級:通過第一優先權、檢測狀態註為0的檢測碼
雙星級:通過第一、二優先權、檢測狀態為0的檢測碼
參星級:通過第一、二、三優先權、檢測狀態為0的檢測碼

人工檢測(H)
單星級:通過第一優先權、檢測狀態為1和2的檢測碼
雙星級:通過第一、二優先權、檢測狀態為1和2的檢測碼
參星級:通過第一、二、三優先權、檢測狀態為1和2的檢測碼
註:標準檢測碼的狀態的定義請參照本規範第陸章第一節標準檢測碼格式。

十四條規範

本規範為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的規範條文,特參考WAI組織在相關無障礙網頁標準的設計,以十四條規範來引導網頁開發者設計可以讓所有人士都可以使用的無障礙網頁。

規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
網頁開發者在網頁中遇到非文字的聽覺或視覺內容時,如果能同時提供同等內容的替代文字,將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。
視覺的內容包括圖像、圖表、動畫等,而聽覺的內容則包括音樂、語言和各種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像,「下一頁」是適當的替代性文字;譬如一個煙火的動畫,「有煙火聲效的煙火場景動畫」,則是適當的替代視覺與聽覺的內容。
這些替代文字在網頁中所帶給我們的方便性與好處是因為語音合成器與點字顯示器等技術的成熟。網頁資訊可藉由這兩項技術,讓非文字內容得以讓視覺障礙者用聽的或觸摸的方式了解其資訊內容;對於一些有閱讀困難的人(經常伴隨著認知障礙、學習障礙、和耳聾)的人來說,要了解這些非文字的內容,可經由語音合成器來朗讀替代文字,將有極重要的幫助;替代文字的顯示不但可以符合聽障者的需求,對於非身心障礙的一般網頁瀏覽者也是有額外的幫助。

規範二:不要單獨靠色彩來提供特殊資訊
對許多人而言,顏色本身有它的內涵,譬如我們習慣用紅色來表示重要的資訊,但是在非彩色螢幕環境下或對顏色辨識能力有障礙的人而言,原本顏色所傳達的訊息可能會散失或受損,網頁內容的傳達將達不到可及性要求。譬如當前景和背景在色澤上太接近時,有的人可能無法分辨;譬如不同物品的敘述用不同顏色來代表時,有的色盲者可能也無法分辨。
 
規範三:適當地使用標記語言和樣式表單
在一般的網頁標記語言中,標記有分作結構標記(structural markup)與呈現標記(presentation markup)兩種,兩者在內涵上意義完全不同,在呈現效果上也有不同。例如表格標籤、表單標籤、標題標籤、段落標籤等都是結構標記;粗體字標籤、斜體字標籤、換行標籤、保留文字編排標籤等都是呈現標記。網頁設計者使用標記語言時,須嚴格遵守此標記的原本設計的目的,以避免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解。例如非表格資訊使用表格標籤來產生呈現編排效果、如使用標題標籤來產生大字體的效果、如使用保留文字編排標籤來產生類似表格的編排呈現效果,都是一些常見的錯誤使用範例。

規範四:闡明自然語言的使用
本條規範所指的自然語言是指中文、英文、日文或韓文等語言。網頁設計者應該在文件裡標示自然語言使用的變化,以方便語音合成器和點字輸出機來處理,以自動地將其轉換成新的語言,讓不同語言的使用者能順利讀取這份文件。網頁設計者也應該定義文件內容的主要自然語言;遇到縮寫和簡稱,應提供進一步的說明,以免造成語音合成機或點字輸出機的誤判解讀。而且這些自然語言的標記可以讓搜尋引擎藉由這些標記來精確找出具有關鍵字的相關文件。對學習障礙、認知障礙、或聽覺障礙者而言,自然語言標記也改進了網頁的可讀性。

規範五:建立編排良好的表格
表格是網頁資訊的一種特殊資料架構,其包括的行、列、和資料格都有特別的資訊涵義,因此瀏覽器在碰到網頁的表格標籤時,都提供可以適當呈現表格的相關功能。但是許多人在網頁開發時,表格呈現在各行和各列的整齊劃一特性讓許多人非常喜歡用來做網頁資訊的呈現排版功能。如此使用對於一般瀏覽器使用者而言,並不會造成任何問題,而且網頁呈現也整齊美觀。但是這種處理方式對於使用螢幕閱讀機或點字顯示器等各種特殊輸出裝置的視障人士而言,非表格結構的資訊以表格標籤來處理時,網頁內容會被切割成順序錯亂且無法理解的資訊。
因此網頁開發者應該避免使用表格標籤做單純排版功能。在使用表格來呈現資訊時,應該確實設計表格應有結構,表格的行和列以及表格本身應該利用適當標籤來標明行標題、列標題、以及表格標題。

規範六:確保網頁能在新科技下良好地呈現
網際網路的技術日新月異,網頁開發者往往在設計網頁時,會使用新科技來強化其網頁運作功能,因而忽略掉使用舊瀏覽器來處理資訊的人士可能發生的種種問題。因此網頁開發者應該要確認在較新的科技不支援或關掉的時候,網頁仍然具有可及性,仍然可以讓使用者處理網頁內的資訊。

規範七:確保使用者能處理時間敏感內容的改變
在網頁資訊中所謂時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或捲軸等方式來呈現或自動更新資訊內容。因為某些有認知障礙、神經疾病人士在閱讀快速移動的文字或閃爍的圖形會造成其注意力分散或者身體不適的現象;視覺障礙者所使用的螢幕閱讀機的功能可能無法閱讀捲軸文字;肢體障礙者可能因為只能做小區域的操作,而不能和移動中的資訊內容做互動操作。為了顧及以上人士使用網頁的需求,網頁開發者應該小心使用這些時間敏感內容的操作設計,要確定瀏覽器所提供的控制機制可讓身心障礙人士處理這些資訊,否則就應該考慮提供這些資料物件或網頁的替代方案。
 
規範八:確保嵌入式使用者介面具有直接可及性
網頁在設計使用者介面的操作時,必須確認其是否遵循了可及性設計的原則,亦即使用者介面的功能和操作使用是否有考慮到網頁使用者可能無法使用滑鼠操作,因此網頁的使用者介面的操作設計應該具有鍵盤可操作化、或者可自行發聲等特性。
當一個網頁內的嵌入式物件擁有它的自有的介面時,這介面必須是具有可及性的設計。假如嵌入物件的介面無法做到可及性設計,就必須提供一個可及性的替代解決方案。

規範九:設計裝置獨立網頁
裝置獨立網頁所代表的意思是指網頁使用者可以使用他們偏愛的輸入(或輸出)裝置-如滑鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置─來和其使用的瀏覽器互動。舉例來說,如果一個網頁內輸入功能的控制只能以滑鼠或其他的點選設備來啟動,那麼對那些無法使用一般瀏覽器而必須以聲音輸入、或者以鍵盤或其他非點選設備來使用網頁的人而言,將會無法使用這個網頁。
網頁開發者在使用影像地圖或當成連結使用的影像時,所使用的替代文字說明部份,可以讓使用者在不必使用滑鼠等點選設備就能與他們互動。此部份的說明也可參考規範1。

規範十:使用過渡的解決方案
本條規範所指的「過渡的」是指網頁語言內有新技術出現時,可能因為廠商發展的瀏覽器所實作的功能還不完備,無法充分提供可及性考量時,網頁開發者在使用此新技術時,應該額外設計和提供可及性的解決方案,使運用輔助科技和較舊版的瀏覽器仍能正確的操作。舉例來說,較舊版的瀏覽器不允許使用者瀏覽至空的編輯對話框(empty edit boxes)。較老舊的螢幕閱讀器在閱讀連續的一串連結時,會將其視為只有一個連結。這些網頁內功能強大的主動元件因而變成存取困難或根本無法存取。同樣地,網頁內的超連結操作產生改變現有的視窗或突然出現新視窗的動作時,對於無法看到這些狀況的使用者來說,也可能會是非常迷惑的。
這些過渡的可及性的解決方案,並非是永久需要,可能在廠商發展的新版瀏覽器所實作的功能完備時,即可提供新技術在訂定發展之時所規劃的可及性功能。因此一旦網頁科技已經合併了預期的特性或能力,可能這些檢測碼在未來就不是必要的。

規範十一:使用國際與國內官方訂定的技術和規範
網頁開發者在設計網頁時,應該儘量使用廣泛被採用的國際與國內官方訂定的技術和規範,避免使用單一廠商開發的特殊網頁技術。因為許多國際訂定的技術和規範會考慮技術的開放性和各系統的互通性,而且也往往有比較多的可及性考慮。例如W3C協會訂定的相關語言和技術在設計階段即與相關企業一起考量可及性的問題。若目前使用這些語言和技術仍無法提供足夠的可及性功能,也比較能夠提供替代的可及性方案。
目前網頁技術還有許多非W3C協會訂定的格式(如:PDF、Shockwave等等)需要以外掛程式或其他的應用軟體來觀看。這些格式經常不能以標準的瀏覽器以及其他現有的各種輔助科技來觀看或瀏覽。避免使用非W3C和非標準化特性的網頁資訊元件(包括專屬元件和特殊屬性)將使網頁更能適應使用各種類型的軟硬體和使用者。而且在碰到必須使用不可及的技術和替代方案時,也比較容易設計出符合可及性的替代網頁。
網頁開發者應該注意到,在做文件格式的轉換時,例如,從PDF、PostScript、RTF等格式轉換成為W3C的標記語言(譬如HTML、XML等)並不保證一定能做出一份可及的文件。因此,在轉換手續之後必須驗證每個網頁的可及性和可用性。假如網頁未能完全轉換時,就應該要持續改進該網頁以儘量接近它原本的表現方式,或者是另外提供一個HTML或普通文字版本的網頁。

規範十二:提供內容導引資訊
網頁在處理內容導引資訊之時,應提供上下文(context)和定向(orientation)資訊來幫助使用者了解複雜的網頁架構或相關元件。把元件分組和提供有關元件之間的脈絡關係對所有使用者都是有用的。網頁開發者應該要注意到一個網站內網頁各部分之間的複雜關係,對於有認知障礙的和有視覺障礙的人要做解讀可能會相當困難的。因此應該要考量他們的困難,提供詳細的內容導引資訊。

規範十三:提供清楚的瀏覽網站機制
一個網站具有清楚和一致的瀏覽機制對於認知障礙或視覺障礙者是非常重要的。這種規劃考量不僅可讓身心障礙者獲益,而且可讓所有使用者在使用網站資訊時不會迷失。因此網頁開發者可以規劃各種引導資訊、瀏覽棒、網站地圖等等,以提供清楚和一致的瀏覽機制。如此可增進使用者在網站上快速而精確地找到特定資訊。

規範十四:確保簡單清楚的網頁內容
網頁開發者應確認文件的內容和用詞是清楚和簡易的,讓使用者可以更容易地理解網頁內容。使用清楚和簡易的語言可促進有效的溝通。對認知或學習障礙的人而言讀取或理解正式或官方用詞的文字書面資訊,可能是困難的。使用清楚和簡易的語言也可使那些母語與你不同的人受益,這包括那些主要以手語溝通的人。
因此網頁開發者應該採用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞,這將讓所有的使用者受益,特別是對認知障礙和閱讀困難的人有幫助。然而,仍然應該要確認網頁內的各個圖像應擁有替代文字說明以提供給全盲、弱視或任何無法觀看圖片的人來使用。相關說明可參考規範一。

標準檢測碼

本章敘述標準檢測碼的設計,考慮包括網頁文件語言、優先等級、規範條文、和檢測狀態等因素。本規範目前針對HTML語言設計其標準檢測碼,但是標準檢測碼的設計並不是只是考慮單一語言,本標準檢測碼的設計可以適用於其他網頁開發和設計的語言。
一、標準檢測碼格式
標準檢測碼格式為一個字母和六位數: 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| . . .

二、檢測碼訊息
規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
H101000 -圖片需要加上替代文字說明
H101001 -對於applet提供替代文字說明
H101002 -對於object提供替代文字說明
H101003 -對於表單中的圖形按鍵提供替代文字說明
H101004 -影像地圖區域需要加上替代文字說明
H101105 -當影像地圖使用為上傳按鈕時,每一作用區域必須分別使用不同的按鈕
H101106 -當ALT屬性的文字陳述大於150個英文字元時,考慮另外提供文字敘述
H101107 -提供LONGDESC以外的描述性超連結(如使用以D為提示的超連結),來描述LONGDESC的內容
H101108 -圖形替代文字陳述不夠清晰時,提供更多的文字描述(如使用longdesc屬性)
H101109 -所有語音檔案必須有文字旁白
H101210 -以可及性的影像來替代ASCII文字藝術
H101111 -視訊中的聲音必須提供同步文字型態的旁白
H101212 -伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結
H101213 -多媒體視覺影像呈現時,必須提供聽覺說明
H101214 -多媒體呈現時,必須同步產生相對應替代的語音或文字說明
H301215 -客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結

規範二:不要單獨靠色彩來提供特殊資訊
H102100 -確保所有藉由顏色所傳達出來的訊息,在沒有顏色後仍然能夠傳達出來
H202201 -確保前景顏色與背景顏色彼此呈現明顯的對比

規範三:適當地使用標記語言和樣式表單
H203200 -以實際存在的標記語言(如MathML)呈現網頁內容(如數學方程式),避免使用圖形影像呈現
H203001 -確定網頁設計文件,有效使用正規的HTML語法
H203102 -在DOCTYPE標籤中,使用標準規範的敘述以識別HTML版本類型
H203203 -盡可能使用樣式表單控制網頁排版與內容的呈現
H203004 -要使用相對尺寸(如%)而非絕對尺寸(如像素)
H203105 -適當使用巢狀標題呈現文件結構
H203106 -避免使用header標籤來產生粗體字效果
H203107 -項目符號及編號之標籤(如li、ul)僅可使用於實際網頁內容的項目條列,不可用於編輯格式
H203108 -確保Q和BLOCKQUOTE標籤只是用來當引用語而不是用來縮排
H203209 -以Q及BLOCKQUOTE標籤來標記引用語

規範四:闡明自然語言的使用
H104200 -明確地指出網頁內容中語言的轉換
H304201 -使用ABBR及ACRONYM標籤表示網頁中呈現的文字縮寫與簡稱
H304202 -明確指出網頁文字所使用的自然語言

規範五:建立編排良好的表格
H105100 -對於每一個存放資料的表格(不是用來排版),標示出行和列的標題
H105101 -表格中超過二行/列以上的標題,須以結構化的標記確認彼此間的結構與關係
H205102 -在網頁內容呈現設計時,避免以表格做多欄文字的設計
H205103 -若表格只做為版面配置時,勿使用表格之結構標記(如th標籤)作為網頁格式視覺效果
H305104 -表格須提供表格摘要說明(如summary屬性)
H305105 -資料表格須提供標題說明
H305106 -表格行列過長的標題,須提供縮寫或簡稱

規範六:確保網頁能在新科技下良好地呈現
H106100 -使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀
H106001 -頁框來源必須是HTML檔案
H106002 -使用Script語言需指定不支援Script時的辦法
H106103 -若網頁內的程式物件沒有作用時,確保網頁內容仍然可以傳達
H206104 -若網頁物件使用事件驅動時,確定勿僅使用滑鼠操作
H206005 -使用頁框時要指定不支援頁框時的辦法

規範七:確保使用者能處理時間敏感內容的改變
H107200 -確保網頁設計不會致使螢幕快速閃爍
H207001 -避免使用blink標籤閃爍螢幕
H207002 -避免使用marquee標籤移動文字
H207103 -避免使用動態gif圖片
H207004 -不要讓網頁每隔一段時間自動更新
H207005 -不要自動轉移網頁的網址

規範八:確保嵌入式使用者介面具有直接可及性
H208100 -對由scripts、applets及objects所產生之資訊,提供可及性替代方式

規範九:設計裝置獨立網頁
H109100 -盡量使用客戶端影像地圖替代伺服器端影像地圖連結
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 -避免在網頁上使用ASCII文字藝術

規範十四:確保簡單清楚的網頁內容
H114200 -網頁內容要使用簡單易懂的文字
H314201 -使用可及性的圖形促進網頁內容的理解
H314202 -網頁彼此間設計呈現的風格要一致

中英名詞對照
Accessible 可及性
ACSII art ACSII文字藝術
Assistive technology 輔助科技
Authoring tool 編輯工具

Backward compatible 反向相容
Braille 點字
braille display, 點字顯示器

Cascading Style Sheet (CSS) 串接呈現表單
cognitive disability 認知障礙
Content developer 內容開發者
Context 上下文

Device independent 裝置獨立的
Document Content, Structure, and Presentation 文件內容、結構、和表達
structural element結構元素
presentation element表達元素
Dynamic HTML (DHTML) 動態HTML

Equivalent 等效

hearing disabilities 聽力障礙
Human Check 人工檢測
Human Checkable 人工可檢測
Human Identify 人工辨識
Human Identifiable 人工可辨識
Hypertext Markup Language (HTML) 超文件標示語言

Image 影像
Image map影像地圖

Linearized table 線性化表格
Link text 鏈結文字

Machine Check 機器檢測
Machine Checkable 機器可檢測
Machine Identify機器辨識
Machine Identifiable 機器可辨識

Natural Language 自然語言
Navigation Mechanism 導航機制
navigation bars 導航條
neurological disability 神經疾病

orientation 定向

physical disability 肢體殘障
presentation markup呈現標記

SMIL (Synchronized Multimedia Integration Language) 同步化多媒體整合語言
site maps 網站地圖
Screen magnifier 螢幕放大器
Screen reader 螢幕閱讀機
Structural markup 結構標記
Style sheets 排版表單
SVG (Scalable Vector Graphics) 可縮放向量圖語言

Tabular information 表格資訊

User agent 使用者代理人

visual disability 視覺障礙

WAI(Web Accessibility Initiative) 資訊網可及性推動組織
W3C(World Wide Web Consortium) 全球資訊網協會

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

 

來源:行政院研究發展考核委員會
 

參考文獻:

李青蓉等編著.(1998).人機介面設計,台北縣:空大。

邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。

Lynn, G. S.; Lipp, S. M.; Akgun, A .E.; Cortez, A. Jr. (2003), Factors Impacting the Adoption and Effectiveness of the World Wide Web in Marketing, Industrial Marketing Management, 31(1), 35-49.





相關文章

研究網頁設計的動機及目的
英16歲中學生創業賺5千萬
當IT人須要瞭解網頁設計的未來
什麼是網頁設計
基礎網頁設計色彩概念

最新文章

從網路行銷的角度來看網頁設計
SEO關鍵字網站獲利的秘密,深入探討 eCPM 背後的涵義
研究網頁設計的動機及目的
英16歲中學生創業賺5千萬
當IT人須要瞭解網頁設計的未來

http://www.piece2ec.com.tw

( 休閒生活生活情報 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=piece2ec&aid=4358333