ARIA：article 角色

article 角色表示頁面的一部分，可以輕鬆地獨立存在於頁面、文件或網站上。它通常設定在相關的專案內容上，例如評論、論壇帖子、新聞文章或其他在同一頁面上分組的專案。

html

<div role="article">
  <h2>Heading of the segment</h2>
  <p>Paragraph for the segment.</p>
  <p>Another paragraph.</p>
  Controls to interact with the article, share it, etc.
</div>
<div role="article">…</div>

此示例顯示了頁面上並排的兩個文章，它們的結構可能相似且相關。

注意：不要使用帶有 article 角色的 <div>，請使用 <article> 元素。如果可用，請始終使用原生元素

不要使用 role="article"。請改用 <article> 元素。

html

<article>
  <h2>Heading of the segment</h2>
  <p>Paragraph for the segment.</p>
  <p>Another paragraph.</p>
  Controls to interact with the article, share it, etc.
</article>
<article>…</article>

描述

article 文件結構角色表示文件、頁面或網站的一部分，如果它獨立存在，可以被視為完整的文件、頁面或網站。一組文章部分的目的是指示它們之間的關係。

文章不被視為導航地標，但許多支援地標的輔助技術也支援在文章之間導航的方法。它們還可以支援指示文章內巢狀關係。

文章可以巢狀，表示巢狀的文章與它巢狀在其中的文章直接相關，但不一定與巢狀層次結構之外的文章相關。請參考示例瞭解具體用例。

如果文章是 feed 的一部分，則可以設定 aria-posinset 和 aria-setsize 屬性，以指示此特定文章在 feed 中的位置。

在導致螢幕閱讀器和其他輔助技術處於直通模式的 application 或其他小部件內，可以使用文章來指示這些小部件應切換回將封閉內容視為常規 Web 內容的處理方式。

不要在非語義元素上包含 article 角色，而應使用 <article> 元素。使用者代理會將其轉換為適當的無障礙資訊，就像 article 角色一樣。使用 <article> 元素還有助於搜尋引擎更好地發現頁面的結構。role="article" 或優選 <article> 的適當用法示例包括部落格文章、論壇帖子、對論壇或部落格文章的評論、社交媒體 feed 中的任何專案。