Vue.js 交互性强无障碍按钮组件设计

当然，如果确实遇到必须使用其他标签的场景（比如按钮本身是一个链接），那就必须完整补充所有可访问性行为。但实话实说，大多数情况下没必要绕这个弯路。

提供清晰的状态反馈与视觉提示

交互性强 ≠ 动效堆砌。真正优秀的反馈，是让用户实时感知按钮当前处于什么状态。默认、悬停、聚焦、激活、禁用、加载中——这六个状态缺一不可。

• 聚焦状态必须要有高对比度的可见轮廓，例如 outline: 2px solid #0066cc。切忌依赖浏览器默认的 outline，更不要为了“好看”而直接设为 none。这是用户定位焦点的重要线索。
• 悬停和激活要有明显的样式变化，如背景加深、边框加粗。但注意：变化不能仅靠颜色区分，因为色盲用户可能无法察觉。辅以图标、文字变化或形状变化，才是稳妥的做法。
• 禁用状态用 :disabled 伪类控制样式即可，原生 button 已内置 aria-disabled="true" 的语义，无需额外操心。
• 加载中状态建议通过 loading prop 控制。此时按钮文案应变化（如从“提交”变为“提交中…”），按钮本身应禁用，同时添加 aria-busy="true" 告知屏幕阅读器。一个完整的反馈链条就此形成。

支持键盘导航与屏幕阅读器友好文案

按钮的文本必须准确传达功能，避免使用“点击这里”“查看详情”等模糊表述。试想，如果你是盲人用户，听到“点击这里”时，根本无法知道点击后会触发什么。因此：

• 尽量使用明确的动词短语，例如“提交表单”“删除用户”“下载报告”。
• 如果按钮仅包含图标没有文字（比如一个 图标表示关闭），则必须在图标旁使用 关闭弹窗 提供隐藏文本。屏幕阅读器用户需要知道这个按钮的功能。
• 利用 aria-label 或 aria-labelledby 补充上下文也很重要。例如卡片内有一个“编辑”按钮，上下文可能不明确，此时可用 aria-label="编辑用户张三" 来明确。
• 严禁在按钮内嵌套交互元素，比如链接或另一个按钮。这会导致焦点顺序混乱，语义也会冲突。

暴露必要 API 并合理封装交互逻辑

组件应保持轻量且可控，将决策权留给使用者，而不是将复杂行为硬编码进去。

• Props 至少应包含：type（submit/button/reset）、disabled、loading、aria-label（图标按钮必备）、size、variant（primary/outline/text）。
• Events 只暴露 @click 即可。防抖、loading 状态管理等应放到业务层处理。组件职责要单一，不要替用户做太多决定。
• 插槽支持默认内容（按钮文字）和 icon 插槽，方便灵活组合。图标位置可通过 icon-position="start" 这类 prop 控制。
• 不要自动聚焦，也不要自动滚动到视图。这些行为应由调用方根据 UX 流程决定。

说到底，可访问性不是添加几个 ARIA 属性就完事了。它应从语义结构出发，让每个交互环节对所有人都透明、可预测、可控制。一个好按钮，鼠标用户能点，键盘用户能按，屏幕阅读器用户能听懂，还能知道它当前是否可用——这才是真正的无障碍交互。