HTML图标按钮如何添加功能说明｜aria-label使用指南

什么时候该用 aria-label，而不是 aria-labelledby？

aria-label 是硬编码的字符串，适合静态、确定的描述；aria-labelledby 指向页面中已存在的文本节点，适合动态或复用场景。

• 用 aria-label：图标按钮功能固定，比如搜索、关闭、设置，值直接写死，如 aria-label="搜索"
• 用 aria-labelledby：按钮作用依赖上下文，比如表格每行的“编辑”按钮，label 来自该行的姓名单元格（id="name-123"），则写 aria-labelledby="name-123"
• ⚠️ 坑：两个属性同时存在时，aria-label 会覆盖 aria-labelledby，别混用

SVG 图标按钮的常见无障碍断点

SVG 自身默认是装饰性元素，即使加了 aria-label，若没正确声明角色和焦点能力，仍可能被跳过。

• 必须确保外层容器是