“加载更多”按钮必须用<button>，因其自带可聚焦、键盘响应、表单语义和禁用逻辑；禁用时需同时设disabled属性和aria-disabled="true"；加载中须配合aria-live="polite"区域主动通告；焦点应保留在按钮或移至新增首项。
“加载更多”按钮必须用 <button>，别用 <a> 或 <div>
原生 <button> 自带可聚焦、键盘响应（Enter/Space）、表单语义和禁用逻辑，辅助技术能直接识别为“可触发操作”。换成 <a href="#"> 会误导读屏器认为这是跳转链接，还可能意外触发页面滚动或刷新；用 <div onclick> 则完全丢失语义，必须手动补 role="button"、tabindex="0"、keydown 监听——漏任一环节，键盘用户就卡死。
正确写法：<button type="button" disabled>加载更多</button>。注意 type="button" 是关键，避免在表单内误提交。
禁用状态必须同步设置 disabled 属性和 aria-disabled="true"
仅设 aria-disabled="true" 而不设原生 disabled，会导致视觉灰掉但读屏仍报“可点击”，且该元素仍能被 Tab 键聚焦；反之只设 disabled 不加 aria-disabled，部分旧版读屏（如 IE11 + JAWS）可能无法准确播报禁用状态。
动态控制时，务必成对操作：
button.disabled = true;<br>
button.setAttribute('aria-disabled', 'true');启用时同理，二者缺一不可。
加载中状态要暴露给屏幕阅读器
单纯加 loading 动画或文字（如“加载中…”）不够，读屏器不会自动感知 DOM 文本变化。需配合 aria-live="polite" 区域主动通告：
立即学习“前端免费学习笔记（深入）”；
- 在按钮旁或父容器里加一个隐藏的
<div aria-live="polite" aria-atomic="true" class="sr-only"></div> - JS 加载开始时：更新该区域文本为“正在加载更多内容”
- 加载失败时：更新为“加载失败，请重试”
- 成功后：清空或设为“已加载新内容”，避免重复播报
别用 aria-busy="true" —— 它不触发朗读，仅作状态标记，对用户无实际反馈。
按钮位置与焦点管理容易被忽略
“加载更多”按钮通常在列表底部，用户滚动到底部后点击。但屏幕阅读器用户可能靠虚拟光标浏览，不一定知道按钮存在；键盘用户 Tab 到底后若焦点没停在按钮上，就会“掉出”页面。
关键动作：
- 按钮首次渲染时确保 tabindex="0"（原生 <button> 默认已有）
- 加载新内容后，**不要**自动滚动到底部并把焦点移到新内容末尾——这会让用户丢失上下文
- 更稳妥的做法：保持焦点仍在“加载更多”按钮上，等用户再次按 Enter 才继续；或加载完成后，将焦点移到新增内容的第一项（如首个 <article>），并用 scrollIntoView({ block: 'nearest' }) 辅助可视定位
- 若按钮被移除（如最后一页），焦点应返回到列表容器（<main> 或 <section>），并用 aria-live 通告“已加载全部内容”
