アクセシビリティツリー とは？

DOMツリーから派生して作られる「もう一つのツリー」だよ。DOMは見た目のレイアウトも含む全部の情報を持つけど、アクセシビリティツリーは支援技術が必要とする「意味」の情報だけに絞り込んだものなんだ。装飾用のdivやspan、aria-hidden="true"の要素はここから除外されるよ

各ノードには4つの主要プロパティがあるよ。role（ボタン、リンク、見出しなどの役割）、name（「送信」「メニューを開く」などの名前）、state（展開中、選択済みなどの状態）、value（スライダーの値など）。スクリーンリーダーはこの情報をもとに読み上げるんだ

そうだよ。buttonタグは自動でrole="button"になるし、h1はrole="heading"になる。これを暗黙のロールと言うんだ。だからセマンティックなHTMLを書くことが、アクセシビリティツリーを正しくする最短ルートなんだよ

Chrome DevToolsの「要素」パネルで要素を選択すると、右側に「アクセシビリティ」タブがあるよ。そこでその要素のrole、name、stateが確認できる。さらにDevToolsの実験的機能で「フルページアクセシビリティツリー」を有効にすると、DOMツリーの代わりにアクセシビリティツリー全体を表示できるんだ

スクリーンリーダーが間違った情報を読み上げてしまうよ。たとえばdivでボタンを作ると、アクセシビリティツリーではroleが「generic」になって、ユーザーは「ここがクリックできる」と分からない。nameが空だと「ボタン」とだけ読み上げられて何のボタンか分からない。テストのときはアクセシビリティツリーを確認する習慣をつけるのが大事だね