茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664789 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
1200547048.gif

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [分享]無障礙網路空間

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[分享]無障礙網路空間
規範與檢測碼介紹(第一至第七條規範以及相關檢測碼)
整個課程可以分為以下二個部份:

無障礙網頁開發規範
檢測碼介紹
無障礙網頁開發規範(上)
我國無障礙網路十四條規範是源自於世界網路集團(W3C)底下WAI所制定之WCAG 1.0(Web Content Accessibility Guidelines 1.0, May,1999)所制定的。我國於1997年公佈身心障礙者保護法,其中關於身心障礙者對於電子媒體資訊及網路資訊的獲得卻沒有相關的保護規定。因此,身心障者的網路使用權遭到漠視。在現今網際網路的普及清況之下,政府需提供身心障礙者的更優質網路環境。對於身心障礙者而言,走出戶外可能不是一件容易的事情,但是網路卻提供了一個便利的資訊傳遞空間,所以這就是政府積極推動無障礙網路空間的用意,讓身心障礙者可以不受限於身體上的缺陷,和一般人依樣可以獲得網路上所有的資訊。其實,無障礙網路空間的推動,不只是對身心障礙者有好處,對於一般人也可以增加網路的可及性及好用度。

無障礙網路規範共有十四條規範,可分為九十條檢測碼及三個優先等級。行政院研考會這次推動無障礙網路規範,希望政府機關的網站可以先通過第一優先等級,提供最基礎的無障礙網路空間。在三個優先等級中最高等級是第三優先等級,當網站達到第三優先等級,網站的可及性及好用度也會相對的比較高,所以在網站的使用上是比較少有問題的。

以下將對十四條規範做說明,並舉一些例子讓各位更了解規範的實際內容,讓各位在設計網站時,可以更容易符合無障礙網頁的規範。

規範一:對於聽覺及視覺的內容要提供相等的替代文字
Guideline 1. Provide equivalent alternatives to auditory and visual content.

網頁有非文字的聽覺或視覺內容時,應提供同等內容的替代文字

說明:在一般的網站上,除了使用文字之外,還常常會使用圖片、聲音或是動畫的物件來呈現整個網站的內容,但是這些網頁的物件,對於身心障礙者而言是會造成閱讀網頁上的障礙,所以在設計類似的網頁物件時,需提供替代解決方案。

例如: 1.1:H101000 圖片需要加上替代文字說明

一般在設計網頁時常常會包含圖片在網頁裡面,但是對於視障者而言,點字顯示器無法傳遞圖片所顯示的資訊,所以,我們必須在圖片IMG標籤中設定ALT屬性,在ALT屬性中設定對於圖片的文字說明,視障者可以由ALT屬性的文字內來了解圖片的內容。但是,當加入ALT文字說明時,我們必須要提供正確的ALT文字說明,避免ALT提供錯誤的資訊。如果ALT文字說明部份只寫「照片」兩個字,那麼使用者還是不知道照片的內容,所以這樣的ALT文字說明是沒有意義的。

例如:1.3:H101002 對於object提供替代文字說明

網頁中object物件中可能會包含影片、圖片或是其他多媒體資訊,這些對於身心障礙者都是不容易閱讀的,所以網頁設計者必須在object物件中提供多媒體物件的文字說明,讓身心障礙者可以藉由文字的說明,來了解多媒體物件的內容。

規範二:不要單獨靠色彩來提供特殊資訊
Guideline 2. Don't rely on color alone.

對顏色辨識能力有障礙的人而言,網頁資訊可能因顏色所傳達導致資訊的散失或受損

說明:當網站上的資訊是單獨透過顏色來傳達訊時,對於使用單色螢幕或是色盲的人可能造成資訊無法完整的傳達或是產生錯誤的資訊。所以網頁設計者為了完整的傳達資訊,應該要避免單獨透過顏色來傳達資訊。

例如:2.1:H102100 確保所有藉由顏色所傳達出來的訊息,在沒有顏色後仍然能夠傳達出來

如果網站上有一份表格需要使用者填寫,網頁設計者告訴使用者必須填寫紅色標題的部份,其他部分可填可不填,如果是色盲或是單色螢幕的使用者就無法辨別表格上的欄位,哪些部分是必須填寫的。因此,網頁設計者應該要避免單獨透過顏色來傳達資訊。

規範三:適當地使用標記語言和樣式表單
Guideline 3. Use markup and style sheets and do so properly.

