纯图标按钮必须用aria-label显式声明功能，如<button aria-label="删除"><svg></svg></button>，字符串需为动词+宾语结构；旁有可见文本时优先用aria-labelledby；SVG须加aria-hidden="true"，禁用于已有可见文字的按钮。
纯图标按钮必须用 aria-label 显式声明功能
按钮里只有 <svg>、Emoji 或图标字体时，屏幕阅读器读不出意图，只会报“按钮”或跳过。这不是体验问题，是 WCAG 4.1.2 直接不合规。
-
aria-label是强制要求，不是“锦上添花”——写成<button aria-label="删除"><svg></svg></button>才算达标 - 字符串必须是动词+宾语结构，比如
aria-label="展开子节点"，而不是aria-label="箭头"或aria-label="↓" - 如果旁边有可见文本（如图标右侧写着“设置”），优先用
aria-labelledby="id-of-text"，避免重复或冲突 - 千万别在
<svg>上漏掉aria-hidden="true"：否则读屏器可能把图标和 label 一起读两遍
已有可见文字的 <button> 别加 aria-label
原生 <button>提交</button> 自带可访问名称，加 aria-label 反而会覆盖真实文本，导致用户听到的和看到的不一致。
- 错误示例：
<button aria-label="确认">删除</button>→ 读屏器只读“确认”，用户根本不知道点的是删除还是确认 - 禁用场景：所有含可见文字的
<button>、<input type="button">（其value属性会被朗读） - 例外仅限于文字被 CSS 完全隐藏且无法恢复（比如
clip-path裁剪），但这种情况本身应重构，而非硬补 ARIA
禁用状态必须同步原生 disabled 属性
只设 aria-disabled="true" 而不设 disabled，会导致视觉灰显但读屏器仍提示“可点击”，键盘用户也能聚焦并按 Space 触发——这是典型的状态不同步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法：直接用
<button disabled>提交</button>，浏览器自动处理焦点、键盘响应、读屏播报 - JS 动态控制时，改
el.disabled = true，而不是只操作el.setAttribute('aria-disabled', 'true') - 用
pointer-events: none或opacity: 0.5模拟禁用？读屏器完全感知不到，用户会反复尝试点击
非原生标签模拟按钮时，aria-label 只是起点
用 <div> 或 <span> 写按钮，等于主动放弃浏览器所有默认保障。光加 aria-label 远不够，缺任何一环都会卡住键盘用户。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三件事：
role="button"+tabindex="0"+ 监听keydown并响应Enter和Space - 漏掉
tabindex="0"：Tab 键跳过，键盘用户根本触达不了 - 只响应
Enter不响应Space：违反 WCAG 2.1.1，部分用户习惯空格确认 - 更稳妥方案：直接换回
<button>——语义、交互、无障碍一次到位
<button> 的无障碍逻辑是浏览器内置的，改用其他标签就等于自己重写整套交互链路。很多“加了 aria-label 还是读不对”的问题，根源不在 label 本身，而在容器语义或状态同步没跟上。 
