Accessibility Parsing 无障碍页面分析
最近项目需要做 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 的信息:
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
的输出方式,便于复制信息。
使用方式:
- 打开浏览器书签管理器 (bookmark manage)
- 如果使用的是 chrome 浏览器的话,在右上角点开 “Add new bookmark”
- 书签名可自己决定,URL 输入如上代码即可,保存书签
- 在 Nu Html Checker 解析后的结果页中,点击刚才新建的标签就能看到弹出来的结果了
上图 console
中输出的信息如下:
1 | [WCAG Parsing Validation Filter bookmarklet@v4]: https://labs.diginclusion.com/tools/bookmarklets/wcag-parsing-filter/ |
从这份信息简报我们可以了解到:这个 page 有 91 个 errors
和 warnings
。其中有 6 份错误会影响 accessibility。主要的错误是因为不合理的标签嵌套所引起的错误。这份简报就已经将我们所期望了解的信息都简短的概括了出,便于我们分析。