須嚴格遵守此標記的原本設計的目的,以免身心障礙者在瀏覽網頁時所使用的特殊軟體解讀這些標記時產生誤解

說明:同樣的設計在不同的瀏覽器之下,可能都會顯示出不同的網頁效果。所以當身心障礙者在使用特殊的瀏覽器時,我們必須嚴格遵守此標記語言原本設計的目的,以免身心障礙者使用的特殊瀏覽器會誤解網頁語言,而傳達錯誤的資訊給予使用者。

例如:3.2:H203001 確定網頁設計文件,有效使用正規的HTML語法

如果我們有重要的消息想要再網站上發佈時,我們可能會使用B標籤,來讓該段重要文字,呈現粗體字的狀態,吸引讀者的注意,但是B標籤對點字顯示器而言,只是代表此處的文字是粗體字,而沒有任何強調重點的意思,所以,我們如果有重要消息想在網站上發佈我們應該使用STRONG標籤,它的效果和B標籤一樣,且多了一層重要的意涵,所以視障者可以確切的知道這段文字的重要性。

規範四:闡明自然語言的使用
Guideline 4. Clarify natural language usage

標示自然語言使用的變化,以方便語音合成器和點字輸出機來處理

說明:視障者在使用網路時,通常是透過語音合成器或是點字輸出機,所以當我們標示自然語言使用的變換,語音合成器和點字輸出機就會輸出正確語系的文字或是語音,導引使用者來瀏覽網頁。

例如:4.1:H104200 明確地指出網頁內容中語言的轉換

當網頁中突然出現一段法文字時,我們可以用SPAN標籤將這段文字包含起來,然後,在SPAN標籤中設定lang屬性方便語音合成器和點字輸出機輸出法文的資訊。

例如:4.3:H304002 明確指出網頁文字所使用的自然語言

在網頁HTML標籤中設定lang屬性宣告整個網頁所使用的自然語言,譬如<html lang="zh-TW">,在前面的範例中有提到,使用英文為自然語言的設定:<html lang="en">;使用法文為自然語言的設定:<html lang="fr">;使用繁體中文為自然語言的設定:<html lang="zh-TW>;使用日文為自然語言的設定:<html lang="ja">。

規範五:建立編排良好的表格
Guideline 5. Create tables that transform gracefully.

非表格結構的資訊以表格標籤來處理時,網頁內容會被切割成順序錯亂且無法理解的資訊,應該避免使用表格標籤做單純排版功能

說明:網頁設計者在編排網頁的表格時,如果沒有依照視障者閱讀表格的習慣,由左而右由上而下的方式來設計表格,就可會造成視障者在讀取網頁表格中的資訊時會產生錯誤。

規範六:確保網頁能在新科技下良好地呈現
Guideline 6. Ensure that pages featuring new technologies transform gracefully

確認在較新的科技不支援或關掉的時候,網頁仍然具有可及性,仍然可以讓使用者處理網頁內的資訊

說明:譬如在IE5.0之前是無法閱讀Flash物件,所以當使用者沒有更新網頁時,就無法閱讀Flash物件的內容,或是瀏覽器會要求使用者下載更新的元件來讓瀏覽器支援Flash,如果使用者不是很了解電腦的運作,他可能就會害怕下載這些他不了解的元件,導致網頁瀏覽器依然無法支援Flash物件,所以規範六是希望網頁設計者在設計網頁內容的時候,讓使用者如果沒有最新科技的支援下依然可以閱讀網頁內的資訊。

例如:6.4:H106103 網頁內的程式物件沒有作用時,確保網頁內容仍然可以傳達

當在網頁使用附屬應用小程式產生類似跑馬燈效果傳遞重要資訊時,如果瀏覽器無法支援附屬應用小程式產生跑馬燈時,就會再網頁上形成一個空白區域,且無法傳遞原本所要表達的訊息。所以,我們必須提供替代的文字說明,當附屬應用小程式無法成功運作時,使用者依然可以透過純文字的訊息,來了解網頁所要傳達的重要資訊。

規範七:確保使用者能處理時間敏感內容的改變
Guideline 7. Ensure user control of time-sensitive content changes.

時間敏感內容是指網頁顯示的資訊可能會以可移動、閃爍、或捲軸等方式來呈現或自動更新資訊內容

說明:當網頁使用的物件中是由時間軸來控制網頁資訊的顯示時,我們必須確保網頁元件的資訊顯示的速度是合適的,不會造成使用者在閱讀資訊時的障礙。

