NOTE 101 / 2022年
eslint の a11y ルールを育てる
eslint のアクセシビリティ検査を、無理なく運用に乗せる方法です。
読了目安 約2分
eslint の a11y ルールは、JSX の中で起こりやすい問題を早い段階で知らせてくれます。最初からすべてを有効にすると警告が多くなりすぎるため、まずは影響の大きいルールから始めます。
エディタと CI の両方で同じ設定を使うと、指摘のタイミングが揃います。ルールを追加した理由を残し、チームで定期的に見直すと、設定が形骸化しにくくなります。
押さえたい点
- 01影響の大きいルールから始める
- 02エディタと CI の設定を揃える
- 03追加した理由を記録する
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- MDN アクセシビリティ 外部サイトdeveloper.mozilla.org
- W3C WAI 外部サイトw3.org
- WAI ARIA APG 外部サイトw3.org
- WAI チュートリアル 外部サイトw3.org
- web.dev アクセシビリティ 外部サイトweb.dev
- アクセシビリティを学ぶ 外部サイトweb.dev
- WCAG 2.1 外部サイトw3.org
- WCAG 2.2 外部サイトw3.org
- ARIA in HTML 外部サイトw3.org
- MDN ARIA 外部サイトdeveloper.mozilla.org
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev