アクセシビリティツリー[AOM]について調べてみた
アクセシビリティツリー(AOM)
アクセシビリティツリー（またはアクセシビリティオブジェクトモデル（AOM））は、多くの HTML 要素におけるアクセシビリティに関する情報を含んでいます。
ブラウザーはHTMLをDOM（ドキュメントオブジェクトモデル）と呼ばれる内部表現に変換します。そしてCSSからCSSOM（CSSオブジェクトモデル）を生成し、この2つのオブジェクトモデルを組み合わせ、そこから画面に描画するためのレンダリングツリーやアクセシビリティオブジェクトモデル（AOM）を生成します。
アクセシビリティツリーは、スクリーンリーダーなどの支援技術のために、プラットフォームに特有のアクセシビリティAPIから使用されます。
アクセシビリティツリーの確認方法
Chromeの開発者ツールにてアクセシビリティツリー確認することができます。
アクセシビリティタブをクリックすると・・・
「ユーザー補助ツリー」箇所に「アクセシビリティツリーの全ページ表示を有効にする」（またはEnable full-page accessibility tree）というチェックボックスが出てくるのでチェックを入れる。
リロードし直すとアクセシビリティアイコンが表示されるようになるので、クリックすると・・・
開発者ツール上でアクセシビリティツリーを確認することができるようになる。
アクセシビリティツリーオブジェクト
アクセシビリティツリーオブジェクトの中には、以下の4つのものがあります。
name
どのように参照することができるか。
例えば、「Read more」というテキストを持ったリンクは「Read more」という名前を持つ。
(名前がどのように計算されるかの詳細については Accessible Name and Description Computation specを参照)
description
名前に何かを追加したいとすれば、その要素をどのように説明するか。
例えば表の説明であれば、その表が提供する情報の種類が何かを説明することができる。
role
どのような種類のものなのか。（例えば、ボタンなのか、ナビゲーションバーなのか、アイテムのリストなのかなど）
state
状態があるかどうか。（例えばチェックボックスではチェック済みまたは未チェックかどうかや、<summary> 要素では折り畳み状態か展開状態か、など。）
WAI-ARIA
アクセシビリティオブジェクトモデルはさまざまなプロパティを持っており、WAI-ARIAにはアクセシビリティツリーオブジェクトモデルに対応したプロパティがあります。
Nameプロパティ
オブジェクトの名前。「追加」というテキストノードを持つボタンの名前は「追加」となる。
そのほかlabel要素で関連づけられたinput要素も、関連づけられたテキストの名前を持つ。
WAI-ARIAには、直接Nameプロパティを与えるaria-label属性や、参照するテキストコンテンツを指定できるaria-labelledby属性がある。
Roleプロパティ
オブジェクトの役割（ロール）。
オブジェクトの役割によって支援技術はユーザーに操作を提示したり、サポートしたりできる。
たとえばRoleプロパティがbuttonであればクリック可能であることを伝える。
HTML要素にはそれぞれ割り当てられているが、CSSのスタイル次第で変更される可能性がある。WAI-ARIAではRole属性で指定できる。
Descriptionプロパティ
オブジェクトの説明。
Nameプロパティより詳細なオブジェクトの説明を付与する。
HTMLではtitle属性で付与される。WAI-ARIAではaria-describedby属性を用いて説明文を参照する。
また、直接Descriptionプロパティに追加可能なaria-description属性も次のWAI-ARIAの仕様で検討されている。
Expandedプロパティ
オブジェクトが展開されているかどうかを表す状態プロパティ。
WAI-ARIAではaria-expanded属性で指定できる。
参考文献
Discussion