随着现代 web 应用的发展，Web 可访问性（Web Accessibility，缩写为 a11y）也变得越来越重要。但是，测试 Web 可访问性是一项复杂的任务，尤其是对于那些没有相关经验的前端工程师。Fortunately，我们可以使用 npm 包 @nlabs/storybook-addon-a11y 来方便地测试我们的组件是否符合 Web 可访问性标准。
在本篇文章中，我们将介绍如何使用 @nlabs/storybook-addon-a11y，并给出一些示例代码来帮助您更好地理解。
安装
首先，我们需要在我们的项目中安装 @nlabs/storybook-addon-a11y，可以使用以下命令：
npm install --save-dev @nlabs/storybook-addon-a11y
当然，还需要在您的项目中安装 Storybook 和 addon-docs，如果您还没有安装 Storybook 和 addon-docs，请先将它们安装，可以使用以下命令：
npm i -D @storybook/cli@6.0.0-alpha.6 npx sb init --type vue npm install --save-dev @storybook/addon-docs
使用
一旦安装完成，我们可以为 Storybook 添加 @nlabs/storybook-addon-a11y：
// .storybook/main.js
module.exports = {
addons: ['@storybook/addon-docs', '@nlabs/storybook-addon-a11y'],
};然后在 Storybook 的配置文件中，如下所示：
// .storybook/preview.js
import { withA11y } from '@nlabs/storybook-addon-a11y';
export const decorators = [withA11y];我们还需要在终端中启动 Storybook，使用以下命令：
npm run storybook
这样，您就可以通过 Storybook 中的 A11y 面板来分析您的组件是否符合 Web 可访问性标准了。
您可以在 A11y 面板中看到每个组件的概要信息，以及与 Web 可访问性标准相关的问题、建议和警告。例如，在以下示例代码中：
-- -------------------- ---- -------
----------
------- ---------------------- ------------------- ---- -----------
-----------
--------
------ ------- -
------ -
----- -
----- -------
-------- -------
--
----------- -
----- --------
-------- ------
--
--
-------- -
--------- -
------------------ ---------
--
--
--
---------假设我们想要测试这个组件的 Web 可访问性。首先，我们需要在 Storybook 中展示该组件的文档：
-- -------------------- ---- -------
-- -----------------
------ ------- -
------ ---------
---------- -------
--------- -
----- - -------- ------ --
----------- - -------- --------- --
--
--
----- -------- - ------ - -------- -- -- --
------ ----------------------
----------- - ------ --
--------- -------- ------------ ------------------------- ----
---
------ ----- ------- - ------------------
------------ - -
----- ---------
----------- ------
--
------------------ - -
----- -
------------ -
---------- -- ------ ------ -----------
--
--
--现在，我们可以在 A11y 面板中分析此组件的 Web 可访问性：
我们可以看到，我们的按钮组件存在 2 个 Web 可访问性问题：按钮标记缺少与文本相关的说明，按钮上的文字颜色可能会导致不可读的对比度比。
为了修复这些问题，我们可以在我们的组件中添加 aria-label：
<template>
<button :disabled="isDisabled" @click="onClick" :aria-label="text">{{ text }}</button>
</template>同时，我们也可以使用 eslint-plugin-vue-a11y 确保所有设置 :aria-label 的按钮均添加了文本描述。
现在，我们再次运行 Storybook 并在 A11y 面板中分析此组件的 Web 可访问性：
可以看到问题已经被解决了。
结论
在本篇文章中，我们介绍了如何使用 npm 包 @nlabs/storybook-addon-a11y 来测试我们的组件是否符合 Web 可访问性标准。我们提供了详细的安装和使用说明，并提供了一些示例代码，以帮助您了解这个工具的使用方式。
在未来的 Web 开发中，Web 可访问性将变得越来越重要，使用 @nlabs/storybook-addon-a11y 可以帮助我们更方便地测试和优化我们的组件，提高我们的工作效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e67e0