






























最近项目需要做 Accessibility 的处理,在这段时间的接触了很多无障碍相关的技术。除了基础的 ARIA 和相对单位的影响等基础知识外,本篇想介绍一下比较实用的 Accessibility Parsing tools。
Nu Html Checker 是用于检查 HTML page 是否符合语义化,捕获可能会遗漏的错误,以便进行修复。它提供输入 URL 地址、上传 HTML 文件和文字输入的形式来检查代码。
以 MDN 文档 为例:

可以看到在 Input 框输入 URL 后,点击 check button 得到关于 HTML 语义化的分析报告。它主要分为两个等级:
可见 MDN 文档对于 Accessibility 的支持还是很不错的。
但如果我们的 page 是使用 SPA (single-page application),也就是页面的内容是动态生成的话。那就需要等内容加载完毕后,右键保存为 HTML 文件后再上传分析,或通过开发者工具直接 copy HTML 字符串进行分析。
下面任取一个 SPA 网站,直接 copy 网站的 HTML code 做分析,步骤如下:
Elements, 右键 <html> 节点,选择 Copy -> Copy outHTML。<!DOCTYPE html> 带过来,因此我们还得加上这句。
可以发现该页面可以优化的东西还有很多,但错误数量一多就有点眼花缭乱的。因此 Nu Html Checker 还提供 Message Filtering 以展示关键的信息:

当然,有时候我们主要想关注这个 page 关于 accessibility 相关的结果,不想看那么多额外的信息。此时就可以使用 WCAG Parsing Validation Filter bookmarklet 生成 accessibility 的信息简报。
该篇文档讲的东西其实很简单,无非就是它们提供了一段代码,用于提取关于 accessibility 的信息:
1 | javascript:(function(){var filterStrings=["tag seen","Stray end tag","Bad start tag","violates nesting rules","Duplicate ID","Unclosed element","not allowed as child of element","unclosed elements","unquoted attribute value","Duplicate attribute","descendant of an element with the attribute"],filterRE=filterStrings.join("|"),i,nT=0,nP1=0,result,resultText,results,resultsP1={},root=document.getElementById("results");if(!root){return}results=root.getElementsByTagName("li");for(i=results.length-1;i>=0;i--){result=results[i];if(result.id.substr(0,3)==="vnu"){if(result.className!=="info"){nT=nT+1}resultText=""+result.textContent;resultText=resultText.substring(0,resultText.indexOf("."));if(resultText.match(filterRE)==null){result.style.display="none";result.className=result.className+"a11y-ignore"}else{resultsP1[resultText.substr(7)]=true;nP1=nP1+1}}}resultText="";for(i in resultsP1){if(resultsP1.hasOwnProperty(i)){resultText=i+"; "+resultText}}var str=nT+" validation errors and warnings.\n"+nP1+" errors that may impact accessibility:\n"+resultText;console.log("%c[WCAG Parsing Validation Filter bookmarklet@v4]:\n","font-weight: bold","https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/\n\n"+str);alert(str)})(); |
以上是一段自执行的 JavaScript 代码,源代码是直接将信息通过 alert 打印出来。但我觉得不太方便复制,因此在原基础上增加了 console 的输出方式,便于复制信息。
使用方式:

上图 console 中输出的信息如下:
1 | [WCAG Parsing Validation Filter bookmarklet@v4]: https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/ |
从这份信息简报我们可以了解到:这个 page 有 91 个 errors 和 warnings。其中有 6 份错误会影响 accessibility。主要的错误是因为不合理的标签嵌套所引起的错误。这份简报就已经将我们所期望了解的信息都简短的概括了出,便于我们分析。
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。