アクセシビリティツリー：スクリーンリーダーが読み上げる内容

ブラウザーはDOMを、アクセシビリティツリーと呼ばれる別の構造に変換します。これは支援技術が実際に読み取るバージョンです。

アクセシビリティツリーはHTMLから直接構築されます。適切なセマンティクスからは豊かなツリーが生まれ、divスープからは空っぽで役に立たないツリーが生まれます。

各ノードには、それが何であるかを示す役割があります。たとえばbutton、heading、link、listなどです。本物のボタンなら、何もしなくてもbuttonの役割が設定されます。

すべてのノードには、スクリーンリーダーが読み上げるテキストであるアクセシブルな名前もあります。ボタンの場合、通常は内部に表示されるラベルが名前になります。

インタラクティブなノードは、checked、expanded、disabledのような状態も公開します。これにより、ボックスがすでにオンになっていることをユーザーが聞き取れます。

つまり各ノードは、役割、名前、状態、値に集約できます。この小さな情報のまとまりが、スクリーンリーダーが要素を読み上げるために必要なすべてです。

display noneやaria-hiddenで隠されたものは、ツリーから除外されます。ツリーに存在しなければ、スクリーンリーダーはそこへ到達できません。

色やサイズなどの視覚的なスタイルは、アクセシビリティツリーには入りません。スクリーンリーダーのユーザーに伝わるのは、レイアウトではなく意味と構造です。

クリック可能なdivは、役割も名前もない汎用ノードとしてツリーに入ります。ボタンのように見えても、ユーザーには役立つ情報が何も聞こえません。

ブラウザーのDevToolsでは、任意の要素の実際のアクセシビリティツリーを確認できます。スクリーンリーダーが実際に何を読み上げるかを確認する最も速い方法です。

大切な教訓は、マークアップがツリーの元になるということです。HTMLを直せばツリーも自動的に直るため、追加の修正処理は必要ありません。

アクセシビリティツリーは、DOMを役割、名前、状態、値に整理したものです。マークアップを直せばツリーもそれに従います。隠されたものは除外されます。🎉