例如:7.3:H207002 避免使用marquee標籤移動文字

網頁設計者常常會在網頁上使用跑馬燈的設計,因為跑動的文字可以吸引使用者的目光焦點,但是這樣的設計對於有閱讀障礙的使用者而言是有障礙的,使用者可能無法跟上跑馬燈文字移動的速度,導致無法了解跑馬燈文字的內容。我們可以使用EM標籤、動態文字的gif檔或是 APPLET(加入正確的alt說明)來代替marquee標籤,依樣可以達到吸引使用者目光,且不會造成使用者的困擾。

例如:7.6:H207005 不要自動轉移網頁的網址

網頁設計師在設計自動轉址的功能時,往往會設定成過短的時間,就轉向新的網址,造成使用者在未完全閱讀原本網頁的情況下,就被導往新的網址;或是使用者的瀏覽器無法支援轉址的功能,那麼使用者可能就會依職停留在那個頁面之中。所以,比較好的設計是將自動轉址的時間延長,且提供文字連結轉至新網址。

規範與檢測碼介紹(第八至第十四條規範、檢測碼以及三個優先等級說明)
無障礙網頁開發規範(下)
規範八:確保嵌入式使用者介面具有直接可及性
Guideline 8. Ensure direct accessibility of embedded user interfaces.

當一個網頁內的嵌入式物件擁有它的自有的介面時,這介面必須是具有可及性的設計

說明:下面的例子是在網站的開場頁使用Flash的物件,在一般的瀏覽器中是可以顯示Flash,但是如果在視障者的純文字瀏覽器之下是無法使用的,純文字瀏覽器只會告訴使用者,這個網頁包含了一個物件,無法完全顯示Flash中所包含的文字或是圖片設定。所以,網頁設計者在設計網頁時,必須注意網頁中的資訊在純文字的模式之下是可以完整傳達且不會散失。

規範九:設計裝置獨立網頁
Guideline 9. Design for device-independence.

網頁使用者可以使用他們慣用的輸入(或輸出)裝置—如視窗導盲鼠、鍵盤、聲音輸入、頭杖、或者其他輸入裝置─來和其使用的瀏覽器互動(不受限於某一種設備或是系統)

說明:此項規範的意思是使用者可以選擇自己偏愛輸入或是輸出工具來閱讀網頁,不需受限於使用某種工具。一個網頁如果只能依靠使用滑鼠來驅動網頁的物件時,那麼無法使用滑鼠的身心障礙者,將無法進入這個網頁。所以,規範九建議網頁設計者可以設計網頁上的元件可以使用多重的方法來驅動,而不要只單靠某一種裝置來驅動。

規範十:使用過渡的解決方案
Guideline 10. Use interim solutions.

網頁語言有新技術出現時,可能因為目前瀏覽器的功能還不完備,無法充分提供可及性考量時,應該額外設計和提供可及性的解決方案

說明:使用舊型瀏覽器的使用者,無法顯示新型瀏覽器所支援的功能,所以網頁設計者需提供過度的方案,來讓舊型的瀏灠器能夠透過替代方案來呈現和新型瀏覽器一樣完整的資訊。當新的網頁語言普及或成熟之後,這樣的過度方案也就可以功成身退了。

例如:10.5:H310004 在網頁文字輸入區中須有預設值

不良的示範是在文字輸入區塊中沒有預設值的文字提示,使用者無法辨別該文字輸入區塊該填入何種的文字資訊。所以,在正確的範例之中,應該在文字輸入區中,提供文字的提示,讓使用者可以清楚明白的了解該文字輸入區塊需填入何種的文字資訊。

規範十一:使用國際與國內官方訂定的技術和規範
Guideline 11. Use W3C technologies and guidelines.

儘量使用廣泛被採用的國際與國內官方訂定的技術和規範,避免使用單一廠商開發的特殊網頁技術

說明:如果使用單一廠商所開法的特殊網頁技術時,對於其他的使用者而言,如果該技術的軟體不易獲得或是價格昂貴,那麼使用者就無法獲的該網頁所提供的資訊,這樣會造成使用者的困擾且增加使用者負擔。

例如:11.3:H211202 避免使用過時的HTML語法

如果我們希望網頁呈現一個清單的效果,不良的示範是使用過時的<DIR>標籤語言來呈現清單的效果,正確的示範可以使用HTML4.01所支援的<UL>標籤語言來達到同樣的效果。

