Accessibility Parsing 无障碍页面分析

最近项目需要做 Accessibility 的处理，在这段时间的接触了很多无障碍相关的技术。除了基础的 ARIA 和相对单位的影响等基础知识外，本篇想介绍一下比较实用的 Accessibility Parsing tools。

Nu Html Checker 是用于检查 HTML page 是否符合语义化，捕获可能会遗漏的错误，以便进行修复。它提供输入 URL 地址、上传 HTML 文件和文字输入的形式来检查代码。

可以看到在 Input 框输入 URL 后，点击 check button 得到关于 HTML 语义化的分析报告。它主要分为两个等级:

Error: 被标记为 Error 的问题是因为它们是可访问性、可用性、互操作性、安全性或可维护性的潜在问题。或者因为它们可能导致性能下降，或可能导致脚本以难以解决的方式失败。
Warning: 被标记为 warning 的代码意味着这种写法不够好，但对 Accessibility 的问题影响有限。

可见 MDN 文档对于 Accessibility 的支持还是很不错的。

但如果我们的 page 是使用 SPA (single-page application)，也就是页面的内容是动态生成的话。那就需要等内容加载完毕后，右键保存为 HTML 文件后再上传分析，或通过开发者工具直接 copy HTML 字符串进行分析。

下面任取一个 SPA 网站，直接 copy 网站的 HTML code 做分析，步骤如下:

当 SPA page 的内容加载完毕后，打开浏览器开发者工具。
Tab 选择 Elements, 右键 <html> 节点，选择 Copy -> Copy outHTML。
将 Nu HTML checker 中的 Check by 选为 text input, 在 input 框粘贴刚才 copy 的 HTML code。
由于 copy 中不会把 <!DOCTYPE html> 带过来，因此我们还得加上这句。
点击 check button。

可以发现该页面可以优化的东西还有很多，但错误数量一多就有点眼花缭乱的。因此 Nu Html Checker 还提供 Message Filtering 以展示关键的信息:

当然，有时候我们主要想关注这个 page 关于 accessibility 相关的结果，不想看那么多额外的信息。此时就可以使用 WCAG Parsing Validation Filter bookmarklet 生成 accessibility 的信息简报。

该篇文档讲的东西其实很简单，无非就是它们提供了一段代码，用于提取关于 accessibility 的信息:

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 的输出方式，便于复制信息。

使用方式：

打开浏览器书签管理器 (bookmark manage)
如果使用的是 chrome 浏览器的话，在右上角点开 “Add new bookmark”
书签名可自己决定，URL 输入如上代码即可，保存书签
在 Nu Html Checker 解析后的结果页中，点击刚才新建的标签就能看到弹出来的结果了

WCAG Parsing Validation Filter bookmarklet 使用

上图 console 中输出的信息如下：

[WCAG Parsing Validation Filter bookmarklet@v4]: https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/

91 validation errors and warnings.
6 errors that may impact accessibility:
Element a not allowed as child of element ul in this context; Element object not allowed as child of element ul in this context; Element style not allowed as child of element body in this context;

从这份信息简报我们可以了解到：这个 page 有 91 个 errors 和 warnings。其中有 6 份错误会影响 accessibility。主要的错误是因为不合理的标签嵌套所引起的错误。这份简报就已经将我们所期望了解的信息都简短的概括了出，便于我们分析。