ARIA：feed 角色

feed 是一個動態的可滾動 list（列表），其中包含 articles（文章）。當用戶滾動時，文章會從列表的任一端新增或移除。feed 使螢幕閱讀器能夠使用瀏覽模式的讀取游標來讀取和滾動富內容流，而該流可以透過在使用者閱讀時載入更多內容來無限滾動。

html

<section role="feed" aria-busy="false">
  …
  <article aria-posinset="427" aria-setsize="-1">…</article>
  <article aria-posinset="428" aria-setsize="-1">…</article>
  <article aria-posinset="429" aria-setsize="-1">…</article>
  …
</section>

描述

feed 是一種 list（列表），是可滾動 articles（文章）的容器角色，滾動時可能會在列表的頂部或末尾新增文章。此角色使輔助技術能夠使用瀏覽模式的讀取游標來讀取和滾動富內容流，而該流可以透過在使用者閱讀時載入更多內容來無限滾動。示例包括 RSS feed、新聞 feed、社交媒體 feed（如 Facebook、Instagram 或 Mastodon），甚至是電子商務頁面上的相關產品列表。這些流可以是有限的或無限的，可以在使用者滾動時載入更多內容。實現 feed 模式可讓螢幕閱讀器在讀取模式下可靠地讀取和觸發 feed 內容的載入。

與代表靜態 HTML 元素的文件結構元素不同，feed 角色需要特定的互動和鍵盤導航的實現。feed 是一個容器元素，其子元素是 <article> 或具有 article 角色的元素。feed 中的每篇文章都應該是可聚焦的，其 tabindex 為 0 或 -1。當一篇文章或其後代元素獲得焦點時，應將其滾動到檢視中。如果新增文章佔用了主瀏覽器執行緒，請確保在 feed 本身設定 aria-busy="true"，並在處理結束後將其重置為 false，否則使用者可能看不到更新。

如果文章數量已知，請在文章本身設定 aria-setsize。但是，如果總數非常大、不確定或經常更改，請設定 aria-setsize="-1" 來表示 feed 的大小未知。

feed 模式的另一個特性是略讀：feed 中的文章可以包含使用 aria-label 指定的可訪問名稱，以及使用 aria-describedby 指定的描述，這建議螢幕閱讀器在導航文章時，在名稱之後應讀取哪些元素。透過識別文章中提供標題和主要內容的元素，輔助技術可以提供功能，使使用者能夠從一篇文章跳到另一篇文章，並有效地辨別他們想閱讀的文章。

feed 模式透過建立網頁和輔助技術之間的以下互操作協議，實現了可靠的輔助技術讀取模式互動。

在 feed 的上下文中，網頁程式碼負責：

根據包含 DOM 焦點的文章，對內容進行適當的視覺滾動。
根據包含 DOM 焦點的文章，載入或移除 feed 文章。

鍵盤互動

當焦點位於 feed 內部時，建議支援以下一項或類似的介面：

Page Down：將焦點移至下一篇文章。
Page Up：將焦點移至上一篇文章。
Control + End：將焦點移至 feed 之後的第一個可聚焦元素。
Control + Home：將焦點移至 feed 之前的第一個可聚焦元素。

如果一個 feed 巢狀在另一個 feed 中，例如部落格文章 feed 中的評論 feed，約定是使用 Tab 鍵聚焦到巢狀 feed，並提供另一個鍵（例如 Alt + Page Down）以從“外部”文章導航到該文章巢狀 feed 的第一個專案。使用 Control + End 在巢狀 feed 和主 feed 之間導航，將焦點從內部 feed 移至外部 feed 的下一篇文章。

WAI-ARIA 角色、狀態和屬性

aria-label: 如果 feed 沒有可見標題，則 feed 元素應使用 aria-label 指定標籤。如果有，請參閱 aria-labelledby。
aria-labelledby: 如果 feed 有可見標題，則 feed 元素應具有 aria-labelledby，指向包含標題的元素。如果沒有，則新增 aria-label。
aria-busy: 當 busy（忙碌）時，例如在新增或移除 feed 中的文章時，請在更新操作期間設定 aria-busy="true"。確保在操作完成後將其重置為 false，否則更改可能不會顯示。
article: feed 中的每個內容部分都應包含在一個 <article> 或具有 article 角色的元素中。每篇文章都應有一個 aria-labelledby，指向文章標題或其他可作為區分標籤的子元素。每篇文章最好有一個 aria-describedby，指向文章內作為文章主要內容的元素。每篇文章元素都具有 aria-posinset，設定為代表其在 feed 中位置的值，以及一個 aria-setsize，設定為代表已載入文章的總數或 feed 中的總數（取決於哪個值對使用者更有幫助）。如果 feed 中的總數未知，請設定 aria-setsize="-1"。