親和力工具列與 WCAG 1.0 (中文)

本頁導覽: 優先順序 1 | 優先順序 2 | 優先順序 3

簡介

本工具列具有許多不同的功能, 能夠檢測網頁內容及源碼的各種不同面向. 這在手動檢測許多網站內容親和力指導原則的檢核要點時會很有用. 沒有任何工具列的功能能夠告訴您某一個網頁是否滿足某個特定的檢核要點, 但是它們卻能協助您評估這件事.

範例:

對於檢核要點 4.1 "在文件內文所使用的自然語言更換時, 予以明確地識別" 來說:

'文件資訊 > 顯示語言 (Lang) 屬性' 的功能會指認源碼中所指定的語言. 如果頁面有指定主要使用的語言, 那麼它就會在內容頂端插入 HTML 所指定的語言. 任何其他指定的語言則會以高亮度標示出起迄範圍.

檢查是否所有用了不同語言的內容, 都有識別出來.


對於 檢核要點 3.3 "使用樣式表來控制版面呈現" 來說:

'CSS > 停用 CSS' 的功能會把網頁按照沒有 CSS (不管是行內 CSS, 頁內 CSS 或來自外部檔案的 CSS) 的樣子描繪出來. 如果還是可以看到非預設的色彩, 字型體系, 字型大小等, 那麼大概就表示用了非 CSS 的呈現技巧; 如果網頁內容還是被畫成分欄格式的話, 那麼很有可能用了表格排版 (也就是非 CSS 的排版) 技巧.


對於 檢核要點 3.5 "按照規格來使用標頭 (header) 組件, 以表達文件結構" 來說:

'結構 > 標頭' 的功能會指認出源碼中所有的標頭標記 (也就是 h1 - h6 的組件), 並且會把頁面內容中的標頭部分用高亮度標示出來.
請檢查是否每一個視覺上該是標頭的部分都以標頭組件來標記, 第一層的標頭是以 'h1' 來標記, 標頭標記的巢狀結構正確, 而且標頭層級沒有被跳過 (也就是 h1 的下一層一定要是 h2, h2 的下一層一定要是 h3, 依此類推).

'結構 > 標頭結構' 的功能能夠用來檢查標頭的巢狀結構是否恰當.

優先順序 1 檢核要點

通論 (優先順序 1) 工具列功能
1.1 對於所有的非文字組件, 均提供一份具相同意義的文字內容 (例如用 "alt" 或 "longdesc" 屬性, 或者在組件內容中提供). 這些非文字組件包括有: 圖片, 用圖形呈現的文字 (包括符號), 影像地圖區域, 動畫 (例如動畫 GIF), 小應用程式 (applet) 程式性的物件, 用字符拼湊的圖案 (ascii art), 框架 (frame), 腳本 (script), 用於清單符號的圖片, 用來調整間距的物件, 圖案式的按鈕, 聲音 (無論是否透過使用者互動來播放), 單獨的音訊檔案, 視訊檔案的音軌以及視訊. 圖片
  • 圖片清單
  • 切換圖片/替代文字
  • 顯示圖片
IE 選項
  • 顯示圖片
2.1 確保所有透過色彩所傳遞的資訊, 例如內容或裝飾, 就算在沒有色彩的情況下也還是能提供. 色彩
  • 灰階
  • Vischeck 色盲模擬程式 (紅綠色盲)
工具 > 模擬
  • 色盲
4.1 在文件中, 任何內文或等義文字 (例如 caption 說明) 所使用的自然語言更換時, 予以明確地識別. 文件資訊
  • 顯示語言 (Lang) 屬性
6.1 組織文件, 使其就算在沒有樣式表的情況下也能加以閱讀. 舉例來說, 當某個 HTML 文件沒有按照關聯的樣式表來繪製時, 一定要還是能閱讀文件內容. CSS
  • 停用 CSS
  • 顯示樣式表
  • 測試樣式
IE 選項
  • 套用 CSS
6.2 確保動態內容的等義文字, 在動態內容變更時也能一併更新. IE 選項
  • 使用 Javascript
  • 使用 ActiveX
結構
  • 框架邊框
