惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Hacker News: Ask HN
Hacker News: Ask HN
N
News and Events Feed by Topic
Forbes - Security
Forbes - Security
The Last Watchdog
The Last Watchdog
TaoSecurity Blog
TaoSecurity Blog
Schneier on Security
Schneier on Security
SecWiki News
SecWiki News
V
Vulnerabilities – Threatpost
Project Zero
Project Zero
O
OpenAI News
W
WeLiveSecurity
Security Archives - TechRepublic
Security Archives - TechRepublic
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
H
Hacker News: Front Page
Cisco Talos Blog
Cisco Talos Blog
Spread Privacy
Spread Privacy
Help Net Security
Help Net Security
P
Privacy & Cybersecurity Law Blog
K
Kaspersky official blog
S
Security @ Cisco Blogs
Latest news
Latest news
AWS News Blog
AWS News Blog
U
Unit 42
Martin Fowler
Martin Fowler
阮一峰的网络日志
阮一峰的网络日志
S
Secure Thoughts
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Know Your Adversary
Know Your Adversary
Scott Helme
Scott Helme
博客园 - 司徒正美
B
Blog RSS Feed
C
Check Point Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
D
Docker
Google Online Security Blog
Google Online Security Blog
Jina AI
Jina AI
aimingoo的专栏
aimingoo的专栏
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Last Week in AI
Last Week in AI
月光博客
月光博客
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
SegmentFault 最新的问题
NISL@THU
NISL@THU
T
The Blog of Author Tim Ferriss
C
Cisco Blogs
Attack and Defense Labs
Attack and Defense Labs
小众软件
小众软件

Anran758's blog

Promise 与异步编程 数据结构实践 MySQL 实践 组件通信: EventBus 的原理解析与应用 Redux 食用指南 计算机网络原理笔记 软件工程笔记 JavaScript 实现二叉树 闭包与链式设计的使用示例 React 知识回顾 (优化篇) React 知识回顾 (使用篇) Hexo 常见问题解决方案 React vs Vue webpack + Travis CI 自动部署项目应用 从零构建 webpack 脚手架(基础篇) Flexbox 布局实际用例 Flexbox 布局入门 Hexo blog 的升级与同步方案 将 JSON 数据格式输出至页面上
Accessibility Parsing 无障碍页面分析
本文作者: anran758 · 2021-04-13 · via Anran758's blog

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


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

MDN 文档 为例:

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

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

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

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

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

  1. 当 SPA page 的内容加载完毕后,打开浏览器开发者工具。
  2. Tab 选择 Elements, 右键 <html> 节点,选择 Copy -> Copy outHTML
  3. 将 Nu HTML checker 中的 Check by 选为 text input, 在 input 框粘贴刚才 copy 的 HTML code。
  4. 由于 copy 中不会把 <!DOCTYPE html> 带过来,因此我们还得加上这句。
  5. 点击 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 的输出方式,便于复制信息。

使用方式

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

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

1
2
3
4
5
[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 个 errorswarnings。其中有 6 份错误会影响 accessibility。主要的错误是因为不合理的标签嵌套所引起的错误。这份简报就已经将我们所期望了解的信息都简短的概括了出,便于我们分析。