前言
在前端开发中，我们需要关注到网站的可访问性（Accessibility），即如何让所有人都可以访问网站，包括那些身体和认知受损的人群。其中，我们可以通过工具来检查网站的可访问性。
在本文中，我们将介绍一个使用 npm 包 logica11y 来进行网站可访问性检查的教程。
logica11y 简介
logica11y 是一个 npm 包，专门用于检查网站的可访问性。它可以检查一个 HTML 文件或是整个网站，然后给出一个报告，告诉我们哪些地方需要改进。
安装及使用
安装
在使用 logica11y 之前，需要通过 npm 安装该包。
--- ------- -- ---------
使用
使用时，我们需要将要检查的 HTML 文件或网站的 URL 作为参数传递给 logica11y 命令。
--------- -------------------
运行后，logica11y 会输出一个 JSON 格式的报告，告诉我们当前网站的可访问性状况。
以下是一个示例输出：
-
------ ----------------------
--------- -
-
------- ----------------------------------------------
------- --------
---------- ---- ------- ------- -- --- ---------- --- --- --- --------- -- ------- - ----- ---- --------------
---------- ----- ----------------------
----------- ----- - ---- - --- - ------------------
------- -
------- ----------
------- ------
------------ -
------ --------------
------ ----
-
--
--------- ---------
--------------- -
----------- ----------------------
-
-
-
-其中，issues 代表了网站的问题，包括错误、警告和建议等。
加深理解
在使用 logica11y 进行网站可访问性检查时，我们不仅需要知道命令使用方法，还需要了解网站的可访问性检查的知识。
检查准则
在网站的可访问性检查中，我们通常使用 Web Content Accessibility Guidelines（WCAG）作为参考标准。WCAG 包括了四个原则：
- 可感知性（perceivable）
- 可操作性（operable）
- 理解性（understandable）
- 健壮性（robust）
每个原则下有相应的准则和技术指南，例如：
- 1.1.1 非文本内容：提供所有非文本内容的文本替代品。
- 2.4.5 处理输入错误：为输入错误提供自动纠正功能。
在使用 logica11y 进行检查时，我们需要了解这些准则和技术指南，以便更好地理解输出报告中的问题和建议。
解释错误和警告
除了了解准则和技术指南之外，我们还需要了解输出报告中的错误和警告，以便更好地处理这些问题。
错误
输出报告中的错误代表了网站中的问题，需要尽快修复。
例如，在示例输出中，错误的代码为 WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2，它代表了一个缺失 alt 属性的 img 标签。如果网站缺失了大量的 alt 属性，那么可能会对那些使用屏幕阅读器的用户造成不可预测的困扰。
警告
输出报告中的警告代表了网站中的一些潜在问题，需要进行检查和修复。虽然这些问题可能不会对所有用户造成问题，但是仍然建议修复，以确保网站的可访问性和使用性。
例如，在示例输出中，警告的代码为 WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoTarget，它代表了一个存在但目标不明确的 a 标签。
总结
通过阅读本文，我们了解了 npm 包 logica11y 的使用方法，以及网站的可访问性检查的相关知识。我们可以通过 logica11y 检查网站的可访问性，同时了解网站的错误和警告，以便更好地改进网站的可访问性和使用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557e381e8991b448d4f2e