持続可能なアクセシビリティ開発

持続可能なアクセシビリティ開発は「誰が書いても80%の要件を満たす状態を目指す」ことです。なぜ私たちのチームではこの目標を設定したのか、持続可能なアクセシビリティ開発を達成するためにどのようなアプローチを取っているのかについて発表します。

Transcript

1. 持続可能なアクセシビリ ティ開発 azukiazusa
2. 持続可能なアクセシビリティとは？ 誰が書いても80%の要件を満たす状態を目指す
3. アジェンダ 1. 前提条件: チーム構成とAIによる状況の変化 2. AI が書くコードのアクセシビリティについて 3. 持続可能なアクセシビリティ開発のためのアプローチ 4. まとめ
4. アジェンダ 1. 前提条件: チーム構成とAIによる状況の変化 2. AI が書くコードのアクセシビリティについて 3. 持続可能なアクセシビリティ開発のためのアプローチ 4. まとめ
5. 前提：チーム構成
6. 共有しているコンポーネントでは、すべ ての変更をコードレビューで確認するの は困難
7. • デザイナーが AI を使ってコードを書き、Pull Request を 作成している • 一般的に AI で生成されたコードは一見正しく動作するよ うに見えても、エッジケースやエラー処理が不十分なこ とが多い • AI が生成したコードはプロフェッショナルな開発者によ るコードレビューが必要なことは、よく知られている 生成 AI の普及による開発体制の変化
8. アジェンダ 1. 前提条件: チーム構成とAIによる状況の変化 2. AI が書くコードのアクセシビリティについて 3. 持続可能なアクセシビリティ開発のためのアプローチ 4. まとめ
9. AI 時代のアクセシビリティ開発 生成AI時代のWebアプリケーションアクセシビリティ改善 - やまのく（yamanoku） • Human or LLM? A Comparative Study on Accessible Code Generation Capability という論文が紹介されてい る ◦ LLM はアクセシブルなコードを書けるか？
10. LLM はアクセシブルなコードを書ける か？ • 人間が書いたコードよりも LLM が生成したコードの方が アクセシビリティ要件を満たしている割合が高かった • しかし複雑なアクセシビリティ要件、得に WAI-ARIA に まつわる実装を行わせると、LLM は誤った実装を行うこ とが多かった
11. よくある間違い 不要な aria-label で情報を上書き
12. フィードバックループの欠如 TypeScript のエラー → コンパイル時に検出できる
13. フィードバックループの欠如 誤った WAI-ARIA の使用 → コンパイルエラーが発生せず、ランタイムでも検出されない スクリーンリーダーを触って初めて誤りに気づく • LLM は「実装・フィードバック・修正」のサイクルを繰り 返すが、アクセシビリティ要件に関してはフィードバック が得られにくい
14. ここまでの話をまとめると • AI が生成したコードはアクセシビリティ要件を満たして いないことがある • アクセシブルにコードを保つには、プロフェッショナル によるレビューが不可欠 • しかし、共有コンポーネントの変更をすべてコードレ ビューで確認するのは困難
15. 誰が書いても80%の要件を満たす状態を目指す
16. 持続可能なアクセシビリティ開発のため の取り組み
17. 解決策 (1)：コンポーネントライブラリ • 標準的な UI コンポーネントをまとまった形で提供する • WCAG に準拠したアクセシビリティ対応を集中管理 • コンポーネントを利用する開発者はアクセシビリティの 実装の詳細を理解していなくても、アクセシブルな UI を 実装できる
18. タブコンポーネントの例 → role="tablist"や aria-selected, キーボード操作の実装は コンポーネント内で完結
19. • ヘッドレス UI ライブラリを使うのがおすすめ ◦ Headless UI ◦ Radix UI ◦ Ark UI ◦ React Aria • スタイルがなく、機能のみが提供されている • プロダクトのデザインに合わせた形でラップして提供 コンポーネントライブラリの実装
20. AIとの好循環 AIは既存のコードベースを調査してからコードを生成 ↓ 既に使われているコンポーネントがあれば AIも同じパターン を生成 ↓ アクセシビリティ要件を満たしやすくなる
21. ドキュメント整備 コンポーネントライブラリを作って終わりではなく、使い方を ドキュメント化し、チームをまたいで周知徹底する • Storybook でコンポーネントを一覧化 • デザイナーとも共有し Figma のコンポーネントのと揃える • デザインシステムと AI の連携も今後の課題 ◦ すでに取り組まれている方がいればぜひ教えてください
22. 解決策 (2)：ガードレール Linter やテストを導入し、LLM にフィードバックする • React: eslint-plugin-jsx-a11y
 • Vue.js: eslint-plugin-vuejs-accessibility
 • Svelte: svelte-check
 • HTML: markup-lint

23. E2Eテストでの検証 @axe-core/playwright

24. まとめ • LLM は基本的なアクセシビリティ要件を満たすコードを生成できる が、複雑な要件では誤りを犯しやすい • 持続可能なアクセシビリティ開発とは、誰がコードを書いても一定水 準のアクセシビリティ要件を満たすコードが生成される環境を構築す ること • LLM が WAI-ARIA を誤用しないようにするためには、コンポーネン トライブラリでの集中管理を行ったり、Linter やテストをガード レールとして導入することが有効