TPG 服務項目

網頁親和力工具列 2.0 與網頁內容親和力方針 [WCAG 1.0]



簡介

這個工具列有許多的功能, 能夠用來檢驗網頁內容及原始碼諸元. 因此這些功能也能夠用來協助手動檢測網頁內容親和力方針的檢核要點. 儘管沒有任何一項工具列功能會明確告訴你網頁是否符合某個特定的檢核要點, 但是卻能協助你進行評估.

範例:

評估檢核要點 4.1  在文件內文所使用的自然語言更換時, 予以明確地識別.

'文件資訊 > 顯示 Lang 屬性' 功能會辨識出原始碼當中特別指定的語言. 如果網頁有指定主要語言, 它會在內容頂端插入 HTML 指定語言. 任何其他指定的語言則會在其作用範圍始末以高亮度標出.

檢查所有用不同語言表達的內容均有特別標出.

評估檢核要點 3.3  使用樣式表來控制版面呈現.

'CSS > 停用 CSS' 功能會將網頁以不採 CSS (不論是即席, 檔內或來自外部檔案) 的方式繪製出來. 如果在這種情況下還能看到任何非預設的色彩, 字體, 字型等, 那麼就表示很有可能用了非 CSS 的視覺呈現型規格. 如果內容仍然會繪製成多欄格式, 那麼很有可能用了表格排版 (也就是非 CSS 的版面控制).

評估檢核要點 3.5  按照規格來使用標題 (header) 組件, 以表達文件結構.

'結構 > 標題' 功能可以辨識原始碼中的標題標記 (亦即 h1 - h6 組件), 並以高亮度標示出其在網頁中的內容.


檢查每一個在視覺上屬於標題的部分, 也都用標體組件加以標記了, 並檢查第一個標題層次是從 'h1' 開始, 而且相關的巢狀結構均正確無誤, 也沒有跳過任何標題層次.

'結構 > 標題結構' 功能可以用來檢查標題巢狀結構是否正確.


優先順序 1 檢核要點

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

回到開頭

優先順序 2 檢核要點

一般情況 (優先順序 2) 工具列功能
檢核要點 2.2 確保前景色與背景色的搭配組合, 即使在色盲患者的眼中, 或在黑白螢幕裏, 都應該要能提供充足的對比. [圖片的優先順序為 2, 文字的優先順序為 3]. 色彩
  • 灰階
  • 對比分析程式 [外部程式]
  • Juicy Studio 對比分析器
檢核要點 3.1 如果有合宜的標記語言, 就應該使用標記來傳遞資訊, 而不該用圖片來傳遞資訊. 圖片
  • 移除 CSS 圖片
檢核要點 3.2 使用合於已發佈的正式語法來建立文件. 檢查
  • 快速檢查 HTML 驗證
  • W3C HTML 驗證器
  • W3C CSS 驗證器
  • W3C 鏈結檢測器
  • WDG HTML 驗證器
文件資訊
  • 顯示 DOCTYPE
  • 棄而不用的組件
檢核要點 3.3 使用樣式表來控制版面呈現. CSS
  • 停用 CSS
  • 停用即席樣式
  • 把 display: none 改成 inline
  • 把 visibility: hidden 改成 visible
  • 套用 top/left/text-indent: 0
  • 顯示套用的樣式規則
  • 顯示樣式表
IE
  • 切換 CSS
  • 啟用 CSS (對話窗)
檢核要點 3.4 在標記語言的屬性值以及樣式表的特性值中, 使用相對單位而不要用絕對單位. CSS
  • 停用 CSS
  • 顯示樣式表
  • 測試樣式表
檢查
  • W3C CSS 驗證器
改變尺寸
  • 640 X 480
  • 800 X 600
  • 1024 X 768
  • 1280 X 1024
  • 自訂高度/寬度
IE
  • 切換 CSS
  • 字型
  • 啟用 CSS (對話窗)
  • 字型 (對話窗)
檢核要點 3.5 按照規格來使用標題 (header) 組件, 以表達文件結構. 結構
  • 標題
  • 標題結構
原始碼
  • 原始碼語法強調器 產生出來的原始碼 [強調標題]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調標題]
檢核要點 3.6 用適當的方式標記清單及清單項目. 結構
  • 清單項目
原始碼
  • 原始碼語法強調器 產生出來的原始碼 [強調清單]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調清單]
檢核要點 3.7 標記引言. 不可以挪用引言標記來製造縮排等排版效果. 結構
  • Q / 引言區塊
檢核要點 6.5 確保動態內容也具備親和力, 否則就該提供等義的內容呈現或網頁. IE
  • 切換 JavaScript
  • 切換 ActiveX
  • 啟用 JavaScript (對話窗)
  • 啟用 ActiveX (對話窗)
頁框
  • 頁框邊框
結構
  • 顯示其他組件
檢核要點 7.2 除非使用者代理程式能讓使用者控制閃爍的情況, 否則就應該避免造成內容的閃爍 (例如用固定的速率變更內容呈現, 像是開開關關等). 圖片
  • GIF 閃爍測試
檢核要點 7.4 除非使用者代理程式能讓使用者停止頁面重新更新, 否則就不應該建立會定期自動更新的頁面. 文件資訊
  • 詮釋資料資訊 [開新視窗]
檢核要點 7.5 除非使用者代理程式能讓使用者停止自動轉向, 否則就不應該使用自動轉向其他頁面的標記. 另一方面, 您應該組態伺服器的設定來處理轉向. 文件資訊
  • 詮釋資料資訊 [開新視窗]
