<hgroup> 要素は今どうなっているのか

投稿
最終更新

今年（2022年）7月のアウトラインアルゴリズム廃止に伴い、使用方法が大きく変わったものの一つに <hgroup> 要素(WHATWG) があります。

  1. W3C HTML5 時代の <hgroup> 要素
  2. HTML Living Standard の <hgroup> 要素
  3. <hgroup> 要素のアクセシビリティ上の問題

W3C HTML5 時代の <hgroup> 要素

§

<hgroup> 要素が最初に登場したのは2009年5月のこと(web.archive.org) で、同年8月には W3C HTML5 の仕様書に追加(W3C) されています。

当時の使い方は <h1> 〜 <h6> 要素のみを組み合わせて小見出しや代替タイトルを示すものでした。

<hgroup>
  <h1>タイトル</h1>
  <h2>サブタイトル</h2>
</hgroup>

上記のコードでは、サブタイトルは Heading content である <h2> 要素でマークアップされているものの見出しとは見なされず、 <h1> 要素のみが見出しデータとなることが想定されていました。

しかし <hgroup> 要素に対応していない環境ではサブタイトルも含めて見出しが2つ存在する扱いになってしまうという後方互換性の問題があり、他にも解析の難しさなど実効性を疑問視する声があり、2011年には <subline> 要素(www.html5accessibility.com) への置き換えを含む複数の廃止論が出てきます。

そして2012年12月17日版(W3C) で「at risk」とされた後、2013年春には HTML ワーキンググループにおいて廃止が決定(lists.w3.org) し、8月までに仕様から削除されました。当時は HTML5 (HTML 5.0), HTML 5.1 ともに勧告前だったため、 W3C の勧告された HTML 仕様に <hgroup> 要素が存在したことはありません。

HTML Living Standard の <hgroup> 要素

§

W3C の仕様から削除された後も WHATWG の HTML Living Standard には残り続けました。

実態としてブラウザがアウトラインアルゴリズムを解釈して <hgroup> 要素内の見出しを適切に解釈することはなかったため、「仕様上は有効だが実際に使うべきではない」という状態が長らく続いていたのです。多くの Web 制作の現場では「例えば、 <hgroup> を避ける」といったような運用がされていたのではないでしょうか。

そして今年7月にアウトラインアルゴリズム廃止に合わせてコンテンツモデルが変更され、中に含める見出し要素は一つのみで、その前後に <p> 要素で小見出しを配置するというように変更されました。

正確な定義と利用方法は以下となります。

Zero or more p elements, followed by one h1, h2, h3, h4, h5, or h6 element, followed by zero or more p elements, optionally intermixed with script-supporting elements.

4.3.7 The hgroup element(WHATWG) 
<hgroup>
  <p>サブタイトル</p>
  <h1>タイトル</h1>
  <p>サブタイトル</p>
</hgroup>

<hgroup> 要素のアクセシビリティ上の問題

§

古い仕様のマークアップの解釈

§

これでようやく（13年越しに）後方互換性などの懸念なしに <hgroup> 要素を採用できるようになったわけですが、過去の仕様に従ったマークアップ、すなわち <hgroup> の中に複数の見出し要素があるものをどう扱うかという問題は残ります。これについては Scott O'Hara 氏による Pull Request が上がっており(GitHub) 、以下のような挙動をユーザーエージェントに求めることが提案されています。

If an hgroup contains multiple heading elements, then the heading element with the highest priority level MAY be treated as the sole heading of the hgroup. All other heading elements MAY instead be exposed as if they were p elements. See paragraph role on Core AAM.

Conformance checkers MUST flag authors for incorrect nesting of multiple heading elements within a single hgroup.

indicate what to do with multiple headings in hgroup by scottaohara · Pull Request #398 · w3c/html-aam(GitHub)

すなわち、

<hgroup>
  <h1>タイトル</h1>
  <h2>サブタイトル</h2>
</hgroup>

のような古いマークアップは事実上

<hgroup>
  <h1>タイトル</h1>
  <p>サブタイトル</p>
</hgroup>

と同じ扱いにされることが期待されます。

ただし、ユーザーエージェントがそのような扱いをするかどうかはあくまで任意（MAY）であることには注意したいところです。しかも元々は MUST の文言だったところ、何らかの理由で MAY に変更された(GitHub) 経緯があり、ユーザーエージェントの将来の挙動に全面的に寄りかかれる期待はできないかもしれない不安があります。

2023年3月9日追記3月8日付で HTML Accessibility API Mappings 1.0 仕様が更新されました。👉3.4 HTML Element Role Mappings ‐ hgroup(W3C)

<hgroup> 要素のアクセシビリティマッピング

§

これから新たに <hgroup> 要素を採用する場合、古い仕様との兼ね合いを考慮する必要はありませんが、一方で現時点では「わざわざ <hgroup> 要素を採用するメリットは少ない」とも言えます。

HTML Accessibility API Mappings 1.0(W3C) では <hgroup> 要素は generic ロールにマッピングされています。generic ロール(W3C) とは WAI-ARIA 1.2 で追加されたもので、 <div> 要素や <span> 要素に相当し、セマンティックな意味を持たない要素を表すものですから、すなわちアクセシビリティ API 的には <hgroup> 要素は <div> 要素とまったく変わらない状態ということになるからです。

これについても先に挙げた PR の中で議論があり、マッピングを group ロールに変更することが検討(GitHub) されているため、将来的には <div> 要素との差別化が図られるかもしれません。

2023年3月9日追記ARIA in HTML(W3C) 側に Issue が立ちました。👉Revise hgroup allowances · Issue #451 · w3c/html-aria(GitHub)

ちなみに role="group" は手動で指定することもできるため、 <hgroup role="group"> と書けば PR のマージやユーザーエージェントの実装変更を待たずに <hgroup> 要素を group 扱いにすることが可能です。また、 Steve Faulkner 氏はSubheadings, subtitles, alternative titles and taglines in HTML(www.tpgi.com) の記事の中で role="group" と aria-roledescription 属性を使ったセマンティック実験(codepen.io) を行っています。これはあくまで実験であり、そのようなマークアップを行うことを推奨しているものでは決してないものの、考え方の一つとして参考になる部分はありそうです。