main要素、W3C版（HTML 5.1）とWHATWG版の違いとか

投稿

main要素がW3Cに続き、WHATWGのHTML仕様にも組み込まれました。

ここではW3C版とWHATWG版の違いについて書いてみようと思います。main要素って何? という話は昨年末に相次いでエントリーが挙がっているのでそちらを参照ください。

さて、去年12月17日にHTML5の仕様策定が完了(W3C)し勧告候補（CR）となるとともに、HTML 5.1(W3C)の草案が発表されました。そのEditor's Draft版であるHTML 5.1 Nightly(dev.w3.org)において、今年1月にmain要素が追加されています。

さらに、WHATWGの方も昨日2月1日の更新で追加されましたが、両者の仕様には大きな違いがあります。

W3C版

§

まずW3C版の方ですが、文書やアプリケーション本体の主要部分を表すもので、次のような使い方の注意が示されています。

  • 文書内に複数のmain要素を含めてはいけない
  • article, aside, footer, header, navの各要素を祖先に持てない
  • ユーザーエージェントの実装が進むまでは、role="main"(W3C)を書くことを勧める

さらに、ユーザーエージェントに対してはキーボードショートカットの提供を奨励しています。

User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.

現状、サイト内で共通のヘッダーやナビゲーションを飛ばしてページのメインコンテンツにアクセスできるためには、いわゆるスキップリンクを先頭に配置したり、セクションの見出しを見出し要素（h1〜h6）でマークアップするやり方があり、WCAG 2.0でも達成基準2.4.1 Bypass Blocks でこれらの方法が紹介されています。

今後、ブラウザのmain要素のサポートが進み、支援技術や画面の小さいモバイル端末のブラウザなどでジャンプ機能が実装されれば、これらに加えてmain要素の導入がユーザビリティに寄与することになるかもしれません。少なくともスキップリンクは消えゆく運命にあるのかな、と。

WHATWG版

§

一方でWHATWG版の方はこんな事が書かれています。

The main element can be used as a container for the dominant contents of another element. It represents its children.

文書全体の主要部分に限らず、main要素が書かれた親要素の主要部分という位置づけのようですね。そのため、文書内で1つという制約や、祖先要素の注釈などもありません。

また、role属性については別章の3.2.7 WAI-ARIA(www.whatwg.org)に書かれており、デフォルトは"main"で、共通で許可されている presentation のほかは document と application が指定可能です。

例えば、ブログのトップページ（記事が複数表示）で、文書全体と個々の記事の主要部分をそれぞれmain要素でマークアップするとこんな感じになるんですかね。

<body>
  <header role="banner">ページヘッダー</header>
  <main role="main">
  <!-- ↑UAの対応が進めばrole属性は記載しなくて良いかも -->
    <article>
      <header>記事ヘッダー</header>
      <main role="document">記事本文</main>
      <!-- ↑デフォルトのroleがmainなので、documentで上書きする -->
      <footer>記事フッター</footer>
    </article>
    <article>
      <header>記事ヘッダー</header>
      <main role="document">記事本文</main>
      <!-- ↑デフォルトのroleがmainなので、documentで上書きする -->
      <footer>記事フッター</footer>
    </article>
  </main>
  <footer role="contentinfo">ページフッター</footer>
</body>

articleやsection内の主要部分を表す場合、role属性の記載は事実上必須ということになるのでしょうか。ちょっと自信ないので間違っていたらツッコミください。