web-dev-qa-db-ja.com

HTML5のメイン要素とARIAのランドマークrole = "main"

HTML5 <main>要素とARIAランドマークロール属性role="main"の関係、および考えられる違いについて詳しく知りたいと思います。

<main>要素の目的は、ARIAロール属性role="main"を特定のHTML要素にマップすることであるという印象を受けています。しかし、それはそれを要約していますか？

たとえば、<main>よりも<div role="main">を使用する利点はありますか？それとも、これらは、今のところ、そして予見可能な将来において、同じ結果をもたらすでしょうか？

次の例を比較する際の洞察をいただければ幸いです。

<body>
  <main>
    <p>Paragraph</p>
  <main>
</body>

<body>
  <main role="main">
    <p>Paragraph</p>
  <main>
</body>

<body>
  <div role="main">
    <p>Paragraph</p>
  <div>
</body>
htmlaccessibilitywai-aria
24
Stuart Kershaw

HTML5 Doctorによると、これらは同等です。 <main>は、role="main"の実装をより簡単かつすっきりさせます。

の主な目的は、ARIAの画期的な役割をHTMLの要素にマッピングすることです。

<main>要素の一般的な説明は次のとおりです。

main要素は、ドキュメントまたはアプリケーションのbodyのメインコンテンツを表します。メインコンテンツ領域は、ドキュメントの中心的なトピックまたはアプリケーションの中心的な機能に直接関連する、またはそれらを拡張するコンテンツで構成されます。

勧告

ブラウザが<main>を適切に実装するまで、同じ要素でrole="main"と<main>の両方を使用することをお勧めします。

<!-- Recommended -->
<main role="main">
    ...
</main>

興味があれば、必ず <main> spec を読んでください。

セクショニングに関する注意

Szabolcsがコメントで指摘しているように、<main>はセクション要素ではないため、<section>要素と組み合わせて使用​​する必要があります。

参考文献

25
Daniel Imms