跳到主要內容
  • 字級
:::|
現在位置：

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

  • 點閱：20414
  • 資料來源：本服務網
  • 日期：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(台灣數位有聲書推展學會）