简介
axs 是一个基于原生 JavaScript 的无障碍检测库，它可以检测你的网页是否可以被视觉障碍人士所使用。它提供了一些工具来检测无障碍性问题，比如：
- 检查是否存在不正确的 HTML 结构
- 检查图像是否包含代替的文本描述
- 检查是否使用了正确的颜色对比度
- 检查键盘焦点是否可以导航到元素上等等
安装
你可以使用 npm 来安装 axs 包。执行以下命令：
npm install axs
使用
安装后，你可以通过引入 axs 包来使用它的功能。
import axs from 'axs'; axs.run();
如果你想检测某个页面的无障碍性问题，你可以指定你的页面元素，像这样：
import axs from 'axs';
let element = document.querySelector('.page');
axs.audit(element);这个函数会检查 .page 元素及其子元素的无障碍性问题，并返回一个 JSON 对象来描述问题。你可以自定义规则或者禁用某些规则，像这样：
-- -------------------- ---- -------
------ --- ---- ------
--- ------ - -
------ -
------------ - -------- ----- --
----------------- - -------- ----- -------- - ------ --- - --
--
--
------------------- --------这里禁用了 'has-label' 规则，启用了 'color-contrast' 规则并指定了颜色对比度的最小比例。
你也可以使用 axs 的其他功能，如寻找焦点，获取线程树和事件树等等。你可以查看官方文档来了解更多信息。
示例
下面是一个简单的示例，演示如何使用 axs 检查一个页面的无障碍性问题。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------- ------------
-------
------
----------------- ---------
-----
----
------ ----------------------
------ --------------------------
------ -------------- -----------
------ ---------------- -----------
-----
------
---- ------- ------------ ------ --
---------
----------- ------
------- ---------
----------
---------
----------- ------
------- ----- ---------
------------- -----------
----------
--------
--------- ---- ------- -----------
---------
------- --------------
------ --- ---- ------
----------
--------------------
---------
-------
-------这个页面包含一些导航链接、一张图片、两个段落和一个按钮。你可以在浏览器控制台查看 axs 返回的 JSON 对象，来了解这个页面的无障碍性问题。
总结
无障碍性是一个重要的问题，对于每个网站和应用程序都是必须考虑的。axs 是一个很好的工具，可以帮你检测无障碍性问题，并提供一些有用的建议来解决这些问题。如果你是一个开发人员，你应该考虑使用 axs 来检查你的项目的无障碍性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6c6847a9b7065299ccb94a