網路為資訊流通創造了無遠弗屆的可能,而人為因素卻可能設下進入的屏障與阻礙喔!例如:網頁上亦常見「本網站最佳瀏覽解析度為800*600,建議使用IE4.0以上版本瀏覽器」之標註,設定網頁最低限度的瀏覽解析度,以及某種版本以上的瀏覽器,將使一些電腦硬體較為低階、網路連線速率較慢,或舊版本、純文字瀏覽器的使用者,不得其門而入。讓我們再深入地想一想,身心障礙者受限於視力、聽力、活動力或認知能力,上網恐怕要比一般人多了更多的不便與困難。因此,為了讓所有人不因其所處環境之軟體環境、硬體設備及本身能力之虧損都能夠成功進入網站並獲取完整資訊,享受網路帶來便利的新生活。
無障礙網路空間正是以方便行善概念為設計基礎,降低網路應用的困難與挫折,增加生活資訊流通與應用的機會!使全民都能享有便利的網路來活化生活,讓每個人擁有全方位的生活環境,從「無障礙空間」到「無障礙網路空間」,共同打造一個全民溝通更便利的無障礙環境,促使生活品質提昇。
除了以上讓您瞭解無障礙網站以及無障礙網站標章之外,以下說明更多建立無障礙網站的資訊,網站內容包含了建置的14條規範、九十條相關的檢測要點,讓您更深入的瞭解「無障礙網站」喔!
1.1:H101000圖片需要加上替代文字說明
說明:在瀏覽器無法顯示影像時,可以利用ALT屬性所指定的說明文字來代替影像。例如協助視覺障礙者增進網頁文字及影像視覺可讀性(visual readability)之螢幕閱讀器(screen reader);螢幕閱讀器可以自動將ALT屬性所指定的說明文字解譯至語音合成器(speech synthesis)作語音輸出,或解釋至點字顯示器(brsille display)顯示點字。
1.2:H101001對於applet提供替代文字說明
說明:一些視障者所用只能讀取網頁文字的瀏覽器並不支援Java或無法載入Applet程式,因此網頁中Applet程式所欲呈現的資訊應該提供替代文字說明,而這些文字的說明可用APPLET標籤中的alt屬性呈現或是將文字置於<APPLET></APPLET>的標籤中間,以利只支援此兩項機制其中一項的瀏覽器辨別使用。
1.3:H101002對於object提供替代文字說明
說明:由於各種瀏覽器並不是完全支援網頁中OBJECT屬性中所有可以放置的影像、文件、Applet、Active X及Video等多種物件格式資訊。因此在OBJECT標籤中間必須寫入文字說明,用來替代瀏覽器無法辨識之物件格式。
1.4:H101003對於表單中的圖形按鍵提供替代文字說明
說明:對於表單中的圖形按鍵,需要利用alt屬性做文字說明以替代該圖形按鍵,供視障者所使用的文字型態瀏覽器辨識。
1.5:H101004影像地圖區域需要加上替代文字說明
說明:由於一些視障者所使用的純文字瀏覽器無法直接取得影像地圖之超連結資訊,因此,影像地圖中所設定的各超連結區域,必須藉由AREA標籤中alt屬性來提供替代文字說明,以便於這類的特殊瀏覽器取得各超連結資訊。
1.6:H101105當影像地圖使用為上傳按鈕時,每一作用區域必須分別使用不同的按鈕
說明:當表單中的功能按鍵(例如上傳按鈕)作為影像地圖的設計時,需要對於此影像地圖中的各圖像按鈕做分別各自按鍵的設計。若個別按鈕仍採用圖片設計,則必須以alt屬性提供文字說明。這樣的設計對於將瀏覽器的圖像顯示功能關閉的使用者,或是使用純文字瀏覽器的使用者來說,才可以同樣地使用表單中的功能按鍵。
1.7:H101106當alt屬性的文字陳述大於150個英文字元時,考慮另外提供文字敘述
說明:由於alt屬性所陳述的文字,是用以搭配網頁物件,例如:圖片、動畫、Applet或聲音在瀏覽器所無法呈現的時,作為輔助說明。因此陳述應以簡潔清晰為主,說明內容若需詳細時,則應考慮另設網頁或單獨陳述的方式表達。
1.8:H101007提供longdesc以外的描述性超連結(如D超連結),來描述longdesc的內容
說明:由於有些文字型態的瀏覽器無法辨別longdesc屬性,因此為了達到長篇替代文字說明的目的,網頁再使用longdesc屬性作替代連結時,必須在提供另一個獨立替代文字說明的超連結,作為替代文字說明判讀的選擇。
1.9:H101108圖形替代文字陳述不夠清晰時,提供更多的文字描述(如使用longdesc屬性)
說明:利用圖形代替文字ALT屬性描述說明時,如果無法以簡潔清晰的文字作訊息的傳遞;則必須另外提供ALT以外的屬性或超連結作更清楚的說明。
1.10:H101109所有語音檔案必須有文字旁白
說明:對於聽覺障礙者而言,無法直接了解語音資訊。有關聽覺資訊的呈現,必須附加文字副本或字幕以幫助聽覺障礙者閱讀資訊。
1.11:H101210以可及性的影像來替代ASCII文字藝術
說明:儘量避免使用ASCII符號設計圖例,應以一般圖像來呈現圖例資訊,因為可以使用IMG標籤中alt屬性提供文字敘述說明。若是一定要使用ASCII符號時,也必須提供該示範圖例的描述說明,以利文字型態瀏覽器讀取其示範圖例的資訊。
1.12:H101111視訊中的聲音必須提供同步文字型態的旁白
說明:對於聽覺障礙者而言,較難直接了解視訊中語音資訊。有關視訊語音資訊的呈現,必須提供同步的字幕以幫助聽覺障礙者閱讀資訊。一些技術,例如:SMIL及SAMI,允許語音/視訊檔案與文字檔案同步結合呈現。或者利用語音替代文字版本網頁的超連結,提供聽覺障礙者語音資訊的描述理解。
1.13:H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結
說明:由於視覺障礙者所使用的一些網頁內容閱讀器,是以辦識文字型態內容為主,例如:螢幕閱讀機(screen readers)、非視覺性瀏覽器(non-visual browsers)及點字閱讀機。當網頁內容開發者必須使用伺服器端影像地圖時,也必須提供伺服器端影像地圖中之超連結可及於(accessible)所有的使用者。
1.14:H101213多媒體視覺影像呈現時,必須提供聽覺說明
說明:於視覺障礙者而言,由於目前所使用的瀏覽器,尚無法自動判讀多媒體視覺影像中所呈現的文字;或者一些重要訊息。因此在呈現多媒體視覺影像時,必須在不影響語音對話的情形下,提供一些影像重點的語音描述。這些影像重點的語音描述包括一些動作、環境的設定、肢體語言、圖片以及顯示的文字,以方便視覺障礙者能跟得上瞭解多媒體視覺影像中的訊息傳遞。
1.15:H101214多媒體呈現時,必須同步產生相對應替代的語音或文字說明
說明:由於多媒體呈現時,必須同時可以提供給聽覺障礙者及視覺障礙者閱讀。因此適於聽覺障礙者閱讀多媒體的同步字幕(包含多媒體呈現時,一些重要的環境相關聲音)版本及適於視覺障礙者閱讀多媒體的同步語音描述版本,皆必須同時提供。一些技術,例如:Quick Time, SMIL 及 SAMI,皆允許語音/視訊檔案與文字檔案同步結合呈現,提供視/聽覺障礙者視訊中資訊的描述理解。多媒體視覺影像呈現時,必須提供相對應替代的語音或文字說明。當多媒體撥放時,必須提供同步的語音旁白及同步的文字字幕。視障者可以藉由同步語音旁白了解多媒體檔案的內容;而聽障者則是可以藉由同步的文字字幕了解多媒體檔案的內容。
1.16:H301015客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結
說明:由於影像地圖的作用,主要是針對增加視覺效果所做的設計。因此網頁開發者,在作網頁影像地圖設計時,應對客戶端影像地圖中的超連結,提供視覺障礙者額外對應的可及性超連結,以利視覺障礙者所使用的特殊瀏覽器選取其資訊內容。
2.1:H102100確保所有藉由顏色所傳達出來的訊息,在沒有顏色後仍然能夠傳達出來
說明:對於視障者而言,難以辨別網頁資訊單獨以顏色作為傳達的方式。例如:色盲者無法分辨某兩種顏色(紅綠或黃藍)、弱視者在前後景顏色對比不夠明顯,而無法辨識網頁的資訊;另外使用單色銀幕也無法顯示以顏色差別所呈現的網頁資訊。
2.2:H202101確保前景顏色與背景顏色彼此呈現明顯的對比
說明:當提供影像圖形給視覺障礙者(弱視或色盲者)觀看時,必須將影像圖形的前後景顏色組合行成足夠的對比,以利其觀賞。也便於其他一些身心障礙者使用黑白螢幕觀看。
3.1:H203200以實際存在的標記語言(如MathML)呈現網頁內容(如數學方程式)避免使用圖形影像呈現
說明:網頁中的影像內容,對於一些使用非圖像式瀏覽器(non graphical browser)的視覺障礙者所而言, 幾乎可以說是沒有意義的。因此對於一些需要格式化的資訊傳達,例如數學運算式,儘量以現有的標記語言(例如: MathML)的方式替代影像呈現。
3.2:H203201確定網頁設計文件,有效使用正規的HTML語法
說明:應該以W3C所公布的正規的HTML語言撰寫網頁,並在DOCTYPE標籤中,使用標準規範的敘述以識別HTML版本類型。為了確定所用網頁語言符合W3C各版語言的規定,可以使用W3C HTML確認機制(http://validator.w3.org/)或是W3C CSS確認機制(http://jigsaw.w3.org/css-validator/)來檢測和修正。
3.3:H203002在doctype標籤中,使用標準規範的敘述以識別HTML版本類型
說明:由於W3C再設計HTML標準時,已考量到網頁可及性設計的問題,並且對許多針對身心障礙者所設計的瀏覽器,也都以W3C所制定的HTML標準為依規作設計。因此,網頁之起始標題必須著明網頁內容所使用的HTML版本,以供瀏覽器作識別解讀。網頁語言的宣告方式,可以在W3C的網站上,查詢到各版語言的最新標準寫法。
3.4:H203203盡可能使用樣式表單控制網頁排版與內容的呈現
說明:由於文字型態的資訊較容易為大多數身心障礙者所使用不同技術(例如:語音合成器及點字顯示器等)的輔助瀏覽器閱讀使用,因此以樣式表單控制網頁內容文字的呈現,使得使用者較易省略跳過網頁內容設計者對文字格式的設定。
3.5:H203004要使用相對尺寸(如%)而非絕對尺寸(如像素)
說明: 由於身心障礙者會因個別的使用需求,而調整瀏覽網頁內容視窗的大小。為求視窗大小改變後,維持網頁內容的可讀性,應此需使用相對尺寸,以利視窗內的網頁內容可以隨視窗大小自動作彈性的變化。
3.6:H203005適當使用巢狀標題呈現文件結構
說明:由於有些身心障礙者習慣以瀏覽文件章節標題的方式,進行網頁內容的閱讀。因此以HTML中Header元件來呈現長篇網頁文件章節的層次結構(以H1至H6由上而下的方式註記文章章節標題),以利瀏覽器辨別輔助閱讀。
3.7:H203106避免使用header標籤來產生粗體字效果
說明:為了方便視覺障礙者辨別長文件的章節架構,以H1至H6由上而下的方式註記文章之章節標題,以利用他們所使用的瀏覽器輔助閱讀。
3.8:H203107項目符號及編號之標籤(如li、ul)僅可使用於實際網頁內容的項目條列,不可用於編輯格式
說明:網頁條列項目標籤(例如DL, DT, DD, UL, LI)應被正確地用來編輯條列資訊,避免用作編排的效果,譬如為了縮排而使用此類標籤。另外,對於項目符號及項目編號之標籤也應做適當的區分設計,清楚地表現資料的層級,以避免在線性瀏覽器上所讀出的結果混淆使用者。
3.9:H203108確保q和blockquote標籤只是用來當引用語而不是用來縮排
說明:針對不同的語系,由於許多瀏覽器會對引號標籤所引用的網頁內容,作不同的文件段落標示區隔。因此勿以Q和BLOCKQUOTE標籤作為網頁內容文件的格式化用途(例如段落起始的內縮),須以文件引用方式描述,以供身心障礙者所使用的瀏覽器辨別使用。
3.10:H203209以q及blockquote標籤來標記引用語
說明:在網頁文件中,應正確的使用Q標籤作為引用短文的標示,或以BLOCKQUOTE標籤表達一整段引用文字,以便使得該引用文與網頁前後文作適當的結構區隔。
4.1:H104200明確地指出網頁內容中語言的轉換
說明:由於視覺障礙者可以用點字機閱讀機或語音合成器來閱讀網頁資訊。因此,網頁開發者必須以不同語言呈現網頁資訊時,可以使用LANG屬性來設計說明不同的國家語言,以利上述的網頁閱讀器利用此屬性替視覺障礙者做不同國家語言的字元輸出等資訊的轉譯。
4.2:H304201用abbr及acronym標籤表示網頁中呈現的文字縮寫與簡稱
說明:由於視覺障礙者常以文字型態為主要資訊擷取的方式,因此網頁中以縮寫或簡稱來傳遞專業或生活的資訊,應有完整相對的文字資訊,以利視覺障礙者所使用的特殊瀏覽器輔助辨別其資訊內容。
4.3:H304002明確指出網頁文字所使用的自然語言
說明:由於各種瀏覽器並不是完全支援網頁中OBJECT屬性中所有可以放置的影像、文件、Applet、Active X及Video等多種物件格式資訊。因此在OBJECT標籤中間必須寫入文字說明,用來替代瀏覽器無法辨識之物件格式。
5.1:H105100對於每一個存放資料的表格(不是用來排版),標示出行和列的標題
說明:為了讓視覺障礙者可清晰的理解表格中的資訊,網頁開發者可以使用TH標籤來設定表格中資訊的從屬關係,以利語音合成器正確讀出表格中的內容。
5.2:H105101表格中超過二行/列以上的標題,須以結構化的標記確認彼此間的結構與關係
說明:當表格儲存格中的資訊必須結合欄位行/列的標題作整體閱讀時,網頁開發者就必須針對儲存格所屬之表格中的行/列標題,提供內容從屬性的相關標示,以利語音合成器判讀表格中的資訊。
5.3:H205102在網頁內容呈現設計時,避免以表格做多欄文字的設計
說明:網頁開發者應避免使用表格來作為網頁排版的工具,最好使用CSS樣式表來作為網頁的排版工具。如果使用表格來作為排版的工具,可能會造成身心障礙者所使用的特殊瀏覽器無法正確的辨別出網頁中的資訊,表格應該只用於資料的編排而非用網頁版面的設計。
5.4:H205103若表格只做為版面配置時,勿使用表格之結構標記(如th標籤)作為網頁格式視覺效果
說明:表格中一些結構的標籤可以產生視覺上的效果。例如:TH標籤,可以讓儲存格中文字的對齊和字型產生變化。但是對於視覺障礙者所使用的瀏覽器而言,TH標籤是一種結構標籤,可以輔助視覺障礙者解讀表格中的資訊。為避免視覺障礙者混淆表格中的資訊,勿以表格中的結構標籤作為呈現網頁文字格式的視覺效果。
5.5:H305004表格須提供表格摘要說明(如summary屬性)
說明:網頁內容設計者若必須使用表格來呈現資訊時,必須對此表格提供摘要結結構說明,以利視障者透過點字機或是語音合成器來辨別表格資訊。
5.6:H205105資料表格須提供標題說明
說明:網頁內容設計者若必須使用表格來呈現資訊時,必須對此表格提供簡要的標題說明,以利視障者透過點字機或是語音合成器來辨別表格的用途資訊。
5.7:H305106表格行列過長的標題,須提供縮寫或簡稱
說明:視障者所使用的語音合成器會重覆讀取表格中美一行列的標題,以輔助視障者閱讀表格中所存在的網頁資訊。所以網頁中表格行列的標題必須要簡潔精確,以利語音合成器辨別表格資訊。
6.1:H106100使用 CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀
說明:由於部分的瀏覽器不支援CSS樣式表所呈現網頁格式,因此在使用CSS樣式表時需考慮瀏覽器不支援CSS樣式表時網頁的編排與內容仍可以清晰閱讀。
6.2:H106001頁框連結必須是HTML檔案
說明:網頁的頁框不應該直接連結到某個圖像或是物件,而是應該連結到一個HTML檔案,在此HTML檔案中再包含該圖像或是物件,並且提供替代文字。
6.3:H106102使用Script語言需指定不支援Script時的辦法
說明:由於部分瀏覽器不支援Script程式語言,所以網頁開發者在使用Script提供網頁資訊的同時,也必須考慮提供不支援Script程式語言的替代方案,讓使用者在SCRIPT無法正常顯示時,仍可以獲得SCRIPT所顯示的資訊。
6.4:H106103若網頁內的程式物件沒有作用時,確保網頁內容仍然可以傳達
說明:對於程式所設計物件,例如Applet,並不是每一個瀏覽器都可以辨識。而程式所欲呈現的資訊,可以利用文字說明的方式直接在標籤中說明或者另外產生一替代性文字網頁做轉換,以利各瀏覽器辨別閱讀使用。
6.5:H206104若網頁物件使用事件驅動時,確定勿僅使用滑鼠操作
說明:如果網頁上有Script或是Applet等程式物件時,我們必須確保這些物件除了滑鼠之外,還有其他的驅動方式,因為身心障礙者可能使用滑鼠之外的輸入設備。如果Script或是Applet等程式物件只能依靠滑鼠來驅動,那身心障礙者將無法驅動這些物件。
6.6:H206005使用頁框時要指定不支援頁框時的辦法
說明: 身心障礙者所使用的特殊瀏覽器並非都支援FRAME標籤,因此網頁開發者若是要以Frame的格式來呈現網頁資訊時,必須設定網頁瀏覽器不支援FRAME標籤時的替代方案。
7.1:H107200確保網頁設計不會致使螢幕快速閃爍
說明:有些時候網頁設計者會使用到一些網頁的物件來增加網頁中的動態的效果,例如使用applets、 plug-ins、scripts,或是在網頁中加入動態圖片或是影片,這些網頁物件的使用都有可能會造成電腦螢幕快速閃爍。
7.2:H207001避免使用blink標籤閃爍螢幕
說明:將網頁內容以閃爍螢幕上文字的方式呈現,雖然可以達到視覺上的效果,但是對於身心障礙者卻是無法察覺或是無法點選該資訊。所以網頁開發者應避免使用blink標籤閃爍螢幕。
7.3:H207002避免使用marquee標籤移動文字
說明:將網頁內容以跑馬燈移動文字的方式呈現,雖然可以達到視覺上的效果,但是對於身心障礙者卻是無法察覺或是無法點選該資訊。所以網頁開發者應避免使用marquee標籤移動文字。
7.4:H207103避免使用動態gif圖片
說明:動態的gif圖片所呈現的資訊內容,若是顯現的速度過快容易讓視覺障礙者忽略難以察覺;且會讓視覺障礙者分心而無法閱讀其他的網頁內容。因此網頁開發者如果無法提供讓動態gif圖片靜止的功能,則應避免使用動態的gif圖片呈現資訊內容。
7.5:H207004不要讓網頁每隔一段時間自動更新
說明:由於視障者難以察覺網頁資訊的變化,因此不要讓網頁自動轉移至新的網址,以避免視覺障礙者迷失在網頁瀏覽中。
7.6:H207005不要自動轉移網頁的網址
說明:由於視障者難以察覺網頁資訊的變化,因此不要讓網頁自動轉移至新的網址,以避免視覺障礙者迷失在網頁瀏覽中。
8.1:H108100對由Scripts、Applets及Objects所產生之資訊,提供可及性替代方式
說明:由於身心障礙者所使用的某些特殊瀏覽器無法完全支援程式設計元件所產生的網頁內容資訊,例如:script、applets及object。為了達到網頁資訊的可及性目的,對於這些程式設計元件所產生的網頁內容資訊,網頁開發者應該提供相對的存取方式。
9.1:H109100盡量使用客戶端影像地圖替代伺服器端影像地圖連結
說明:對於視覺障礙者而言,由於伺服器端影像地圖需要使用者操作滑鼠的座標傳至伺服器端作影像地圖區域的計算,這樣會照成視覺障礙者瀏覽網頁上的限制。因此網頁開發者必須以用戶端影像地圖代替,並提供影像地圖中相對的文字型態的超連結,以供語音合成器辨別。
9.2:H209201對所有網頁內容元素,確保有滑鼠以外的操作介面
說明:網頁內容的設計者利用Script或Applet作為網頁瀏覽介面時候,必須考慮到身心障礙者所使用的輸入設備會因人而有所不同,這些數入設備包含鍵盤、點字機、頭仗(head wands)以及麥克風等,所以網業務鍵使用事件驅動時,需確保還有滑鼠以外的操作介面。
9.3:H209002確保事件的啟發不要求一定得使用滑鼠
說明:網頁設計者利用Script作為網頁瀏覽事件驅動時,必須考慮到身心障礙者所使用的特殊輸入裝置彙有所不同,可能有鍵盤、點字機、頭仗以及麥克風,所以網頁中使用事件驅動時,勿設計只能由滑鼠來驅動的事件,可以使用多重的事件驅動機制。
網頁設計者利用Script作為網頁瀏覽事件驅動時,須注意下列三點:
(一)使用應用層級(application-level)的事件驅動裝置(triggers)而避免使用互動 層級(interaction-level)的事件驅動裝置。在HTML4.0中,應用層級的屬性有"onfocus"、 "onblur"以及 "onselect"。相對而言,有許多屬性是屬於依賴單一的驅動裝置,例如:"onmousedown"事件只能使用滑鼠來驅動,無法用其他的方法來啟動此事件。
(二)如果我們無法避免使用滑鼠驅動事件,我們就必須提供多重的驅動事件的方法,在使用滑鼠來驅動事件時,另外提供鍵盤驅動鍵的設定來配合。
當使用… |
應配合… |
onmousedown |
onkeydown |
onmouseup |
onkeyup |
onclick |
onkeypress |
onmouseover |
onfocus |
onmouseout |
onblur |
(三)避免設計只能由滑鼠來驅動的事件。
9.4:H309103具體指出按下Tab鍵在表單控制項,超連結及物件間移動的順序
說明:肢體殘障者常因肢體移動的限制,電腦的輸入必須以鍵盤操作取代滑鼠的操作。當使用tabindex屬性設定Tab鍵在表單控制項、超連結及網頁元件中的移動順序,有利於肢體殘障者使用Tab鍵在網頁中瀏覽資訊。
9.5:H309204對經常使用的超連結,增加快速鍵的操作
說明:肢體殘障者常因肢體移動的限制,電腦的輸入必須以鍵盤操作取代滑鼠的操作。網頁設計者在設計網頁內容時對於經常使用的超連結,必須增加便捷鍵的操作方式,以利肢體障礙者使用便捷鍵來瀏覽網頁資訊。
9.6:H309105對於表單元件考慮提供鍵盤快速鍵的操作
說明:肢體殘障者常因肢體移動的限制,電腦的輸入必須以鍵盤操作取代滑鼠的操作。因此網頁中的表單元件必須提供鍵盤便捷鍵的操作,以利肢體障礙者可以迅速的使用快速鍵操作網頁中的表單元件。
10.1:H210100除非使用者知道將會開啟一個新視窗,不要隨便開啟一個新視窗
說明:由於視覺障礙者難易察覺網頁資訊的變化,因此不要讓網頁自動的開啟新視窗。若網頁中有需要開啟新視窗,則須讓使用者自行操作,以避免使用者迷失在網頁瀏覽中。
10.2:H210101如果使用Script語言開啟新視窗或改變目前視窗的網址,要讓使用者能事先知道
說明:由於視覺障礙者或認知障礙者難以察覺理解網頁資訊的變化,因此不要讓網頁輕易自動產生新的視窗。若有更新的網頁資訊,應由使用者自行操作,以避免視覺障礙者或認知障礙者迷失在網頁瀏覽中。
10.3:H210102確保表單的控制項與控制項說明之間的配合很適當
說明:由於表單可以讓使用者傳達與網頁伺服器溝通的資訊,因此必須確保表單的控制項與控制項說明之間的配合很適當,亦即必須明確顯示表單的控制項與控制項說明之間的關聯性。以便身心障礙者無論是選取表單的控制項或者是控制項說明,皆可以有反應並傳送資訊至伺服器端。
表單的控制項與控制項說明之間的配合有三點原則可以遵守:
(一)核選方塊及選單按鈕的說明標籤文字設定在核選方塊及選單按鈕之前。
(二)文字區塊的說明標籤文字須出現的文字區塊之前。
(三)群組表單控制項的說明標籤文字須出現在群組表單控制項之前。
10.4:H310103若有以表格直欄格式呈現的網頁文字內容時,提供線性文字替代
說明:表格對於一般視覺障礙者所使用的瀏覽器而言,會以由左而右;由上而下的方式進行解讀。因此網頁中如有以表格直欄格式呈現網頁文字內容時,則必須提供線性替代文字。以利視覺障礙者使用特殊的瀏覽器閱讀表格儲存格中的資訊。
10.5:H310004在網頁文字輸入區中須有預設值
說明:對於網頁中的多行文字輸入方塊,為了方便身心障礙者使用特殊的瀏覽器可以辨別其功能,必須在文字輸入區中有預設值。
10.6:H310005勿單以空白間隔分開相連之超連結
說明:為便利使用語音合成器來閱讀網頁資訊的身心障礙者,可以清楚的辨別緊鄰在一起的超連結,勿單以空白間隔分開相鄰的超連結,必須以清楚的機制來輔助語音合成器告知使用者有緊鄰在一起的超連結。
11.1:H111200如果你不能使這個網頁無障礙化,提供另一個相等的無障礙網頁
說明:當網頁內容在運用W3C所提供的可及性技術之後,還是無法達到網頁內容可及性的目的,則網頁內容設計者必須提供與原網頁具備相同資訊或功能的可及性替代網頁。例如:
(一)在網頁原始版本上方提供具備相同資訊內容的純文字版本的網頁朝連結,提供身心障礙者作為可及性網頁內容的選擇。
(二)使用META資訊來指出不同版本的替代文件,以供身心障礙者依據不同型態或喜好的瀏覽器自動載入閱讀使用。
11.2:H211201儘量使用開放性的最新國際標準規範
說明:由於開放性的國際標準規範,可以提供各個特別用途瀏覽器設記者有一個共同的設計依循。所以網頁開發者為了能夠使不同需求的身心障礙者瀏覽網頁資訊,應盡量使用開放性的最新國際標準規範。
11.3:H211202避免使用過時的HTML語法
說明:由於W3C隨時在更新開放性的國際標準規範,針對一些不合時宜且會影響網頁可及性的標籤元素或是屬性,皆會在新版的國際標準規範中屏除,所以因避免使用過時的HTML語法。
11.4:H311203允許使用者依照個人喜好設定網頁呈現方式與內容
說明:由於身心障礙者所使用特殊網頁瀏覽器的差異性很大,為了符合身心障礙者個別的需求,應允許使用者依照個人喜好設定網頁的呈現方式與內容。
12.1:H112000需要定義每個頁框的名稱
說明:為了方便身心障礙者使用特殊的瀏覽器閱讀網頁頁框中的資訊,網頁開發者需要為每一個頁框加上標題。
12.2:H212101如果頁框名稱無法描述頁框中的內容的話,應加上額外敘述
說明:網頁內容的設計者利用Script或Applet作為網頁瀏覽介面時候,必須考慮到身心障礙者所使用的輸入設備會因人而有所不同,這些數入設備包含鍵盤、點字機、頭仗(head wands)以及麥克風等,所以網業務鍵使用事件驅動時,需確保還有滑鼠以外的操作介面。
12.3:H212102把太長的選單項目群組起來
說明:視覺障礙者是藉由語音瀏覽器瀏覽網頁資訊,網頁開發者必須將過長的選單項目,以自然且適當的方式群組起來,以幫助視覺障礙者了解選單項目所欲顯示的內容。
12.4:H212103在表單控制項中,使用fieldset及legend標籤作群組間的區隔
說明:視覺障礙者是藉由語音瀏覽器瀏覽網頁資訊,網頁開發者必須將表單控制項中有意義相關的控制項,以自然且恰當的方式群組起來,以利視覺障礙者利用語音瀏覽器,擷取及了解表單控制項中所欲顯示的內容。
12.5:H212204儘可能將網頁內容有相關之元素聚集在一起
說明:為避免身心障礙者再使用特殊的瀏覽器瀏覽網頁資訊時,產生閱讀上的混淆。網頁開發者應儘可能地將網頁內容有相關的元素聚集在一起,增加使用者閱讀效率。
12.6:H212005在表單控制項上,以label標籤提示資訊
說明:由於表單可以讓使用者傳達與網頁伺服器溝通的資訊,因此必須在表單控制項上,以LABEL標籤標示提示資訊,亦即必須明確顯示表單的控制項與控事項說明之間的關聯性。以便身心障礙者了解表單控制項與控制項說明。
13.1:H213200 設計並確保有意義的超連結說明,便於網頁內容的閱讀
說明:視覺障礙者是藉由語音瀏覽器瀏覽網頁資訊,網頁開發者必須設計並確 保有意義的超連結說明。以清晰且明確的字辭陳述朝連結,以便於語音瀏覽器讀出朝連結內容,擷取超聯結所欲顯示的資訊內容。
13.2:H213101如果需要的話,為每個超連結加上內容描述
說明:視覺障礙者無法以視覺快速掃描方式,找尋網頁內容中的超連結。為了能讓視覺障礙者清楚地了解超連結所連結的資訊,最好能在每個超連結加上內容描述,以提供視覺障礙者循序讀取超連結之上下文資訊。
13.3:H213202指向不同網址的超連結,不可使用相同的超連結說明
說明:視覺障礙者是藉由語音瀏覽器聽取網頁資訊,網頁開發者針對指向不同網址的超連結,不可使用相同的超連結說明,以避免視覺障礙者所使用的語音瀏覽器讀出混淆的超連結內容。
13.4:H213203使用metadata標籤來記載電腦可以了解運用的網頁資訊
說明:由於一些特殊的瀏覽器可以使用matedata所記載的網頁相關資料,提供身心障礙者一些網頁的重要的資訊。所以,網頁開發者可以提供相關的網頁資訊於matedata之中,讓使用者取得更多相關的網頁資訊。
13.5:H213004為你的網頁加上標題
說明:對於學習或是閱讀障礙者而言,在瀏覽網頁內容時較難形成已經瀏覽到或瀏覽過哪裡的心像地圖(mental map)。因此,為你的網頁加上標題,以提供網頁搜尋時輔助他們瀏覽閱讀網頁內容。
13.6:H213205為你的網站提供網站地圖或整體性的簡介
說明:為增加網站使用度及可及性,網站中應提供網站地圖及網站的整體性簡介。但在做以上設計時,須注意無障礙網頁設計原則,以使身心障礙者與一般使用者可以獲的相同資訊。
13.7:H213206網頁設計使用清楚且一致的導覽機制
說明:對於學習或閱讀障礙者而言,在瀏覽網頁內容時較難形成已經瀏覽到或瀏覽過哪裡的心像地圖(mental map)。因此,為你的網頁設計使用前後一致的導覽機制,以引導他們比較容易找到他們所想瀏覽閱讀的網頁內容。
13.8:H313207提供網頁導覽連結工具列,以利存取網站導覽結構
說明:為使各類障礙者以及一般使用者都能簡易清楚地瀏覽搜尋網站資訊,網頁開發者必須提供網頁導覽連結工具列,以利其讀取網站導覽結構資訊。
13.9:H313208能辨別出意義上有群組相關的超連結
說明:為便利使用語音合成器來閱讀網頁資訊的身心障礙者,能清楚辨別出意義上有群組相關的超連結,必須以清楚的機制輔助語音合成器來閱讀告知使用者有相關群組的超連結存在,以利其瀏覽閱讀他們所欲連結傳達的網頁資訊。
13.10:H313209若有群組超連結,在群組之前增設一項繞過此區域的超連結
說明:為增加身心障礙者在使用一些特殊瀏覽器,瀏覽網頁資訊時增加閱讀效率,所以網頁開發者必須針對群組超連結,在群組超連結前設定一個繞過此區域的超連結,讓使用者不必一再閱讀相同的群組超連結,而可以跳過該區域直接進入下面網頁資訊的瀏覽。
13.11:H313210若網站具有搜尋功能,可以設計不同的網頁內容搜尋方式,以提供不同技能與喜好
說明:為使學習障礙者及閱讀障礙者能簡易地搜尋網站資訊,對於不同拼字技巧的使用者,網頁開發者可以設計不同的網頁內容搜尋方式;以提供不同技能與喜好者搜尋選用。例如搜尋關鍵字拼字檢查、最佳關鍵字猜測query-by-example搜尋或者相類似搜尋等方式。
13.12:H313211在網頁標題、段落、及列表之前,提供辨別訊息以利識別
說明:在網頁標題、段落、及列表之前提供標題式的辨別訊息,可讓網頁使用者快 速瀏覽網頁,也有利於使用語音合成器的視障使用者了解網頁內容。視障者無法像一般使用者一樣可以快速的瀏覽網頁,所以當網頁開發者在網頁的各個標題、段落、及列表之前提供內容的辨別訊息,視障者就可以像一般人一樣快速的瀏覽網頁的各個部份,且藉著所提供的辨別訊息,使用者還可以決定直接讀取某一部份或是快速略過該網頁。
13.13:H313212以metadata標籤來識別網頁文件包含於整體文件內的所在位置
說明:由於身心障礙者所使用的一些文字瀏覽器,必須藉由目前所瀏覽的網頁與前 後其他的相關連的網頁關係;當做網頁瀏覽機制的的運作。因此網頁開發者,必須提供電腦可以辨別網頁之間關係的資訊於metadata之中。我們可以在網頁中的HEAD標籤中使用LINK標籤配合"rel" 或是 "rev"屬性來確定網頁與網頁之間的關係。
13.14:H313213避免在網頁上使用ACSII文字藝術
說明:盡量避免使用ASCII碼符號設計呈現示範圖例,取而代之以實際的圖像來顯示圖例資訊為佳,因為可以比較容易使用IMG標籤中的alt屬性設定圖項的替代文字說明。若是一定要使用ASCII碼符號設計示範圖例,則必須提供該示範圖示的明述說明,以利視覺障礙者使用文字型態瀏覽器閱讀示範圖例中的資訊。
14.1:H114200網頁內容要使用簡單易懂的文字
說明:網頁內容文字應力求清晰簡潔,以利於閱讀或認知障礙者容易識別閱讀。例 如:
1. 標題及超連結應力求簡潔明確因為有些使用者直接以檢視標題及超聯結作為快速閱讀網頁內容的方式。
2. 一個段落描述一項主題。
3. 使用通用語句,而不是俚語或特殊用語。例如使用(非常)而不是(超),使用(幾歲)而不是(貴庚)。
4. 避免使用複雜的句型結構。
14.2:H314201使用可及性的圖形促進網頁內容的理解
說明:對於學習或是閱讀障礙而言,無法藉由視覺效果擷取得到圖形所欲傳達的資訊。因此網頁開發者必須針對圖形資訊,提供相對應的替代文字及語音內容,以促進視覺障礙者對網頁內容的理解。
14.3:H314202 網頁彼此間設計呈現的風格要一致
說明:對於學習或閱讀障礙者而言,在瀏覽網頁內容時較難形成已經瀏覽到或瀏覽過哪裡的心像地圖(mental map)。因此,當網頁設計呈現彼此間一致的風格時,有利學習或是閱讀障礙者比較容易找到或省略他們所想或不想瀏覽閱讀的網頁內容。