<p>结论：不是所有地方都该加 aria- 属性，加错比不加更糟；真正需要它的地方只有三类——自定义控件、动态内容更新、状态同步变化。</p>
直接说结论：不是所有地方都该加 aria- 属性，加错比不加更糟；真正需要它的地方只有三类——自定义控件、动态内容更新、状态同步变化。
什么时候必须用 aria-label 或 aria-labelledby
当按钮或链接没有可见文本，或者视觉文本不足以说明操作目的时才用。比如纯图标按钮 <button><i class="icon-edit"></i></button>，屏幕阅读器默认读不出“编辑哪一项”，就得补。
-
aria-label适合写死描述，如<button aria-label="删除第5项"></button>；但它会完全覆盖元素内所有文本和子元素语义 -
aria-labelledby适合引用页面中已有的可见文案，比如表格操作列旁有个隐藏但语义明确的<span id="row-5-desc">第5条用户记录</span>，就用aria-labelledby="row-5-desc" - 别同时写两个——浏览器只认
aria-label，aria-labelledby被静默忽略 - 表单控件优先用原生
<label for="x">，禁用aria-label替代<label>，否则键盘用户无法用标签聚焦输入框
哪些元素必须加 role="button"
只有当你用非原生按钮标签（比如 <div> 或 <span>）模拟按钮行为时才需要。原生 <button> 或 <input type="button"> 自带角色和键盘支持，加了反而可能干扰旧读屏器。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须加的情况：
<div tabindex="0" onclick="submit()">提交</div>→ 改成<div role="button" tabindex="0" onclick="submit()">提交</div> - 加了就得实现空格键触发（不只是回车），否则交互不一致
- 不能给
<a href="#">加role="button"：它本质是链接，加了会破坏跳转语义和键盘导航逻辑 - 别忘了禁用态：用
aria-disabled="true"+ 对应灰显样式，disabled属性只对原生表单控件有效
aria-hidden="true" 的常见误用
它不是“视觉隐藏就加”，而是告诉辅助技术“整个节点及其所有后代，全部从可访问树里剔除”。一旦加错位置，功能就对屏幕阅读器彻底不可见。
立即学习“前端免费学习笔记（深入）”；
- 禁止包裹任何可交互元素：比如把整个弹窗容器设为
aria-hidden="true"，但没在打开时动态切为false，结果弹窗内容全“消失” - 子元素设
aria-hidden="false"无效——ARIA 隐藏具有继承性，父级设了true，子级无法绕过 - 纯装饰性图标（如
<i class="icon-close"></i>）可以单独加，但得确认它不参与 tab 导航、不是链接、没绑定事件 - 动态内容区域（如 AJAX 更新的列表）不该用
aria-hidden控制显隐，该用aria-live="polite"主动通知变化
最易被忽略的点：ARIA 不解决语义缺失的根本问题。比如用 <div role="navigation"> 包菜单，却不提供键盘方向键导航逻辑，屏幕阅读器能识别“这是导航区”，但用户仍无法操作。真实可访问性永远依赖语义 HTML + 行为实现 + 人工测试三者闭环，不是堆属性就能过关。
