aria-label 比 title 更可靠，因阅读器优先读取 aria-label 且其显式声明可覆盖默认无障碍名称，而 title 仅作悬浮提示、不参与无障碍树构建。

aria-label 为什么比 title 更可靠

盲人阅读器（如 NVDA、VoiceOver）优先读取 aria-label，而 title 在多数情况下被忽略或仅作悬浮提示——尤其在触屏设备或键盘导航中几乎不触发。很多开发者误以为加了 title="删除" 就够了，结果按钮朗读成“button”，完全没内容。

• aria-label 是显式声明，强制覆盖默认可访问性名称；title 只是辅助信息，不参与无障碍树构建
• 对无文本的图标按钮（如 ），必须用 aria-label="删除当前项目"，不能依赖 CSS 伪元素或隐藏文字
• 避免同时写 aria-label 和可见文本，否则会重复朗读；如有可见文字，改用 aria-labelledby 关联

role="button" 不等于真按钮

用

模拟按钮，阅读器能识别角色，但缺失原生语义和键盘行为——空格/回车键不触发，Tab 键无法聚焦（除非手动加 tabindex="0"），且不响应 :focus-visible 样式。

• 优先用 或 （后者需确保有 href 才能被聚焦）
• 若必须用 div，至少补全： tabindex="0" + role="button" + onkeydown="if(event.key==='Enter'||event.key===' '){...}"
• 阅读器朗读时，role="button" 会读作“button”，但不会自动读出操作后果（如“提交表单”），需靠 aria-label 补充动词+宾语

表格要带 scope 或 id/headers 关联

纯靠 CSS 隐藏的表头（如 display: none）会让阅读器彻底丢失行列关系，朗读变成一串无上下文的单元格值。常见错误是只写 姓名 邮箱，却不标注哪列属于哪行。

• 简单表格用 scope="col"（列头）或 scope="row"（行头），例如：邮箱
• 复杂嵌套表头必须用 id + headers 显式关联：订单状态 → 已发货
• 避免用 aria-hidden="true" 包裹表头——这会直接移除该元素的无障碍暴露，不是“隐藏视觉但保留语义”

动态内容更新要用 aria-live

AJAX 加载后插入新内容（如搜索结果、表单校验提示），阅读器默认不主动朗读，用户根本不知道发生了什么。单纯 focus 新元素也不可靠——屏幕阅读器焦点可能被重置或跳过。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 给实时更新容器加 aria-live="polite"（低优先级，不打断当前朗读）或 aria-live="assertive"（高优先级，立即中断并朗读），例如：
• aria-atomic="true" 确保整个区域内容变化时整体朗读，而非只读变更部分；false 则可能只读新增文本，漏掉上下文
• 不要把 aria-live 放在表单元素内部（如 ），它只作用于容器，且需独立 DOM 节点

实际中最容易被忽略的，是那些“看起来正常”的交互组件——比如一个带图标的搜索框，开发时自己点着没问题，但阅读器用户按 Tab 进入后，听到的是“textbox”，而不是“搜索商品名称”。这种语义断层不是靠 JS 补丁能修好的，得从 HTML 结构第一行就对齐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！