網站無障礙檢測協助工具介紹
- 點閱:18376
- 資料來源:本服務網
- 日期:108-09-27
網頁heading標記、圖片alt屬性、表格/表單及檔案下載的title屬性等,都是檢測報告中常見的修正項目。有時因網頁中含有太多類似的元素,或使用較複雜的設計方式,而無法迅速找出報告所列的問題,增加修正網頁所需的時間與困難度。
以下整理出幾項常用的無障礙人工檢測工具,可全面檢視單頁的語法設計,或直接確認網頁特定元素/標記。這些工具皆可依需求搭配使用,以節省更多檢查及修正網頁所需的時間。
- 全網頁檢視類: 目前可使用的3種檢測插件/工具列,皆可全面檢視單一網頁中的不同語法、標記設定。
- IE親和力介面
這個工具列可檢視圖片、表格、headings以及色彩等項目的設定,點選要檢視的項目後,即在網頁中標示出所有包含該項目的內容,方便迅速確認問題點位置,並判斷內容/設計是否符合無障礙規範標準,需安裝於IE瀏覽器執行操作。
下載網址:http://wat2.z6i.org/resources/wat-ie-about.html - Chrome Web Developer及Firefox Accessibility
英文版的網頁插件,可支援Chrome及Fire Fox瀏覽器,安裝後可選取要檢視的圖片、title屬性或其他各項網頁元素/標記。點選要檢視的項目後,即在網頁中標示出所有包含該項目的內容,方便迅速查看問題位置並判斷網頁內容是否符合無障礙規範標準。
下載網址:http://chrispederick.com/work/web-developer - WAVE檢測工具
可進行單頁線上檢測,或下載插件版使用。只要輸入要檢測的頁面網址,則會直接將該頁的檢測結果呈現於清單中,並列出不符合規範標準的各項內容。
下載網址:http://wave.webaim.org/ - HTML_CodeSniffer
- IE親和力介面
將HTML_CodeSniffer檢測工具拖曳至書籤列後,按下檢測工具可執行單頁線上檢測,在列表中可檢視錯誤、警示與注意三種不同問題,並可瀏覽報告。
下載網址:http://squizlabs.github.io/HTML_CodeSniffer/
- 各別項目檢視類:可用來檢視特定的網頁標記或項目
- JavaScript Bookmarklets for Accessibility Testing書籤檢測
以JavaScript開發的書籤,可選取並標註網頁中的各項無障礙元素,如角色或屬性(如aria-label、headings、圖片、表格及表單)等內容,螢幕報讀軟體使用者亦可使用此檢測書籤。只要將要檢視的書籤項目,拖曳至瀏覽器中的書籤列中,點擊後即會在網頁中標註含有該項語法的內容。
下載網址:http://pauljadam.com/bookmarklets/index.html - Heading map工具
此工具支援Chrome及FireFox瀏覽器,執行後即在清單中依序列出網頁的標題層級(headings),幫助使用者快速檢視標題配置是否符合規範標準。
Chrome版下載網址:https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
FireFox版下載網址:https://addons.mozilla.org/zh-TW/firefox/addon/headingsmap/ -
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
- JavaScript Bookmarklets for Accessibility Testing書籤檢測
-
語音報讀軟體類
NVDA
是目前視障者主要使用的語音報讀軟體,支援中文報讀。安裝並開啟後,語音即會朗讀出當前工作窗格中的內容,可模擬視障者操作情形,檢測網頁功能與內容是否符合規範標準。
下載網址:
http://www.nvaccess.org/download/(原始網址)
http://www.tdtb.org/information_7_view.aspx?sid=20130618142138(台灣數位有聲書推展學會)