文件資訊
  • 網頁資訊
  • 詮釋資料資訊
7.1 除非使用者代理程式能讓使用者控制閃爍的情況, 否則就應該避免在螢幕上形成閃爍效果. 工具
  • 模擬
    • 閃爍圖片樣本
14.1 根據網站內容, 使用最為淺顯易懂的語言. 工具
  • Juicy Studio Tools
    • 可讀性測試
如果您用了圖片或影像地圖的話 (優先順序 1)
1.2 針對伺服器端影像地圖中的每一個有效區域, 均提供額外的文字鏈結. 圖片
  • 顯示影像地圖
文件資訊
  • 列出鏈結
9.1 除非有區域無法以可用的多邊型形狀來定義, 否則應該提供使用者端的影像地圖, 而非伺服器端的影像地圖. 圖片
  • 顯示影像地圖
如果您用了表格的話 (優先順序 1) ?
5.1 對於資料表格來說, 應標明每一欄與每一列的標頭. 結構
  • 單純的資料表格
  • 完整的資料表格
工具
  • Juicy Studio Tools
    • 完整表格視察程式
5.2 對於邏輯上有兩層以上的欄標頭或列標頭的表格來說, 應使用標記來建立資料儲存格與標頭儲存格間的關聯. 結構
  • 完整的資料表格
如果您用了框架的話 (優先順序 1)
12.1 為每一個框架加上標題, 藉此促進框架的指認與導覽. 結構
  • 框架名稱 / 標題
如果您用了小應用程式 (applet) 與腳本 (script) 的話 (優先順序 1)
6.3 確保在腳本, 小應用程式或其他程式型物件在被關掉或不被支援的情況下, 網頁仍可使用. 如果實在不可能辦到的話, 就該提供等義的資訊或其他具親和力的網頁. IE 選項
  • 使用 Javascript
  • 使用 ActiveX
工具
  • 檢視所生出的源碼
  • 模擬
    • 停用外掛程式
如果您用了多媒體的話 (優先順序 1)
1.3 除非使用者代理程式能自動地將視訊的等義文字朗讀出來, 否則就應該提供聽覺性的描述內容, 以表達視訊或多媒體呈現的重點資訊. 文件資訊
  • 列出多媒體檔案
1.4 對於任何時間性的多媒體內容 (例如電影或動畫), 都應該將等義替代物件 (例如字幕或視訊的聽覺性描述) 與媒體播放同步化. 文件資訊
  • 列出多媒體檔案
如果這些都失敗了的話 (優先順序 1)
11.4如果盡您所能之後, 仍然無法建立具親和力的網頁的話, 那麼您應該要另外建立一個具親和力的網頁; 該網頁應使用 W3C 推薦的技術, 具備親和力, 提供等義的資訊 (或功能), 並且更新頻率應與那個不具親和力 (也就是原來的) 網頁一致. 無

回至頁頂

優先順序 2 檢核要點

通論 (優先順序 2) 工具列功能
2.2 確保前景色與背景色的搭配組合, 即使在色盲患者的眼中, 或在黑白螢幕裏, 都應該要能提供充足的對比. [圖片的優先順序為 2, 文字的優先順序為 3]. 色彩
  • 灰階
  • 頁面使用的色彩
工具
  • Juicy Studio Tools
    • 對比分析程式
    • CSS 親和力分析程式
3.1 如果有合宜的標記語言, 就應該使用標記來傳遞資訊, 而不該用圖片來傳遞資訊. 圖片
  • 圖片清單
  • 顯示圖片
3.2 使用合於已發佈的正式語法來建立文件. 驗證
  • W3C HTML 驗證程式
  • WDG HTML 驗證程式
  • W3C HTML 美容程式 (Tidy)
  • W3C CSS 驗證程式
CSS
  • 迂腐的 HTML
文件資訊
  • 顯示 DOCTYPE
3.3 使用樣式表來控制版面呈現. CSS
  • 停用 CSS
  • 顯示游標所指的組件樣式
  • 顯示樣式表
IE 選項
  • 套用 CSS
3.4 在標記語言的屬性值以及樣式表的特性值中, 使用相對單位而不要用絕對單位. CSS
  • 停用 CSS
  • 顯示游標所指的組件樣式
  • 顯示樣式表
