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"> 几乎没用。必须配合以下几项才能让辅助技术感知到“这是个可滚动、可刷新、有新内容进来”的动态流：
<ul>
<li>容器需设 <code>aria-live="polite"（或 "assertive"，按更新频率选），否则新增条目不会播报
role="article"（或 role="listitem" + 显式 aria-labelledby），不能只是 <div>
<li>推荐加 <code>aria-busy="true" 在加载中状态，避免读屏器读到半截 DOMtabindex="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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</article>
</div>
替代方案：不用 role="feed" 怎么表达信息流语义
如果目标兼容性要求高（比如要支持 IE11 或旧版读屏器），role="feed" 可以跳过，改用更稳的组合：
- 用
<section></section>+aria-labelledby指向标题，明确这是“最新动态区” - 子项统一用
<article></article>（HTML5 原生语义，比role="article"兼容性更好） - 加载新内容时，对新增的
<article></article>单独加aria-live="polite"属性，比整个容器设更精准 - 需要“刷新”操作时，按钮加
aria-controls="feed-container-id"，建立显式关联
这样既避开 role="feed" 的支持盲区，又保留了清晰的内容结构和可访问行为。
容易被忽略的坑：DOM 更新后 role="feed" 不会自动重生效
role="feed" 是静态声明，不是监听器。JS 动态插入新 <article></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 变更时，是否同步把语义、状态、焦点控制都补到位。
