最近一个项目需要做Accessibility处理，这段时间接触了很多accessibility相关的技术。除了ARIA的基础知识和相关单位的影响，本文还想介绍一下比较实用的AccessibilityParsing工具。NuHtmlChecker用于检查HTML页面是否符合语义，并捕获可能遗漏的错误以便进行修复。它提供了输入URL地址、上传HTML文件和文本输入表单来检查代码。以MDN文档为例：可以看到在Input框中输入URL后，点击勾选按钮，可以得到一份HTML语义分析报告。它分为两个主要等级：错误：问题被标记为错误，因为它们是可访问性、可用性、互操作性、安全性或可维护性方面的潜在问题。或者因为它们会导致性能下降，或者会导致脚本以难以解决的方式失败。Warning:标记为warning的代码表示这种写法不够好，但对Accessibility问题影响有限。可见MDN文档对Accessibility的支持非常好。但是如果我们的页面使用了SPA（单页应用），也就是页面的内容是动态生成的。然后需要等待内容加载完成，右键另存为HTML文件然后上传分析，或者直接通过开发者工具复制HTML字符串进行分析。拿下面任意一个SPA网站，直接复制该网站的HTML代码进行分析。步骤如下：当SPA页面的内容加载完成后，打开浏览器开发者工具。Tab键选择Elements，右键单击节点，然后选择Copy->CopyoutHTML。在NuHTMLchecker中选择CheckbyinNuHTMLcheckerastextinput，将刚刚复制的HTML代码粘贴到输入框中。由于不会在文案中带过来，所以我们只好加上这句话。单击检查按钮。可以发现这个页面还有很多可以优化的地方，但是错误的数量有点多到让人眼花缭乱。因此，NuHtmlChecker也提供了MessageFiltering来显示关键信息：当然，有时候我们主要是想关注这个页面的可访问性相关的结果，不想看到那么多附加信息。此时，您可以使用WCAG解析验证过滤器小书签来生成有关可访问性的信息摘要。这篇文档讲的内容其实很简单，无非就是提供了一段代码来提取无障碍信息：javascript:(function(){varfilterStrings=["tagseen","Strayendtag","Badstart标记”，“违反嵌套规则”，“重复ID”，“未封闭元素”，“不允许作为元素的子元素”，“未封闭元素”，“未加引号的属性值”，“重复属性”，“元素的后代”属性"],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(iinresultsP1){if(resultsP1.hasOwnProperty(i)){resultText=i+";"+resultText}}varstr=nT+"验证错误和警告。\n"+nP1+"可能影响可访问性的错误：\n"+resultText;console.log("%c[WCAG解析验证过滤器bookmarklet@v4]:\n","font-weight:bold","https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/\n\n"+str);alert(str)})();上面是一个自执行的JavaScript代码，源码是直接通过alert打印出信息，但是我觉得不方便复制，所以控制台在原有基础上增加了输出方式，方便信息的复制。使用方法：打开浏览器书签管理器（bookmarkmanage）。如果您使用的是chrome浏览器，请点击右上角的“添加新书签”书签自行决定。URL输入以上代码，将书签保存在NuHtmlChecker解析后的结果页面，点击新建的标签，可以看到弹出的结果。上图控制台输出信息如下：[WCAGParsingValidationFilterbookmarklet@v4]:https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/91validationerrorsandwarnings。6个可能影响可访问性的错误：在此上下文中，元素a不允许作为元素ul的子元素；在此上下文中，元素对象不允许作为元素ul的子对象；在此上下文中，元素样式不允许作为元素主体的子元素；从这个信息简报中我们可以了解到：这个页面有91个错误和警告。其中6个错误会影响可访问性。主要错误是标签嵌套不合理造成的错误。本次简报对我们希望了解的信息进行了简要概括，方便我们进行分析。
