アクセシビリティツリーを整えると、人だけでなくAIエージェントにも理解・操作しやすいサイトになる

どんな問題を解決するか / いつ使うか

ブラウザを操作するAIエージェントや、ページを読み取るAIが増えている。見た目だけで作られたUI（div にクリック処理を付けただけのボタンなど）は、スクリーンリーダーにもAIにも何の部品か伝わらない。新しくUIを作るとき、エージェントにUIを作らせるときのルールに。

やり方（基本のチェック）

• ボタンは <button>、リンクは <a href>、見出しは <h1>〜<h6> を使う。
• フォーム部品には <label> を結びつける。アイコンだけのボタンには aria-label を付ける。
• ページの区切りに <header> <nav> <main> <footer> などのランドマークを使う。
• 開閉する部品には状態を出す（<details> や <dialog> を使う、または aria-expanded）。
• ブラウザの開発者ツールのアクセシビリティパネルで、ツリーに名前と役割が出ているか確認する。
• ルールファイルに「UIはセマンティックなHTMLで作り、操作できる要素には名前を付ける」と書いておく。

注意点

• 「誰でも使える」は「AIにも使える」。アクセシビリティ対応を、AIのためだけに後付けする必要はない。
• 確保できたからといって使いやすいとは限らない。分かりにくさは別に見直す。
• 参考記事：「誰でも使える」は「AIにも使える」（Web担当者Forum）webtan.impress.co.jp

出典

• 投稿者: @seikei_kin
• 投稿: @seikei_kin · 2026-10-15
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）