檢核要點 10.1 除非使用者代理程式能讓使用者關閉冒出來的視窗, 否則就不應該產生彈出式 (快顯) 視窗, 也不該在未通知使用者的情況下就變更目前的視窗. 文件資訊
  • JavaScript / 開新視窗的鏈結
檢核要點 11.1 如果有可用且合宜的 W3C 技術, 就該使用 W3C 技術; 祇要 W3C 技術能被支援, 就應該盡可能地使用最新的 W3C 技術. 文件資訊
  • 列出可供下載的檔案 [開新視窗]
IE 選項
  • 切換 ActiveX
  • 啟用 ActiveX (對話窗)
檢核要點 11.2 避免使用 W3C 技術所棄而不用的功能. 文件資訊
  • 棄而不用的組件
原始碼
  • 原始碼語法強調器 原始碼 [強調棄而不用的組件及屬性]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調棄而不用的組件及屬性]
檢查
  • W3C HTML 驗證器
  • WDG HTML 驗證器
檢核要點 12.3 使用自然且適切的方式, 將大塊的資訊分隔成若干更易於掌握的群組. 結構
  • 標題
  • 標題結構
  • 清單項目
  • 表單區域 / 標籤
  • 段落
  • Q / 引言區塊
檢核要點 13.1 明確地標示每一個鏈結所連往的目的地. 文件資訊
  • 列出鏈結 [開新視窗]
  • 列出可供下載的檔案 [開新視窗]
文件資訊
  • JavaScript / 開新視窗的鏈結
檢核要點 13.2 提供詮釋資料以加入站台及頁面的語意資訊. 文件資訊
  • 詮釋資料資訊 [開新視窗]
檢核要點 13.3 提供關於站台一般性規劃的資訊 (例如站台地圖或目錄).
檢核要點 13.4 使用一致的方法來提供導覽機制.
如果你有用表格的話 (優先順序 2)  
檢核要點 5.3 不要挪用表格來用於排版, 除非該表格即便線性化後仍具有意義. 另一方面, 如果表格並不具有意義的話, 就該提供等義的替代物件 (這可能是線性化後的版本) 表格
  • 表格儲存格順序
  • 線性化
原始碼
  • 原始碼語法強調器 原始碼 [強調表格]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調表格]
檢核要點 5.4 如果挪用了表格來排版, 就不該再使用其他的結構性標記來處理視覺排版效果. 表格
  • 顯示資料表格
原始碼
  • 原始碼語法強調器 原始碼 [強調表格]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調表格]
如果你有用頁框的話 (優先順序 2)  
檢核要點 12.2 如果框架標題不夠明白的話, 就應該描述每一個框架的目的, 以及每一個框架跟其他框架間的關聯到底為何. 頁框
  • 導覽分成若干頁框的文件
  • 穿透頁框
  • 頁框名稱 / 標題
如果你有用表單的話 (優先順序 2)  
檢核要點 10.2 除非使用者代理程式能支援標籤及表單控制元件間的明確關聯, 否則對於所有的表單控制元件及其不明確關聯的標籤來說, 都應該確保這些標籤放置於適切的位置上.
檢核要點 12.4 明確地將標籤與其所關聯的表單控制元件聯繫在一起. 結構
  • 表單區域 / 標籤
原始碼
  • 原始碼語法強調器 原始碼 [強調表單]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調表單]
如果你有用 applets 和腳本的話 (優先順序 2)  
檢核要點 6.4 對於腳本及小應用程式來說, 都應確保事件處理程式應與輸入介面無關. 原始碼
  • 原始碼語法強調器 原始碼 [強調事件]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調事件]
檢核要點 7.3 除非使用者代理程式能讓使用者停住移動中的內容, 否則就應該避免頁面內的物件移動.
檢核要點 8.1 讓程式型組件如腳本及小應用程式等, 都能直接被協助性科技所取用, 或與協助性科技相容 [如果功能很重要而且不在其他地方出現的話, 優先順序為 1, 否則優先順序為 2.] 原始碼
  • 原始碼語法強調器 原始碼 [強調事件]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調事件]
文件資訊
  • 列出 Applets / Scripts [開新視窗]
檢核要點 9.2 確保任何具有自身介面的組件, 其運作方式都與使用者的裝置無關. 文件資訊
  • 列出多媒體檔案 [開新視窗]
  • 列出 Applets and Scripts [開新視窗]
檢核要點 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 應提供表格摘要. 表格
  • 顯示資料表格
原始碼
  • 原始碼語法強調器 原始碼 [強調表格]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調表格]
檢核要點 5.6 為標頭標籤提供縮寫. 原始碼
  • 原始碼語法強調器 原始碼 [強調表格]
  • 產生出來的原始碼語法強調器 產生出來的原始碼 [強調表格]
檢核要點 10.3 除非使用者代理程式 (包括協助性科技) 能夠正確地繪製出平行的文字, 否則就應該為所有使用平行文字或折行欄位的表格, (在同一頁或其他頁面中) 提供線性的等義文字.
如果你有用表單的話 (優先順序 3)  
檢核要點 10.4 除非使用者代理程式能正確地處理空白的控制元件, 否則就應該要在編輯框及文字區域中, 預先放置佔位子用的字符.

榮譽

感謝 Jane Berliss-Vincent 將本頁內容更新至 WAT 2.0 版(2008 年一月)


回到開頭