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"。