アクセシビリティのレビューを仕組み化してコストを下げる
プルリクエストとコードレビューで開発を加速させるLT会 #発表資料
自己紹介
やぎたと申します ygkn.icon
Webフロントエンド（= WebとGUI）が好きです
「少女☆歌劇　レビューレヴュースタァライト（劇場版がリバイバル上映中！）」も好きです
（Web）アクセシビリティとは？
https://gyazo.com/87e6a5da9e4aa46d358f93c848e3b15f
https://gyazo.com/48880d0a6eee76848b09284708d55fd9
ユーザビリティとアクセシビリティの関係性
伊原 力也,小林 大輔,桝田 草一,山本 伶. Webアプリケーションアクセシビリティ──今日から始める現場からの改善 WEB+DB PRESS plus (p.30). Kindle 版.
レビュー観点としてのアクセシビリティ
「アクセシビリティが担保されているかどうか」をレビューするのは難しい
基準やスコープなど、方針が決まっているプロジェクトは良いけど…
アクセシビリティの方針はふんわりしてるけど最低限できることはしたい！
アクセシビリティは知識によってかなり差が出る（＝属人化しやすい）
仕組み化しよう！
チェックツール
フロントエンドの開発工程のレビューに組み込みやすいものを紹介
要件定義、設計、テスト段階でも（また別の方法で）アクセシビリティの考慮は必要
例
axe-core ファミリー
Lighthouse https://developer.chrome.com/docs/lighthouse/overview
アクセシビリティの問題を発見できる
axe Accessibility Linter https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
アクセシビリティの問題を発見できる
@storybook/addon-a11y https://storybook.js.org/addons/@storybook/addon-a11y
アクセシビリティの問題を発見できる
vitest-axe
アクセシビリティの問題を発見できる
axe-playwright
アクセシビリティの問題を発見できる
Biome
アクセシビリティの問題を発見できる
eslint-plugin-jsx-a11y
アクセシビリティの問題を発見できる
Markuplint
アクセシビリティの問題を発見できる
「全部同じじゃないですか！？」
チェック環境の違い：静的解析（実行しない）、jsdom、ブラウザテスト
スコープの違い：ファイル、コンポーネント、ページ
実行方法
Testing Throphy に重ね合わせて考えてみる
ちょうど静的テスト、ユニットテスト、E2Eテスト（と一般に言われるやつ）と一緒
チェックツール
axe-core ファミリー
Lighthouse https://developer.chrome.com/docs/lighthouse/overview
ブラウザ上で動く
ページ単位
開発者ツール、CLI、CIとして実行可能
axe Accessibility Linter https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
静的解析
ファイル単位
VS Code 拡張機能
@storybook/addon-a11y https://storybook.js.org/addons/@storybook/addon-a11y
ブラウザ上で動く
コンポーネント単位
Storybook のアドオンとして動く
vitest-axe https://github.com/chaance/vitest-axe
jsdom 上で動く
テストケース上で実行
axe-playwright https://github.com/abhinaba-ghosh/axe-playwright
ヘッドレスブラウザ上で動く
ページ単位
CLI、CIとして実行
Biome https://biomejs.dev/ eslint-plugin-jsx-a11y https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
github/axe-linter vs eslint-plugin-jsx-a11y · Issue #3740 · dequelabs/axe-core · GitHub
静的解析
ファイル単位
CLIやエディタ拡張機能などで実行
Markuplint https://markuplint.dev/ja/
静的解析
ファイル単位
CLIやエディタ拡張機能などで実行
テストを活用
テストフレームワークのインタラクションテスト、アサーション
@testing-library/dom（@storybook/test）、Playwright、
getByRole などを使うようにする
実際にどう動くのか？
デモでも…
https://ygkn.github.io/not-accessible-todo-list/
/icons/github.icon ygkn/not-accessible-todo-list
チェックツールがあればOK？
総務省から提供されているmiCheckerやDeque Systemsがオープンソースで公開してい
る axe-coreなどウェブアクセシビリティのチェックツールがありますが、確認できるのは達
成基準の 2割から 3割程度にとどまります。また、チェックツールによっては開発から時間
も経過し、最新のウェブテクノロジーを採用して実装されたページのテストが困難な場合も
あります。このため、試験は必ず人が目視による確認やキーボードのみの操作、スクリーン
リーダーなどの支援技術を用いた確認をする必要があります。
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
例えば…
alt が「画像」「image.jpeg」、更新忘れ
2重のoutline
フォーカスの順番、見出し構造、マークアップと意味の相違
まとめ
チェックツールやテストツールを使うとアクセシビリティの問題発見を仕組み化できる
ツールにはそれぞれ特性があるので、フローにあったものを使おう
チェックツールで気付けない問題もあるので、レビュー時はそれらを意識する
参考
書籍『Webアプリケーションアクセシビリティ』 https://webapp-a11y.com/
ウェブアクセシビリティ導入ガイドブック｜デジタル庁 https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/