该用 aria-label 或 aria-labelledby 取决于场景：aria-label 适用于无文本控件（如纯图标按钮），直接提供可访问名称；aria-labelledby 适用于需组合多个元素文本的场景（如图表标题+说明），依赖 ID 有效；二者不可共存，否则后者被忽略。
aria-label 和 aria-labelledby 哪个该用？
当按钮或链接本身文字不明确（比如全是图标），语音助手会读成“按钮”或“链接”，用户完全不知道作用。这时候必须补语义，但选错属性会让屏幕阅读器重复读、跳过关键信息，甚至报错。
-
aria-label适合无文本内容的控件，比如<button aria-label="关闭"></button>；它直接覆盖默认可访问名称，简单直接 -
aria-labelledby适合需要组合多个元素文本的场景，比如一个图表旁有标题和说明，用aria-labelledby="chart-title chart-desc"让语音助手连起来读；但它依赖 ID 存在，ID 错了就静默失效 - 绝对不要同时写
aria-label和aria-labelledby—— 大部分浏览器只认aria-label，另一个被忽略，白写
为什么 button 里套 div 会让语音助手卡住？
HTML 语义结构是语音助手理解操作意图的基础。把 <div> 塞进 <code><button></button> 看似能加样式，实则破坏了 ARIA 可访问树：某些屏幕阅读器会跳过整个按钮，或把它降级为普通容器，导致“可点击但不可说”。
- 替代方案：用
<button></button>包纯文本或内联元素（<span></span>、<svg></svg>），再用 CSS 控制布局 - 如果真要嵌套块级结构（比如带图标+多行文字的按钮），改用
role="button"+tabindex="0"+ 手动绑定click和Enter/Space事件，但得自己处理焦点管理 - 检查方法：用 Chrome DevTools 的 Accessibility 面板看“Name”字段是否为空，空就说明语音助手读不出来
alt 属性为空字符串（alt=""）到底有没有用？
对纯装饰性图片，alt="" 不是偷懒，而是明确告诉语音助手“跳过这张图”。很多人误填 alt="图片" 或留空不写，结果语音助手硬读“图片”两个字，打断上下文流。
-
alt=""：图像无信息价值，彻底跳过（正确做法） -
alt="公司Logo"：图像承载品牌识别，需简明描述用途而非内容 - 没有
alt属性：IE 和旧版 JAWS 会读文件名，现代浏览器可能报 warning，且无法通过 WCAG 2.1 AA - SVG 图片别忘了加
role="img"和aria-label，否则多数屏幕阅读器当容器处理，不读文本
表单控件没配 label，语音助手怎么知道这是干啥的？
<input type="text"> 单独存在时，语音助手只能读“编辑文本”，用户根本不知道该填邮箱还是收货地址。原生 <label></label> 是最可靠、兼容性最好的关联方式，比所有 ARIA 替代方案都稳。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 优先用显式
<label for="email">邮箱</label><input id="email" type="email">—— 所有主流语音助手都能准确映射 - 避免隐式包裹（
<label>邮箱<input></label>）套复杂结构，一旦中间插了<div>，关联就断了 <li>如果 UI 真不能用 <code><label></label>（比如设计强制隐藏文字），至少用aria-label，但要注意：它会完全屏蔽 placeholder 文本，placeholder 不是替代方案
真正难的不是加几个属性，而是每次写 HTML 时得想两层：人眼看到什么，语音助手听到什么。很多“可访问”问题，根源是开发阶段没把语音交互当成第一路径来验证。
