空状态按钮必须用 <button>，仅跳转新页面时可用 <a>；需显式设 type="button"，禁用用 disabled 属性，文案动词开头，无文字时用 aria-labelledby 关联隐藏文本，点击后立即禁用并同步 loading 状态，按钮位置需避开 overflow: hidden 并保持视觉焦点流合理。
空状态按钮该用 <button> 还是 <a>
必须用 <button>，除非它明确跳转到新页面（比如“去添加”指向 /add）。很多团队误用 <a href="#"> 或 <a href="javascript:void(0)">，这会破坏键盘导航（Enter 触发但 Space 不触发），也绕过表单提交语义。如果按钮只是触发 JS 操作（如重试加载、清空筛选），<button type="button"> 是唯一合规选择。
常见错误现象：<a> 按钮在屏幕阅读器中被读作“链接”，用户预期会跳转；实际点击却只刷新局部内容，造成认知断层。
-
type="button"必须显式声明，否则在表单内默认为submit，可能意外触发表单提交 - 禁用状态统一用
disabled属性，不要仅靠 CSS 加opacity: 0.5—— 后者仍可聚焦、仍会被读屏器宣布为“可交互” - 按钮文案需动词开头：“重新加载”比“加载失败”更明确，“去添加”比“暂无数据”更可操作
按钮里没文字，怎么保无障碍
空按钮（比如仅含 SVG 图标的重试按钮）必须通过 ARIA 补足语义，不能只靠 aria-label 了事。因为 <button> 是交互元素，其可访问名称必须稳定、可编程获取，而 aria-label 在某些浏览器+读屏组合下可能被忽略或覆盖。
正确做法是用 aria-labelledby 关联一个隐藏的 <span>，或直接在按钮内嵌 <span aria-hidden="true"> + <span class="sr-only"> 结构：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<button type="button" aria-labelledby="retry-label"> <svg aria-hidden="true">...</svg> <span id="retry-label" class="sr-only">重新加载列表</span> </button>
关键点：
-
class="sr-only"必须用绝对定位 + 尺寸归零 + 剪裁，不能只靠visibility: hidden或display: none - 避免
aria-label="重新加载"单独使用 —— 当按钮有多个实例（如多个卡片的空状态），重复的aria-label会让读屏器无法区分上下文 - 图标 SVG 内联时，务必加
aria-hidden="true"，否则读屏器会尝试读取路径节点，造成噪音
空状态按钮的点击逻辑怎么防重复
用户狂点“重新加载”按钮，后端可能收到一堆重复请求，前端却还在等第一个响应返回。这不是 UX 问题，是资源浪费和状态错乱根源。
最简方案是点击后立即置 disabled，响应完成再恢复。但要注意：这个禁用必须和 loading 状态同步，不能靠 timeout 模拟。
- fetch 请求发起前设
button.disabled = true，并在.finally()中设回false，确保无论成功失败都恢复可操作性 - 不要在
catch里才恢复 —— 如果请求超时未 reject，按钮就永远卡死 - 若按钮绑定的是全局重试函数（如
retryCurrentList()），函数内部第一行就应检查当前是否已处于 loading 状态，避免多路调用堆叠 - 服务端接口最好支持幂等性（如带
X-Idempotency-Key），但前端控制仍是第一道防线
按钮位置和视觉层级容易被忽略的细节
空状态按钮不是塞在提示文案下面就行。它得在视觉流和焦点流里都处于合理位置：既不能太突兀（比如浮在插图正中间），也不能太隐蔽（比如缩在右下角被滚动条遮住）。
真实项目中最常踩的坑是 CSS 的 z-index 和父容器 overflow 冲突。例如空状态容器用了 position: relative + overflow: hidden，按钮即使设了 z-index: 9999 也会被裁掉。
- 按钮始终放在空状态容器的底部对齐区域，且与文案保持至少 16px 垂直间距
- 避免给空状态容器设
overflow: hidden，改用 padding 控制内容边界 - 悬浮按钮（如右下角“添加”）必须用
position: fixed并监听resize事件调整位置，否则在小屏横屏时可能被系统 UI 遮挡 - 移动端慎用
fixed按钮 —— iOS Safari 的地址栏收放会触发 viewport 高度跳变，导致按钮闪动或错位
