跳到主要內容
:::|

網站無障礙檢測協助工具介紹

  • 點閱:14690
  • 資料來源:本服務網
  • 日期:108-09-27

網頁heading標記、圖片alt屬性、表格/表單及檔案下載的title屬性等,都是檢測報告中常見的修正項目。有時因網頁中含有太多類似的元素,或使用較複雜的設計方式,而無法迅速找出報告所列的問題,增加修正網頁所需的時間與困難度。

以下整理出幾項常用的無障礙人工檢測工具,可全面檢視單頁的語法設計,或直接確認網頁特定元素/標記。這些工具皆可依需求搭配使用,以節省更多檢查及修正網頁所需的時間。

  • 全網頁檢視類: 目前可使用的3種檢測插件/工具列,皆可全面檢視單一網頁中的不同語法、標記設定。
    1. IE親和力介面
      這個工具列可檢視圖片、表格、headings以及色彩等項目的設定,點選要檢視的項目後,即在網頁中標示出所有包含該項目的內容,方便迅速確認問題點位置,並判斷內容/設計是否符合無障礙規範標準,需安裝於IE瀏覽器執行操作。
      下載網址:http://wat2.z6i.org/resources/wat-ie-about.html
    2. Chrome Web Developer及Firefox Accessibility
      英文版的網頁插件,可支援Chrome及Fire Fox瀏覽器,安裝後可選取要檢視的圖片、title屬性或其他各項網頁元素/標記。點選要檢視的項目後,即在網頁中標示出所有包含該項目的內容,方便迅速查看問題位置並判斷網頁內容是否符合無障礙規範標準。
      下載網址:http://chrispederick.com/work/web-developer
    3. WAVE檢測工具
      可進行單頁線上檢測,或下載插件版使用。只要輸入要檢測的頁面網址,則會直接將該頁的檢測結果呈現於清單中,並列出不符合規範標準的各項內容。
      下載網址:http://wave.webaim.org/
    4. HTML_CodeSniffer

將HTML_CodeSniffer檢測工具拖曳至書籤列後,按下檢測工具可執行單頁線上檢測,在列表中可檢視錯誤、警示與注意三種不同問題,並可瀏覽報告。

下載網址:http://squizlabs.github.io/HTML_CodeSniffer/


  • 各別項目檢視類:可用來檢視特定的網頁標記或項目
    1. JavaScript Bookmarklets for Accessibility Testing書籤檢測
      以JavaScript開發的書籤,可選取並標註網頁中的各項無障礙元素,如角色或屬性(如aria-label、headings、圖片、表格及表單)等內容,螢幕報讀軟體使用者亦可使用此檢測書籤。只要將要檢視的書籤項目,拖曳至瀏覽器中的書籤列中,點擊後即會在網頁中標註含有該項語法的內容。
      下載網址:http://pauljadam.com/bookmarklets/index.html
    2. Heading map工具
      此工具支援Chrome及FireFox瀏覽器,執行後即在清單中依序列出網頁的標題層級(headings),幫助使用者快速檢視標題配置是否符合規範標準。
      Chrome版下載網址:https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
      FireFox版下載網址:https://addons.mozilla.org/zh-TW/firefox/addon/headingsmap/
    3. WCAG-Contrast-Checker色彩檢測工具
      使用滴管功能選取網頁文字及背景色彩,即可立即換算出色彩對比值,並判斷是否符合規範標準。
      FireFox版下載網址:https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/
      Chrome版下載網址:https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf/related


  • 語音報讀軟體類
    NVDA
    是目前視障者主要使用的語音報讀軟體,支援中文報讀。安裝並開啟後,語音即會朗讀出當前工作窗格中的內容,可模擬視障者操作情形,檢測網頁功能與內容是否符合規範標準。
    下載網址:
    http://www.nvaccess.org/download/(原始網址)
    http://www.tdtb.org/information_7_view.aspx?sid=20130618142138(台灣數位有聲書推展學會)