role="feed" 单独使用几乎无效，必须配合 aria-live="polite"、语义化 article 子项及焦点管理三者缺一不可，且仅 safari+voiceover 支持较完整。
role="feed" 是 ARIA 1.1 引入的语义角色，专为动态加载、时间序排列、无限滚动的内容流设计（比如新闻流、社交媒体帖子列表）。但它不是“加了就无障碍”的魔法标签——实际使用中，多数开发者直接套用却忽略关键配套要求，导致屏幕阅读器行为异常甚至完全失效。
为什么 role="feed" 单独使用几乎没用
屏幕阅读器（如 NVDA、VoiceOver）对 role="feed" 的支持非常有限：ChromeVox 已弃用，NVDA 默认不触发 feed 模式，VoiceOver 仅在 Safari 中对 role="feed" 做轻量识别，且不自动监听新增项。它本身不提供任何自动播报、增量通知或焦点管理能力。
- 它不替代
aria-live—— 新增条目不会被朗读，除非你手动加aria-live="polite"或类似机制 - 它不隐含列表语义 —— 子项仍需明确用
role="article"或语义化 HTML（如<article></article>），否则结构不可导航 - 它不接管滚动逻辑 —— 无限滚动的加载触发、加载状态提示、键盘焦点保持等，全部要自己实现
正确标注 feed 区域的最小可行组合
必须同时满足三项，role="feed" 才具备可访问基础：
- 外层容器设
role="feed"，且**不嵌套在role="list"或role="region"内**（ARIA 规范禁止嵌套冲突角色） - 每个动态插入的条目用
<article></article>（推荐）或role="article"，并确保有唯一可感知的标题（<h2></h2>或带aria-labelledby） - 加载新内容时，**在新增的
<article></article>上临时添加aria-live="polite"**（仅首次插入时设，插入后立即移除，避免重复播报）
示例结构：
<div role="feed" aria-label="最新技术文章">
<article><h2>CSS 容器查询实战</h2>
<p>…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</article><article aria-live="polite"><h2>React Server Components 调试技巧</h2>
<p>…</p>
</article>
</div>
无限滚动时最常漏掉的两个可访问动作
滚动加载本身对键盘和屏幕阅读器用户是“隐形操作”。若不主动干预，用户会卡在旧内容末尾，完全不知新内容已加载。
- 加载完成时，**把焦点移到新插入的第一条
<article></article>的标题上**（element.querySelector('h2').focus()），但仅当用户当前焦点在 feed 区域内或其子项时才执行，避免打断其他操作 - 必须提供**显式“加载更多”按钮**（
<button>加载更多文章</button>），放在 feed 底部、始终可聚焦，并用aria-busy="true"和aria-disabled="true"反映加载状态；不能只依赖滚动触底自动加载
兼容性与替代方案的实际取舍
目前（2024 年中），role="feed" 在主流浏览器+读屏组合中，仅 Safari + VoiceOver 对其有较完整支持（如支持 control+option+shift+down 快速跳到下一条 article）。其他环境基本退化为普通容器。
- 如果项目需强无障碍保障，优先用语义化 HTML：
<main></main>包裹，子项用<article></article>，靠 heading 层级和原生导航键（H键跳标题）支撑浏览 - 若必须用
role="feed"，务必配合aria-live+ 焦点控制 + 显式加载按钮 —— 这三者缺一不可，而role="feed"本身只是语义占位符 - 不要用
role="feed"标注评论区、搜索结果页或分页列表 —— 它只适用于按时间倒序、持续追加、无明确终点的主信息流
真正难的不是加那个 role，而是让每次“加载更多”都对键盘用户可见、可停、可回溯。这点，90% 的无限滚动实现都没做到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
