【実務・中級編】セクション要素とARIAランドマークロールの対応 – HTML実践ガイド

「セマンティックなマークアップをしましょう」という教えは、耳にタコができるほど聞かされたはずです。しかし、なぜそれが重要なのか、そしてブラウザが裏側でどうやってスクリーンリーダーに情報を伝えているのか——この「本質的な仕組み」を理解しているエンジニアは意外と少ない。

今日は、セクション要素とARIAランドマークロールの密接な関係について、現場の知見を交えて深掘りしていきましょう。

—

1. ブラウザが裏側でやっていること：アクセシビリティツリーの正体

HTMLタグを記述した瞬間、ブラウザはDOMツリーとは別に「アクセシビリティツリー（Accessibility Tree）」というデータ構造を構築します。

例えば、`