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

當處於繁忙狀態時，例如當文章正在新增到或從feed中移除時，在更新操作期間設定aria-busy="true"。確保在操作完成後將其重置為false，否則更改可能不會可見。

文章

Feed 中的每個內容部分都應包含在<article>或具有角色article的元素中。每個article都應該有一個aria-labelledby，指向文章標題或其他可以用作區分標籤的子元素。每個文章最好有aria-describedby，指向文章內部的一個或多個充當文章主要內容的元素。每個article元素都有aria-posinset設定為表示其在 Feed 中位置的值，以及aria-setsize設定為表示已載入的文章總數或 Feed 中的總數的值，具體取決於哪個值對使用者更有幫助。如果 Feed 中的總數未知，則將aria-setsize設定為“-1”。

必需的 JavaScript 功能

無，除非任何屬性需要。例如，如果需要，在更新操作期間將aria-busy設定為true，然後在完成後設定為false。

注意：應用“上述”鍵盤行為是作者的責任。

示例

Feed 模式示例實現

最佳實踐

為了確保良好的使用者體驗，請避免在feed中間插入或刪除文章，在使用者到達 Feed 末尾之前載入新文章，並提供在文章之間移動焦點的鍵盤命令，以便鍵盤使用者可以瀏覽您的 Feed。請參閱鍵盤互動。

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# Feed

另請參閱