生成AI時代のWebアプリケーションアクセシビリティ改善

https://gyazo.com/18ddf514f1792c4bb94bc6559bcdfbf4

yamanokuのVue Fes Japan 2025発表内容まとめ

Webアクセシビリティについて

アクセシビリティについての説明

アクセシビリティに関する優位性

誰がためにアクセシビリティ対応をするのか？

Playwright MCPでの操作（アクセシビリティツリー）

最近の動向の紹介

https://webaim.org/projects/million/

https://gyazo.com/3737e7f7f878eb0ec9dcd4624c4ebe01https://gyazo.com/48e3f7974b2f362be74a9015018b56achttps://gyazo.com/e7c7d8296a9933ee2edf9210c1cac148

WebAIMの調査結果

https://almanac.httparchive.org/ja/2024/accessibility

https://gyazo.com/d8a8cd64a077acb77e937396b8478ceb

WCAG 2.2をJIS X 8341-3へ適応する予定

WCAG 2.2からの変更点についての紹介

LLMとWebアクセシビリティ改善

今回の事例に関する諸注意

2025年10月時点での調査結果

モデル性能によって必ず同一の結果が出るわけではない

アクセシビリティに気をつけてのプロンプトはどれほど有効なのか？

そもそもセマンティクスなコードを生成してくれてはいないだろうかyamanoku.icon

FeedA11yという研究の紹介

検証サイトではvue.jsのドキュメントも対象になっている

主要なAIエージェントにて検証

Claude Code

Codex（GPT）

Gemini

その上で考える「有効な」プロンプトはなんなのか？

アクセシビリティを向上させるではなく、アクセシビリティを損なわないようにする

減点方式による採用

間違ったものを実装しないようにする

間違ったWAI-ARIAを実装しないようにする

MCPサーバーによる知識挿入

なぜMCP？

公式のドキュメントは膨大

https://www.w3.org/TR/wai-aria-1.3/

コンテキスト量として多い

LLM側の改善に期待

RAGを用意できると良いが。。。

必要な要点を刻んで送るようにしてみるアプローチ

aria-validate-mcp

各Linterやコンパイラで参考にしていたaria-queryというライブラリを使用

より効果的なプロンプト、サブエージェント

Accessible Name and Description Computation

全体ページを見て確認する

Playwright MCP Serverなどでアクセシビリティツリーから確認する

ID値の扱い方にはuseId相当のものを用いるような指示を付与する

React: https://ja.react.dev/reference/react/useId

Vue.js: https://ja.vuejs.org/api/composition-api-helpers#useid

Svelte: https://svelte.jp/docs/svelte/$props#$props.id()

LLMを活用したチェック

Digital Accessibility Innovation with Axe AI | Deque Systems

Axeの関連ツール

axe Assistant

axe MCP Server

認知バイアスがかかるものこそLLMの力が必要かもしれない

こうかもしれない、という思い込みを除去する

気付けないものに気づけるようになる

Playwright Test Agentsを試してみた〜AIはテスト計画、コード生成、自動修復をどこまでできるのか？

極端な年齢（0歳、120歳）のテスト

もしかしたらハルシネーションも有用になるかもしれない

参考となる学習データに偏りがないか？

Playwright MCPでのテスト実行時の人格インストール

インクルーシブなペルソナ拡張

人間のレビューは必要

LLMの利点は、使用するユーザーと対話的に質問しながら修正を行うことができる点

完全に任せっぱなしはダメ

これはアクセシビリティだけに限らない話

Vibe Codingするにしても、内容の見直しや事象の把握は必要

どういう風にプロダクトを使ってもらうか、を考えるのは人間の仕事

アクセシビリティの学習自体も継続していくべき

アクセシビリティ成熟度モデル