無障礙設計說明
本網站為無障礙網站,致力符合無障礙標準,提供導盲磚與快速鍵 (Accesskey) 的設計,幫助障礙人士使用。
導盲磚
本網站網頁版面原則上分割為五大區塊,分別是上方區塊 (頁首)、下方區塊 (頁尾)、左邊區塊、右邊區塊與內容區塊。每個區塊前面都放置一個以三個冒號連續排列而成的導盲磚,在排版的視覺效果上亦做了修飾使與版面融合一體。這樣的設計使網站應用於小尺寸螢幕及聲音瀏覽器時可以立即移動焦點到版面上指定的區塊前端。
快速鍵
本網站設計兩種快速鍵幫助障礙人士快速瀏覽本網站內容。版面跳躍鍵讓您直接跳躍到網頁版面上特定區塊,快速連結鍵讓您直接跳躍到常用的網頁或完成特定功能。
跳過大區塊內容
每個網頁及內容部分都有為數不少的導覽列、清單、表單或表格式的內容,我們在多數地方內容起始處放置跳過整段內容的連結及停駐點,方便快速瀏覽網頁的標題。當使用者發現想要知道的資訊時再停下來瀏覽內容細節,減少浪費時間。
去除所有排版表格
去除排版表格是無障礙化最困難的地方。如果不使用表格或具表格控制屬性的 div 標籤,在兼顧瀏覽器相容性與版面自動伸縮要求的情況下,網頁無障礙化成本非常高。整個臺灣會找不到一個高度無障礙網站的原因這是主要原因。這個網站已經徹底去除排版表格,機器再也不會唸出不該出現的表格。
瀏覽器相容性超高
每個瀏覽器對標記語言及串接樣式表的解釋與表現有很大的差異,我們實測五個瀏覽器作為無障礙化的基本要求,網頁必須在這幾個瀏覽器上有幾乎一致的視覺表現。這些瀏覽器包括 Opera、Firefox、Mozilla、Netscape 6+ 及 IE 5+。視覺表現除了要求螢幕上表現一致,也要求印表要近乎完美,這一點我們確實做到了。
照顧每個地方的版面自動伸縮問題
版面自動伸縮是設計網頁時的大問題。背景連續不可中斷,圖片必須在限制內自動伸縮避免超出版面,適當切割版面圖片使能在必要時自動重疊,萬一文字過長、項目太少或太多時保持版面完整與銜接順暢,增減項目時自動調整版面保持美觀以減少視覺障礙。
兼顧視覺與非視覺的表單設計
適當的表單預設值引導使用者輸入正確符合要求的數值,但假使傳送表單前沒有自動清除尚未輸入的輸入格,伺服器端程式可能收到錯誤的資料。如果沒有修改伺服器端程式,會得到錯誤的結果。本站在傳送表單前會自動清除預設導引數值,避免伺服器端收到預設值,同時避免修改伺服器端程式減低維護伺服端程式的障礙。適當的 label 標籤自動結合表單輸入項,正確引導使用者輸入資料。
照顧印表與維護的版面
以 div 標籤處理無障礙衍生出很多技術性問題,我們完美處理每一個網頁印表與維護內容時版面紊亂的問題,讓使用者與維護者取得該有的資訊,看到該有的完整版面,去除不該出現的混亂版面。印表有兩種選擇,去除版面後列印,這是預設的情形,多數使用者需要的,可以省下30%的紙張數量。另一種是完整版面的印表,頁首、頁尾、左右區塊通通都要出來,只有極少數人想要這個方式。我們去除了印表障礙。
適合的目標媒體是螢幕、印表與聲音
本站將媒體無障礙處理重點放在螢幕 (screen) 、印表 (print) 與聲音 (aural) 等項,其餘媒體尚未考量。螢幕必須有800像素寬的橫向解析度,才不會因 HTML 自動調整版面位置,使應該出現在右邊的內容全部跑到左邊區塊的下方。雖然有此限制,但自動調整的版面適合未來應用在手持式裝置等其他媒體,也符合 W3C 制定的 HTML/CSS/WCAG 的要求,其他網站使用 table 標籤就沒這樣的好處。印表至少要 A4 紙張,理由與螢幕相同。整個網站每個地方都考量聲音瀏覽方式的需求,網頁編碼挾帶大量一般情況眼睛看不到的資訊,這些幾乎都是用來協助聲音瀏覽者閱讀或操作。
主要內容區結束