工具
  • Juicy Studio Tools
    • CSS 親和力分析程式
變更大小
  • 640 X 480
  • 800 X 600
IE 選項
  • 套用 CSS
3.5按照規格來使用標頭 (header) 組件, 以表達文件結構. 結構
  • 標頭
  • 標頭結構
3.6 用適當的方式標記清單及清單項目. 結構
  • 清單項目
3.7 標記引言. 不可以挪用引言標記來製造縮排等排版效果. 結構
  • 顯示其他組件
6.5 確保動態內容也具備親和力, 否則就該提供等義的內容呈現或網頁. IE 選項
  • 使用 Javascript
  • 使用 ActiveX
結構
  • 框架邊框
  • 顯示其他組件
文件資訊
  • 列出框架
  • 網頁資訊
7.2 除非使用者代理程式能讓使用者控制閃爍的情況, 否則就應該避免造成內容的閃爍 (例如用固定的速率變更內容呈現, 像是開開關關等). 工具
  • 模擬
    • 閃爍圖片樣本
7.4 除非使用者代理程式能讓使用者停止頁面重新更新, 否則就不應該建立會定期自動更新的頁面. 文件資訊
  • 詮釋資料資訊
7.5 除非使用者代理程式能讓使用者停止自動轉向, 否則就不應該使用自動轉向其他頁面的標記. 另一方面, 您應該組態伺服器的設定來處理轉向. 文件資訊
  • 詮釋資料資訊
10.1 除非使用者代理程式能讓使用者關閉冒出來的視窗, 否則就不應該產生彈出式 (快顯) 視窗, 也不該在未通知使用者的情況下就變更目前的視窗. 結構
  • JavaScript / 開往新視窗的鏈結
11.1 如果有可用且合宜的 W3C 技術, 就該使用 W3C 技術; 祇要 W3C 技術能被支援, 就應該盡可能地使用最新的 W3C 技術. 文件格式
  • 列出頁面所連結到的 PDF
IE 選項
  • 使用 ActiveX
11.2 避免使用 W3C 技術所廢棄的功能. CSS
  • 迂腐的 HTML
驗證
  • W3C HTML 驗證程式
  • WDG HTML 驗證程式
12.3 使用自然且適切的方式, 將大塊的資訊分隔成若干更易於掌握的群組. 結構
  • 標頭
  • 標頭結構
  • 清單項目
  • 區塊 / 標籤
13.1 明確地標示每一個鏈結所連往的目的地. 文件資訊
  • 列出鏈結
  • 列出可供下載的檔案
結構
  • JavaScript / 開往新視窗的鏈結
13.2 提供詮釋資料以加入站台及頁面的語意資訊. 文件資訊
  • 詮釋資料資訊
13.3 提供關於站台一般性規劃的資訊 (例如站台地圖或目錄). 無
13.4 使用一致的方法來提供導覽機制. 無
如果您用了表格的話 (優先順序 2)
5.3 不要挪用表格來用於排版, 除非該表格即便線性化後仍具有意義. 另一方面, 如果表格並不具有意義的話, 就該提供等義的替代物件 (這可能是線性化後的版本) 結構
  • 線性化 (移除表格)
  • 表格儲存格次序
5.4 如果挪用了表格來排版, 就不該再使用其他的結構性標記來處理視覺排版效果. 結構
  • 簡單的資料表格
  • 完整的資料表格
如果您用了框架的話 (優先順序 2)
12.2 如果框架標題不夠明白的話, 就應該描述每一個框架的目的, 以及每一個框架跟其他框架間的關聯到底為何. 結構
  • 框架名稱/標題
如果您用了表單的話 (優先順序 2)
10.2 除非使用者代理程式能支援標籤及表單控制元件間的明確關聯, 否則對於所有的表單控制元件及其不明確關聯的標籤來說, 都應該確保這些標籤放置於適切的位置上. 無
12.4 明確地將標籤與其所關聯的表單控制元件聯繫在一起. 結構
  • 區塊 / 標籤
