role="feed" 是 ARIA 1.1 定义的语义角色，专用于动态时间线内容，但主流读屏器支持有限，需配合 aria-live、role="article"、tabindex 等才能生效，否则多数情况下被降级为 region 处理。
role="feed" 是什么，浏览器和读屏器真认吗
role="feed" 是 ARIA 1.1 引入的语义角色，专为动态更新的、时间线式内容列表（比如社交信息流、新闻推送）设计。但它不是 HTML 原生元素，也不被所有主流读屏器完全支持——尤其是旧版本 NVDA、VoiceOver（iOS 16 之前）、JAWS 对它的识别很弱，甚至直接忽略。
实际测试中，role="feed" 在 Chrome + NVDA 2023.4+ 或 Safari + VoiceOver（macOS Ventura+）下能触发“feed” announcement，但多数情况下读屏器仍把它当 role="region" 或普通容器处理。所以别指望它自动带来“新条目已加载”的语音提示，那得靠手动发 aria-live。
怎么用 role="feed" 才不白写
单独写 <div role="feed"> 几乎没用。必须配合以下几项才能让辅助技术感知到“这是个可滚动、可刷新、有新内容进来”的动态流：
- 容器需设
aria-live="polite"（或"assertive"，按更新频率选），否则新增条目不会播报 - 每个子项必须是
role="article"（或role="listitem"+ 显式aria-labelledby），不能只是<div> - 推荐加
aria-busy="true"在加载中状态，避免读屏器读到半截 DOM - 滚动容器建议加
tabindex="0"，方便键盘用户聚焦并用空格/方向键浏览
示例片段：
立即学习“前端免费学习笔记（深入）”；
<div role="feed" aria-live="polite" aria-busy="false" tabindex="0">
<article role="article" aria-labelledby="post-1-title">
<h3 id="post-1-title">今天天气不错</h3>
<p>出门记得带伞。</p>
</article>
</div>
替代方案：不用 role="feed" 怎么表达信息流语义
如果目标兼容性要求高（比如要支持 IE11 或旧版读屏器），role="feed" 可以跳过，改用更稳的组合：
- 用
<section>+aria-labelledby指向标题，明确这是“最新动态区” - 子项统一用
<article>（HTML5 原生语义，比role="article"兼容性更好） - 加载新内容时，对新增的
<article>单独加aria-live="polite"属性，比整个容器设更精准 - 需要“刷新”操作时，按钮加
aria-controls="feed-container-id"，建立显式关联
这样既避开 role="feed" 的支持盲区，又保留了清晰的内容结构和可访问行为。
容易被忽略的坑：DOM 更新后 role="feed" 不会自动重生效
role="feed" 是静态声明，不是监听器。JS 动态插入新 <article> 后，读屏器不会因为父容器有这个 role 就自动识别新节点——它只依赖你是否给新节点加了正确 role 和 live 区域绑定。
- 不要以为 “父容器写了 role=feed，子项 append 进去就自动可访问”
- 每次插入新条目，都要确保该节点有
role="article"（或等效语义），且不在aria-hidden="true"的祖先内 - 若用 React/Vue，注意 SSR 渲染后 JS 补充的节点可能缺失 role，需在
useEffect或mounted中补全属性 - 避免在
role="feed"容器里混用aria-hidden="true"的占位符，会干扰读屏器遍历顺序
动态列表的可访问性，关键不在 role 名字有多新，而在每次 DOM 变更时，是否同步把语义、状态、焦点控制都补到位。
