为React应用提供自动可及性检查的工具

xcvxvxc
227 阅读3分钟

测试应用程序的可访问性是经常被遗忘的事情。这篇文章涵盖了几个为React应用提供自动可及性检查的工具。

Automated React Accessibility Checks eslint-plugin-jsx-a11y

第一个工具是一个ESLint插件，叫做 eslint-plugin-jsx-a11y.

要安装可访问性插件，请在终端运行以下命令：

npm install eslint-plugin-jsx-a11y --save-dev

我们告诉ESLint使用无障碍插件及其在ESLint配置文件中的推荐规则，具体如下：

{
  ...,
  "plugins": [..., "jsx-a11y"],
  "extends": [..., "plugin:jsx-a11y/recommended"],
  ...
}

如果你使用Visual Studio Code和ESLint扩展，可访问性问题将被突出显示，如下面的屏幕截图所示：

ESLint error 在上面的例子中，eslint-plugin-jsx-a11y ，发现一个表单字段的label 和input 元素没有关联。这意味着，当input 获得焦点时，屏幕阅读器将无法读出标签。

这个ESLint插件的伟大之处在于它能在你写代码时捕捉到可访问性问题。这意味着解决检测到的可及性问题的成本很低。 😊

jest-axe

我们要看的第二个工具是一个名为jest-axe 的Jest插件。要安装这个及其TypeScript类型，在终端运行以下命令：

npm install --save-dev jest-axe @types/jest-axe

我们可以使用jest-axe 来实现一个检查可访问性的组件测试。

在测试文件中，我们首先从jest-axe 中导入以下内容：

import { axe, toHaveNoViolations } from 'jest-axe';

axe 将检查组件的DOM结构，而 是一个Jest匹配器，如果 发现可访问性问题，则测试失败。toHaveNoViolations axe

在导入之后，我们还要让Jest知道toHaveNoViolations 匹配器：

expect.extend(toHaveNoViolations);

然后我们可以用React测试库写一个组件测试，如下所示：

test('Should not violate accessibility rules', async () => {
  const { container } = render(<Form1 />);
  expect(await axe(container)).toHaveNoViolations();});

运行该测试会捕捉到与ESLint插件捕捉到的相同的可访问性问题：

Jest error

在组件测试中进行可及性检查的好处是，你可以与组件进行交互，使其在进行检查之前处于一个特定的状态。因此，例如，可访问性可以在表单提交后被检查：

test('Should not violate accessibility rules when invalid form submitted', async () => {
  const { container } = render(<Form2 />);
  userEvent.click(screen.getByText('Submit'));
  await screen.findByText('You must enter your name');
  expect(await axe(container)).toHaveNoViolations();
});

很好 😊

这些并不能保证你的应用程序是完全无障碍的

考虑一下下面的表单：

export function Form2() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input id="name" type="text" {...register('name', { required: true })} />
      {errors.name && <div>You must enter your name</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

字段label 和input 元素是关联的，ESLint和Jest插件没有报告任何可访问性问题。

不过，这个表单的可访问性是可以改进的。例如，屏幕阅读器不会让用户知道这个字段是否无效，也不会读出验证错误信息。😞

不过这些工具是值得的，它确实能抓住一些问题。而且，设置这两个工具并使用它们的成本很低。

请看下一篇文章，学习如何使上述表格更容易被访问：

这个例子项目在我的GitHub上

avatar
文章
阅读
粉丝