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

另请参阅