規範十二:提供內容導引資訊
Guideline 12. Provide context and orientation information.

網頁在處理內容導引資訊之時,應提供上下文和定向資訊來幫助使用者了解複雜的網頁架構或相關元件 。

說明:整個網站的內容非常繁複,如果沒有簡潔明瞭的內容導引,使用者可能需要花費過多的時間來了解整個網站的內容架構。

例如:

使用路徑連結 首頁 > 第二層 > 第三層 > 網頁主題
採用簡明一致的標題
標示Access Keys <a accesskey="C" href=" ">
如果整個網站的區塊,分為左、中、右三個區塊,在一般的網頁之中左側的區塊通常為網站的選單,中間區塊則為主要內容區,右側則多為廣告區塊,我們就可以將左側區塊設ALT+L、中間區塊設為ALT+C、右側區塊設為ALT+L,方便使用者在網頁區塊中迅速的切換,移至所需要的區塊,而不用重複閱讀相同的網頁內容。

規範十三:提供清楚的瀏覽網站機制
Guideline 13. Provide clear navigation mechanisms.

規劃各種引導資訊、瀏覽棒、網站地圖等等,以提供清楚和一致的瀏覽機制(ex:consistent navigation bar, sitemap, accesskey……)

說明:現在大部分的網站都有一個複雜的結構,如果網頁設計者沒有提供規劃各種引導資訊或是提供網站地圖,那麼使用者可能會迷失在網站之中,不知身處在網站中的何方,所以提供清楚的瀏覽網站機制,是網頁設計者在設計網頁中需要特別注意的一個方向。

例如:13.1:H213200 設計並確保有意義的超連結說明,便於網頁內容的閱讀

視障者在瀏覽網頁時,通常是使用TAB鍵來瀏覽網路上的超連結,所以捰頁設計者需要確保超連結說明是有意義的,讓使用者可以不必瀏覽上下文的內容就可以清楚該超連結的作用。

例如:13.3:H213202 指向不同網址的超連結,不可使用相同的超連結說明

視覺障礙者是藉由語音瀏覽器聽取網頁資訊,網頁開發者針對指向不同網址的超連結,不可使用相同的超連結說明,以避免視覺障礙者所使用的語音瀏覽器讀出混淆的超連結內容。指向不同網址的超連結不可以使用相同的超連結說明,如果需要使用相同的超連結標籤,可以在A標籤中使用title屬性來區別彼此之間的不同。

規範十四:確保簡單清楚的網頁內容
Guideline 14. Ensure that documents are clear and simple.

應該採用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞

說明:網路上的使用者年齡層非常的廣泛,如果使用太過艱深的文字或是複雜的版面設計,可能會造成使用者閱讀上的困擾,所以應該使用一致性的網頁版面、可明瞭辨識的圖表、和容易瞭解的語言和用詞。

二、檢測碼介紹
檢測碼格式說明如下,以「1.1: H101000 圖片需要加上替代文字說明」為例:

1.1為檢測碼編號 (H字母前兩碼數字,1.1, 1.2, 1.3…)
H為網頁語言 (H:HTML/ X:XML)
1為優先等級 (H字母後第一位數碼,1/2/3)
01為十四條規範 (H字母後第二、三位數碼,01~14)
0為檢測狀態 (H字母後第四位數碼, 0/1/2)
00為同一規範的流水號 (H字母後第五、六位數碼,00/01/02~)
三個優先等級
【第一優先等級】
網頁內容開發者在開發網頁時必須遵循這個等級的檢測碼。否則,某些使用者或團體將會發現不能使用網頁上的資訊。滿足此等級檢測碼對一些使用網頁文件的團體來說,是一種基本的需求。

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

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

檢測狀態
表示檢測碼目前是由機器/人工辨識與機器/人工檢測的規則狀態。可分以下三種:

機器辨識/機器檢測(可由機器檢測)
機器辨識/人工檢測(需做人工檢測)
人工辨識/人工檢測(需做人工檢測)
機器檢測:由機器辨識出檢測項目在網頁原始碼的明確位置,並且可以由機器檢測是否符合可及性設計。

人工檢測:由機器辨識或是人工辨識檢測項目在網頁原始碼的位置,但是必須靠人工檢測是否符合可及性設計。

參考文件 :
十四條規範
九十條檢測碼
優先等級
機械/人工檢測說明
技術文件
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|