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

https://gyazo.com/18ddf514f1792c4bb94bc6559bcdfbf4

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

きっかけ：これまでの登壇の最新アップデートみたいなのをやりたい＆Vue Fes参加者へのアクセシビリティについてトークをしたい

概要

本セッションでは、Webアプリケーションのアクセシビリティを改善していくために2025年10月時点での生成AI技術を活用したVue.js / Nuxtによる開発だけに限らない汎用的な改善手法についてを紹介します。

このセッションを聴いて明日から使える具体的なツール選定の勘所と思考のフレームワークと具体的なアクションプランを提示します。

誰もが使えるプロダクトを届けるため、すべての開発者へ新たな武器となる活用を一緒に探求していきます。

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

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

あとで出てくるワードについてを先にさらっておく

WCAG

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

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

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

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

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

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

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

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

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

生成AIでのアクセシビリティ改善への期待について

どういうモチベーションがあったのか？

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

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

FeedA11yという研究の紹介

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

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

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

減点方式による採用

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

間違った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するにしても、内容の見直しや事象の把握は必要

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

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

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

結論、Howとしてどう行うかをまとめる

明日から使える具体的なツール選定の勘所と思考のフレームワークと具体的なアクションプランを提示します。

ツール

RAG

MCP

思考

ReAct（プロンプト）

アクションプラン