<aside> 要素のアクセシビリティマッピングが変更

投稿

W3C が公開している HTML Accessibility API Mappings 1.0(W3C) において、2022年4月4日付で <aside> 要素のアクセシビリティマッピングが変更されました。

本記事ではなぜこのような変更が行われたのか、 Web 制作者が注意すべき点を含めて確認してゆきます。

  1. <aside> 要素と対応する role
  2. アクセシビリティマッピングの変更
  3. ブラウザ対応状況

<aside> 要素と対応する role

§

<aside> 要素はセクショニングコンテンツ(WHATWG) なので、 <section> や <article>, <nav> 要素と同じく比較的自由な場所に配置できます。

以下は HTML 仕様書に掲載されているサンプルコードを一部省略のうえ抜粋したもので、これは正しいマークアップです。

<article>
	<h1>My first post</h1>
	<p>This is my first post.</p>

	<aside>
		<h1>Posting</h1>
		<p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p>
	</aside>
</article>

ところで <aside> 要素のデフォルトロールは complementary(W3C) ですが、これはトップレベルのランドマークであることが推奨されており、 WAI-ARIA Authoring Practices の 4.3.2 Complementary(W3C) では以下の3つの条件が書かれています。

  • complementary ランドマークはトップレベルのランドマークである必要がある（e.g. 他のどのランドマークにも含まれない）。
  • もし補足的なコンテンツがメインコンテンツに関連していない場合は、より一般的なロールを割り当てる必要がある（e.g. region）。
  • ページ内に複数のcomplementary ランドマークが含まれる場合、それぞれが一意のラベルを持つ必要がある（「4.2 General Principles of Landmark Design」の手順 3(W3C) を参照）。

すなわち前述のコードのように、 <article> 要素などのランドマークロール(W3C) の中に <aside> 要素を置くことは、 HTML としては正しいもののアクセシビリティ面から避けるべきであるとされてきました。

  • 👍 良い: body > aside
  • 👍 良い: body > div > aside
  • 👎 悪い: body > main > aside
  • 👎 悪い: body > article > aside
  • 👎 悪い: body > aside > aside

これは支援技術のことを考えれば気持ちとしては理解できるのですが、実装上は割と困ったことで、とくに <main> 要素の中に入れるなと言われてしまうと、本来 <aside> 要素を使いたい多くのケースで使えない状況となってしまっています。

アクセシビリティマッピングの変更

§

このように HTML としては問題ないのにアクセシビリティ的によろしくないケースが出てしまうのは、 <aside> 要素が role=complementary にマッピングされていたのに対し、 <aside> 要素の定義と complementary ロールの使い方に違いがあるためです。

そのため、 <aside> 要素を常に complementary ロールにマッピングするのではなく、状況により適用ロールを変えることで解決を図ることになりました。

  • generic ロール(W3C) は WAI-ARIA 1.2 で追加されたもので、ホスト言語の汎用的な要素の暗黙的な役割として利用されるものです。ちなみにこれはユーザーエージェント向けのロールなので、 Web 制作者が <article><aside role="generic"></aside></article> などと書いてはいけません。

いくつか具体例を挙げましょう。

<body>
	<aside>`complementary` ロールになる（ここはトップレベルのランドマーク）</aside>

	<div>
		<aside>`complementary` ロールになる（ここはトップレベルのランドマーク）</aside>
	</div>

	<main>
		<aside>`complementary` ロールになる</aside>
	</main>

	<article>
		<aside>`generic` ロールになる</aside>
		<aside title="タイトル">`complementary` ロールになる（アクセシブルネームが与えられている）</aside>
	</article>
</body>

ブラウザ対応状況

§

Scott O'Hara 氏が Webkit(bugs.webkit.org) 、Chromium(bugs.chromium.org) 、Firefox(bugzilla.mozilla.org) にバグを立てていますが、今のところ（2022年4月14日現在）どれも反映はされていません。従来どおり、使用箇所に関わらず complementary ロールの扱いとなります。

Web ページの制作に際しては、まだブラウザが対応していないため最新の HTML Accessibility API Mappings(W3C) を前提にしたマークアップは時期尚早と言えるでしょう。今しばらくは WAI-ARIA Authoring Practices の注意(W3C) に従い、<aside> 要素はトップレベルのランドマークとなる場所でしか使わないとするのが良いかと思います。