无文字按钮需用 aria-label 或 aria-labelledby 提供语义，二者择一；aria-label 用于独立图标按钮，用动词短语如“搜索”“关闭弹窗”；aria-labelledby 关联可见文本，支持多 ID 按序播报；禁用 title、禁在图标上设 aria-label、禁 aria-label 与内文共存；中文描述简体口语化，不加句号。
无文字按钮（比如纯图标按钮）对屏幕阅读器用户来说是“看不见”的，必须通过 ARIA 提供明确的语义描述。核心方法是用 aria-label 直接写描述，或用 aria-labelledby 指向页面中已有的可见文本——两者选其一即可，**不要同时使用**，否则屏幕阅读器可能重复播报或冲突。
用 aria-label 写简洁准确的动词短语
适合独立存在、含义明确的按钮，例如搜索、关闭、删除、返回等。描述要以动词开头，说明“点击后会发生什么”，避免冗余词（如“按钮”“图标”）。
-
（含上下文更清晰）
用 aria-labelledby 关联已有可见文本
适合按钮和附近文字有强语义关系的场景，比如表格操作列中的“编辑”按钮，或卡片底部的“查看详情”按钮。先给目标文本加 id，再在按钮上引用它。
如何学习无障碍
-
编辑（可选补充词，与标题组合成完整意图）
注意：aria-labelledby 支持多个 ID（空格分隔），顺序即播报顺序；被引用的元素不一定要视觉可见，但需在 DOM 中且未被 aria-hidden="true" 隐藏。
避免常见错误
- 不要给图标本身加
aria-label（如），应放在按钮容器上 - 不要用
title属性替代 ARIA 描述，它不是语义化方案，且移动端常不触发 - 不要让
aria-label和按钮内文本共存（除非刻意覆盖），否则会覆盖原内容 - 中文描述用简体，标点统一不加句号，保持口语化但专业（如“展开菜单”而非“请展开菜单”）
测试建议
用 VoiceOver（macOS/iOS）或 NVDA（Windows）实际朗读验证：按钮是否被识别为“按钮”，播报内容是否准确、自然、无重复。也可用浏览器开发者工具检查 ARIA 属性是否正确渲染，以及无障碍树中角色和名称是否符合预期。
