ARIA: article ロール

{{ariaref}}article ロールは、ページ、ドキュメント、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または1ページにまとめられたその他項目などの関連コンテンツの項目に設定します。

<div role="article">
<h2>この断片の見出し</h2>
<p>この断片の段落。</p>
<p>別の段落。</p>
... 記事とインタラクションしたり、共有したり等するためのコントロール ...
</div>
<div role="article"> ... </div>

この例では、1ページに2つの記事を並べて表示しています。 これらは同じように構成でき、関連しています。

article ロールを持つ <div> ではなく、<article> 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。

role="article" を使用する代わりに、<article> 要素を使用することができます。

<article>
<h2>この断片の見出し</h2>
<p>この断片の段落。</p>
<p>別の段落。</p>
... 記事とインタラクションしたり、共有したり等するためのコントロール ...
</article>
<article> ... </article>

説明

article ロールは、ドキュメント、ページ、サイトのセクションを表し、それが単独で存在する場合は、完全なドキュメント、ページ、サイトとして見ることができます。 一連の記事(article)セクションの目的は、互いの関係を示すことです。

記事は、ナビゲーションに関するランドマークとは見なされませんが、ランドマークをサポートする多くの支援技術は、記事間をナビゲートする手段をサポートします。 また、記事内のネスト関係の表示をサポートすることもあります。

記事をネストすることができ、ネストされた記事は、それをネストしているものと直接関係しますが、必ずしもネスト階層の外側にあるものとは限りません。 具体的な使用事例については、例を参照してください。

記事がフィード(feed)の一部である場合、aria-posinset 属性および aria-setsize 属性を設定して、この特定の記事が表すフィード内の位置を示すことができます。

スクリーンリーダーやその他の支援技術がパススルーモードになるような application やその他のウィジェット内では、記事を使用して、囲んだコンテンツを通常のウェブコンテンツとして扱うように切り替えるべきであることを示すことができます。

意味論のない要素に article ロールを含める代わりに、<article> 要素を使用するべきです。 ユーザーエージェントは、これを article ロールのような適切なアクセシビリティ情報に変換します。 <article> 要素を使用すると、検索エンジンがページの構造をよりよく検出できるようになります。 role="article"、または好ましくは <article> の適切な使用例には、ブログ投稿、フォーラム投稿、フォーラムまたはブログ投稿へのコメント、フォーラムまたはブログ投稿へのコメントへのコメント、ソーシャルメディアフィード内の項目等が含まれます。

関連する WAI-ARIA のロール、ステート、プロパティ

aria-posinset
フィードのコンテキストでは、1から始まるカウントに基づいて、そのフィード内のこの特定の記事の位置を示します。
aria-setsize
フィードのコンテキストでは、そのフィード内にいくつの記事の項目があるかを示します。

キーボードインタラクション

このロールは、具体的なキーボードインタラクションをサポートしていません。

必要な JavaScript 機能

イベントハンドラ
このロールでは、イベントハンドラは必要ありません。
属性値の変更
フィードを作成するときは、各 article ロールの aria-posinset 属性と aria-setsize 属性を適切な値に設定します。 aria-posinset は、1ベースであることに注意してください。

常にネイティブの要素を使用してください。 article ロールを持つ <div> ではなく、<article> 要素を使用するべきです。

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
article の定義
勧告
WAI-ARIA Authoring Practices
feed の定義
草案

優先順位

このロールは、HTML の <article> 要素に対応し、可能な場合はその要素を代わりに使用するべきでます。 このロールは、その子の間に具体的なロールが存在する必要はありません。 これは、feed ロールを持つ要素の直接の子として許可される唯一のロールです。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, Wind1808
最終更新者: mdnwebdocs-bot,