DOMツリーとスクリーン・リーダー

スクリーン・リーダーがWebページを読み上げる際、DOMツリーに出現する順序（HTMLの記述順序）に従ってコンテンツを読み上げます。そのため、仮に画面上では隣接した位置に表示されているものであっても、DOMツリー上で離れた位置にあると、スクリーン・リーダーのユーザーにとっては見つけづらい、認知しづらいものになってしまいます。

静的なページの場合は、HTMLの記述順序に気を付ければ良いのですが、ユーザーの操作に応じてコンテンツが増減するようなページにおいては、どのようにDOMツリーを構成するのかという点について注意が必要です。

しばしば見られる問題のある事例として、モーダル・ダイアログの表示を挙げることができます。

表示されるモーダル・ダイアログの実体である要素が、DOMツリーの末尾など、その表示をトリガーしたボタンなどとDOMツリー上で離れた場所に挿入されると、スクリーン・リーダーのユーザーがその表示に気づかない可能性が高くなります。

理想的には、モーダル・ダイアログの表示時にはそのダイアログの内容以外のコンテンツをaria-hidden属性を使うなどの方法でスクリーン・リーダーから隠蔽するべきです。ただ、既存のコンテンツに対してこのような変更をするのは容易でないことも多いので、ダイアログの内容と、その裏側の内容の両方がスクリーン・リーダーから見えているいる状態になることはよくあります。この際、そのダイアログの内容が、DOMツリー上でそのダイアログの表示をトリガーするボタンの直後にあれば、スクリーン・リーダーのユーザーも容易にその存在に気づくことができ、内容を確認することができます。

開閉できるメニューやアコーディオンなども、同様の問題を引き起こしがちです。

関連ガイドライン項目