简介
在 Web 开发过程中，许多用户使用辅助技术（如屏幕阅读器，放大工具等）来帮助他们使用网站。因此，Web 无障碍已经成为开发者必须考虑的一项关键问题。@storybook/addon-a11y 是一个 Storybook 的 add-on，可以帮助你检测Web应用程序的可访问性。但如果你使用 TypeScript 进行开发的话，那么 @storybook/addon-a11y 将无法正常工作。在这篇文章中，我们将介绍如何使用 @types/storybook__addon-a11y 对 TypeScript 的 Storybook 应用进行缺陷发现。
安装
要使用 @types/storybook__addon-a11y，你需要以下软件包：
Node.js（8.3.0 或更高版本）
TypeScript（3.8.0 或更高版本）
Storybook （5.2.8 或更高版本）
然后，可以通过 yarn 或 npm 安装 @typescript和 @storybook 的相应依赖：
yarn add @types/storybook__addon-a11y --dev
或
npm install @types/storybook__addon-a11y --save-dev
使用
- 启用 addon-a11y
你需要将 addon-a11y 添加到 Storybook 配置中。在 .storybook/main.js 文件中添加以下代码：
-------------- - - ------- -------------------------- -
- 在组件上添加 Storybook 的参数 @a11y
现在，你可以通过为 Storybook 组件添加 Storybook 参数 @a11y 来启用 a11y 自动检测。通过将参数添加到组件的故事上，Storybook 会在组件渲染后对其进行检查，并向开发者报告任何可访问性问题。
------ - ------ ---- - ---- -------------------
------ --------- - ------------- - ---- -------------
------ ------- -
------ -----------------
---------- ---------
--------- -
---------------- - -------- ------- --
----- -
-------- - ------- ---- --
--
--
- -- -----
----- --------- -------------------- - ------ -- --------- --------- ---
------ ----- ------- - ------------------
------------ - -
-------- -----
------ ---------
--
------------------ - - ----- - ------- -- - --
------ ----- --------- - ------------------
-------------- - -
------ ---------
--
-------------------- - - ----- - ------- -- - --这里的 a11y 配置选项为 manual: true，这意味着我们必须为每个组件手动运行 a11y 检查。这是因为如果在 stories 文件中使用默认配置，可能会捕获无关紧要的，模版式的信息，使报告难以解读。
- 运行 a11y 检查
现在，你可以使用以下命令在 Storybook 中运行 a11y 检查：
---- --------- ------
这将为 Storybook 中的所有组件运行 a11y 检查。
如果你只想检查某个特定的组件，可以通过传递故事的名称来限制检查的范围:
---- --------- ------ ----------------------
这将只检查 Example/Button 的故事。
总结
@storybook/addon-a11y 是一个强大的工具，可以帮助你发现并解决你在 Web 应用程序中遇到的许多可访问性问题。但在使用 TypeScript 的情况下，我们需要使用 @types/storybook__addon-a11y 来对 Storybook 进行 TypeScript 兼容性处理。我希望本文可以帮助你更好地理解在 TypeScrip-based Storybook 应用程序中使用 add-on-a11y 的流程，以及如何在 Web 开发中确保你的应用程序对所有用户都尽可能可访问。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc216b5cbfe1ea0612023