如果您用了小應用程式 (applet) 與腳本 (script) 的話 (優先順序 2)
6.4 對於腳本及小應用程式來說, 都應確保事件處理程式應與輸入介面無關. 結構
  • 事件處理程式
7.3 除非使用者代理程式能讓使用者停住移動中的內容, 否則就應該避免頁面內的物件移動. 無
8.1 讓程式型組件如腳本及小應用程式等, 都能直接被協助性科技所取用, 或與協助性科技相容 [如果功能很重要而且不在其他地方出現的話, 優先順序為 1, 否則優先順序為 2.] 文件資訊
  • 指認腳本暨小應用程式
9.2 確保任何具有自身介面的組件, 其運作方式都與使用者的裝置無關. 文件資訊
  • 指認多媒體檔案
  • 指認腳本暨小應用程式
9.3 對於腳本來說, 應指定邏輯上的事件處理程式, 而不應該指定特定裝置的事件處理程式. 結構
  • 事件處理程式

回至頁頂

優先順序 3 檢核要點

通論 (優先順序 3) 工具列功能
4.2 應當在文件中每一個縮寫字或頭文字第一次出現時, 註明其全稱. 結構
  • 頭文字 / 縮寫
4.3 應標明文件主要使用的自然語言. 文件資訊
  • 顯示語言 (lang) 屬性
9.4 在鏈結, 表單控制元件及物件間, 建立合乎邏輯的跳位次序. 結構
  • 顯示跳位次序
  • 跳位次序
?
9.5 應對重要的鏈結 (包括用戶端影像地圖中的鏈結), 表單控制元件和表單控制元件群組, 提供鍵盤上的快速鍵. 結構
  • 便捷鍵
10.5 除非使用者代理程式 (包括協助性科技) 能夠清楚地繪出緊鄰的兩個鏈結, 否則就該在兩個鏈結間安插不屬於鏈結而又可被列印的字符 (並以空格隔開). 無
11.3 提供相關的資訊, 讓使用者能夠按照其偏好 (例如語言, 內容型態等) 來取得文件. 無
13.5 提供導覽列, 以強調並讓使用者得以使用導覽機制. 無
13.6 將相關的鏈結群聚在一起, 並 (為使用者代理程式) 指明該群聚; 然後, 除非使用者代理程式能加以處理, 否則還應該再提供能跳過該群聚的方法. 文件格式
  • 列出鏈結
13.7 如果有提供搜尋功能的話, 就應該讓具有不同搜尋技巧等級或偏好的使用者, 能夠使用不同類型的搜尋功能. 無
13.8在標頭, 段落, 清單等的開頭, 放置識別用的資訊. 無
13.9 提供關於文件集 (亦即含有許多頁面的文件) 的資訊. 文件資訊
  • 詮釋資料資訊
13.10 提供跳過多列字符圖案 (ASCII art) 的方法. 無
14.2 為那些用來幫助理解頁面的圖形或聽覺呈現, 提供額外的文字. 無
14.3 為多頁的內容建立一致的呈現樣式. 無
如果您用了圖片和影像地圖 (優先順序 3)
1.5 除非使用者代理程式能繪製出用戶端影像地圖鏈結的等義文字, 否則就應該要為每一個用戶端影像地圖的有效區域提供額外的文字鏈結. 圖片
  • 顯示影像地圖
如果您用了表格的話 (優先順序 3)
5.5 應提供表格摘要. 結構
  • 簡單的資料表格
  • 完整的資料表格
工具
  • Juicy Studio Tools
    • 完整表格視察程式
5.6 為標頭標籤提供縮寫. 工具
  • Juicy Studio Tools
    • 完整表格視察程式
10.3 除非使用者代理程式 (包括協助性科技) 能夠正確地繪製出平行的文字, 否則就應該為所有使用平行文字或折行欄位的表格, (在同一頁或其他頁面中) 提供線性的等義文字. AIS 認為這個檢核要點被廢棄了
如果您用了表單的話 (優先順序 3)
10.4 除非使用者代理程式能正確地處理空白的控制元件, 否則就應該要在編輯框及文字區域中, 預先放置佔位子用的字符. AIS 認為這個檢核要點被廢棄了

回至頁頂