最近项目需要做 Accessibility 的处理，在这段时间的接触了很多无障碍相关的技术。除了基础的 ARIA 和相对单位的影响等基础知识外，本篇想介绍一下比较实用的 Accessibility Parsing tools。
Nu Html Checker 是用于检查 HTML page 是否符合语义化，捕获可能会遗漏的错误，以便进行修复。它提供输入 URL 地址、上传 HTML 文件和文字输入的形式来检查代码。
以 MDN 文档 为例:
可以看到在 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 解析后的结果页中，点击刚才新建的标签就能看到弹出来的结果了
上图 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。主要的错误是因为不合理的标签嵌套所引起的错误。这份简报就已经将我们所期望了解的信息都简短的概括了出，便于我们分析。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。