SPAにおける `` 要素の真実：ただの「枠」と捉えると痛い目を見る理由
フロントエンドの現場で、「とりあえずコンテンツを囲むから `` を置いておこう」と深く考えずに実装している人はいないだろうか。
確かに、HTML仕様書には「`` はドキュメントの主要なコンテンツを表す」と書かれている。しかし、ReactやVue、Next.jsといったSPA（シングルページアプリケーション）全盛の今、「ページ遷移」の概念が物理的に存在しないこの環境下で `` をどう扱うかは、単なるマークアップの問題を超え、アクセシビリティ（A11y）における死活問題になる。
今日は、シニアエンジニアの視点から「SPAにおける `` の正しい配置とフォーカス管理」について、泥臭い知見を共有したいと思う。
—
1. なぜSPAで `` の配置が問題になるのか
従来のMPA（マルチページアプリケーション）であれば、ページ遷移のたびにブラウザはHTMLを再読み込みし、フォーカスは自動的にページトップへ戻る。しかし、SPAはDOMを書き換えるだけだ。
ここで問題になるのが、「スクリーンリーダーがどこを主要コンテンツと認識するか」という点である。
ユーザーがリンクをクリックして「ページ」が切り替わったとき、視覚的には新しいコンテンツが表示されていても、スクリーンリーダーのフォーカスはナビゲーションエリア（`
コメント