aria-label 必须写在可交互元素（如）上，而非纯展示的或标签内；若按钮含可见文字则通常无需aria-label；静态功能用aria-label，动态上下文用aria-labelledby。
aria-label 写在哪？不是写在 <i></i> 上
图标按钮的功能说明必须绑定到可交互元素上，aria-label 不能只加在纯展示的 <i></i> 或 <svg></svg> 标签里。屏幕阅读器只会读取焦点可抵达、语义为控件的节点（比如 <button></button>、<a></a>），否则标签直接被忽略。
- ✅ 正确：把
aria-label放在<button></button>上，哪怕里面只有<svg></svg> - ❌ 错误：只给
<svg></svg>加aria-label，而外层<button></button>没有文本或 label - ⚠️ 注意：如果按钮内已有可见文字（如“删除”），通常不需要
aria-label；加了反而可能重复朗读
什么时候该用 aria-label，而不是 aria-labelledby？
aria-label 是硬编码的字符串，适合静态、确定的描述；aria-labelledby 指向页面中已存在的文本节点，适合动态或复用场景。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
aria-label：图标按钮功能固定，比如搜索、关闭、设置，值直接写死，如aria-label="搜索" - 用
aria-labelledby：按钮作用依赖上下文，比如表格每行的“编辑”按钮，label 来自该行的姓名单元格（id="name-123"），则写aria-labelledby="name-123" - ⚠️ 坑：两个属性同时存在时，
aria-label会覆盖aria-labelledby，别混用
SVG 图标按钮的常见无障碍断点
SVG 自身默认是装饰性元素，即使加了 aria-label，若没正确声明角色和焦点能力，仍可能被跳过。
- 必须确保外层容器是
<button></button>（或带role="button"+tabindex="0"的元素） - 内部
<svg></svg>应加aria-hidden="true"，避免屏幕阅读器误读路径描述 - 不要依赖
<title></title>标签作为功能说明——它只在鼠标悬停时显示 tooltip，对键盘/语音用户无效 - 示例：
<button aria-label="刷新列表"><svg aria-hidden="true">...</svg></button>
中文空格、标点、长度对屏幕阅读器的影响
aria-label 的值不是“写出来就行”，中文表述稍不注意就会导致朗读卡顿或歧义。
- 避免全角空格、不可见字符（如
\u200b），会导致朗读中断或报“空白” - 不用“…”“——”等标点，屏幕阅读器可能停顿或误读；用“，”或直接连接更稳妥
- 长度控制在 20 字以内，过长会被截断（尤其 iOS VoiceOver）；例如
"点击此处跳转到用户个人主页"→ 简化为"个人主页" - 动词开头更清晰：“打开菜单”比“菜单”好，“删除项目”比“删除”更明确（避免和“删除全部”混淆）
aria-label，或者 label 写在了 SVG 里。这不是“看起来能点就行”的问题——它是键盘用户根本无法识别操作目标的硬伤。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
