【アクセシビリティツリー】
アクセシビリティツリー とは？
最終更新:
💡 要素の役割や名前を支援技術へ伝えるツリー
ブラウザがDOMなどをもとに作る、支援技術に伝えるためのツリー構造。要素の役割・名前・状態などを表し、プラットフォームのアクセシビリティAPIを通じてスクリーンリーダーなどに利用される。
📌 このページのポイント
ペンギン先生 
ひよこ どんな情報が入っているの？
ペンギン先生 ひよこ 画面に見えるものが全部入るの？
ペンギン先生 たとえばaria-hidden="true"を付けた装飾は、画面には見えていてもアクセシビリティツリーから除外されるよ。逆にdivやspanというタグだけで、その内容まで必ず消えるわけではない。タグ名だけで判断しないことが大切なんだ。
ひよこ ボタンの中の飾りも読み上げられる？
ペンギン先生 図の例では、送信ボタンに付けた星をaria-hidden="true"で除外し、名前を「送信」にするよ。ボタン自体やフォーカスできる要素を隠すために使う属性ではないんだ。必要な意味を伝えながら、重複した飾りを省く使い方だね。
ひよこ ツリーを確認する方法はある？
📖 おまけ：英語の意味
「Accessibility Tree」 ＝ アクセシビリティのためのツリー構造
💬 Accessibilityは利用しやすさ、Treeは木構造のこと。要素の役割などを親子関係のある構造で表し、支援技術が利用できるようにするんだ。