Skip to main content

React - Accessibility Tools

plugins​

eslint-plugin-jsx-a11y​

在開發工作流程中加上 eslint 檢查工具，例如: eslint-plugin-jsx-a11y

支援規則列表

//.eslintrc.json
{
  // 可以設定為 recommended 模式(也可以設定為 strict 模式)
  "extends": ["plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"],
  // 可以詳細設定規則
  "rules": {
    "jsx-a11y/alt-text": "warn"
  }
}

@axe-core/react​

在開發過程中，可以將 accessibility 的問題紀錄顯示在開發工具的 console 中

npm install --save-dev @axe-core/react
// 在index.js中要進行初始化
import React from "react";
import ReactDOM from "react-dom";

if (process.env.NODE_ENV !== "production") {
  const axe = require("@axe-core/react");
  //
  axe(React, ReactDOM, 1000);
}

jest-axe​

可使用 jest-axe 搭配 react-testing-library 進行測試

import React from "react";
import { render } from "@testing-library/react";
import { axe, toHaveNoViolations } from "jest-axe";

import Login from "../Login";

expect.extend(toHaveNoViolations);

it("should not violate accessibility rules", async () => {
  const { container } = render(<Login history={{ push: jest.fn() }} />);

  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

cypress-axe​

可使用 cypress 搭配 cypress-axe 進行無障礙測試

beforeEach(() => {
  cy.visit("http://localhost:3000/login");
  cy.injectAxe();
});

describe("Login page", () => {
  it("should not violate accessibility rules", () => {
    cy.checkA11y();
  });

  it("has no accessibility violations when Login button clicked", () => {
    cy.get("button#login-button").click();
    cy.checkA11y();
  });
});

參考資料​