<aside> 要素はトップレベルに配置すべきか問題

投稿

最近、<aside> 要素の配置場所、すなわちトップレベルであるべきかどうかの議論がふたたび盛り上がっています。

HTML 仕様では <aside> 要素は他のランドマークの中にも配置できるのですが、そのデフォルトロールである complementary ロール(W3C)は ARIA Authoring Practices Guide (APG) にてトップレベルであることが推奨されており、それ以外の配置だと警告を発するツールも存在します。

具体例を挙げると、以下のマークアップは HTML としては正当であるものの、<aside> 要素が <main> 要素の中にある（＝他のランドマークの中にある）ため避けるべきとされてきました。

<main>
  <p>...</p>

  <aside>
    <p>...</p>
  </aside>
</main>

このような乖離を解消するため、2022年4月に HTML Accessibility API Mappings (AAM) の仕様が更新され、<aside> 要素のアクセシビリティマッピングが変更されました。詳細は当時書いた解説記事を参照ください。しかしブラウザの対応はタイムラグがあったこと、アクセシビリティツールやリンター、ガイドラインなどの対応は今なお充分ではないことから混乱は続いています。

ここでは現状の議論をまとめますが、結論が出ていないものも多いのでおそらくすぐに陳腐化してしまうでしょう。あくまで2025年12月上旬の状況に過ぎないことはご留意ください。

ブラウザ

§

AAM でマッピングが変更されたのち、2023年〜2024年にかけて各ブラウザの対応も進み、現在では Firefox, Safari, Chrome (Chromium) ともに新しい仕様に沿った挙動をしています。詳しい実装時期は前述の解説記事に対するコメント(GitHub)でまとめていただいています。

  • ただし細かな部分でブラウザごとの差異は残っています。例えば body > form > aside はアクセシブルネームが設定されていない場合、Chrome 145 canary は complementary ロールとなるのに対して Firefox 147 Nightly は generic ロールと扱われることを確認しています。

アクセシビリティツール

§

Axe

§

AAM におけるマッピング変更より以前の2021年に、<main> 要素内に <aside> 要素がある場合の警告を取り止めました。

一方、main > section > aside のような構造は引き続き警告が出されます。landmark-complementary-is-top-level ルールを廃止する Issue(GitHub) は立っているので、動向を見極めたいところです。

Markuplint

§

引き続きトップレベルでないと landmark-roles ルール(markuplint.dev)にて一律で警告されます。ただしロールごとに除外設定が可能です。 

/** @type {import('@markuplint/ml-config').Config} */
export default {
  rules: {
    'landmark-roles': {
      options: {
        ignoreRoles: ['complementary'],
      },
    },
  },
};

ガイドラインや解説文書

§

ARIA Authoring Practices Guide (APG)

§

AAM におけるマッピング変更より以前から変わっていません。Landmark Regions(W3C) では他のランドマークと同様に complementary ランドマークもトップレベルであるべきとされています。

banner, main, complementary and contentinfo landmarks should be top level landmarks.

Landmark Regions – General Principles of Landmark Design(W3C)

MDN

§

<aside> 要素のページ(developer.mozilla.org)ではアクセシビリティ面の記述がありません。また Implicit ARIA role は単に complementary とされていて、AAM のマッピング変更が反映されていません。これに対して今年8月に Issue(GitHub) が立てられました。

冒頭に挙げた盛り上がりはそもそもこれが発端だったわけですが、今のところ仕様や支援技術の挙動の事実確認をしている段階であり、具体的にどのような解説を追加するかといった部分にまでは議論が進んでいません。