应优先使用原生语义元素，仅在无法用原生标签（如用div模拟按钮或导航）时才添加role属性；必须同步实现对应行为（如键盘支持）、配套ARIA属性及焦点管理，否则会破坏无障碍体验。

role 属性不是“加了就变可访问”，而是必须和语义、行为、配套属性一起工作；乱加反而破坏辅助技术解析。

什么时候该加 role="button"？

只在用非按钮元素（比如 div 或 span）模拟按钮行为时才需要。原生 button 元素自带角色、键盘支持（Enter/Space）、焦点管理，再加 role="button" 是冗余且可能干扰读屏。

• 必须同步实现：添加 tabindex="0"、监听 Enter 和 Space 键事件、提供视觉焦点样式
• 如果只是做点击跳转（如 a 链接），优先用 a + href，它天然可聚焦、可键盘激活、有明确语义
• 禁用状态要靠 disabled 属性（对 button）或 aria-disabled="true"（对自定义按钮），不能只靠 CSS 灰掉

role="navigation" 和 nav 标签怎么选？

nav 元素默认就有 role="navigation"，不需要再写。手动加反而可能在旧版 JAWS 或 IE11 中触发重复解析。

• 多个导航区域（如顶部菜单、页脚链接、侧边工具栏）都用 nav，但必须用 aria-label 区分用途：
• 如果用 div 实现导航（比如 JS 渲染的动态菜单），才需显式加 role="navigation"
• 别嵌套写：
  ...
  ——这会让辅助技术困惑，直接用 nav 即可

role="alert" 怎么用才真有效？

role="alert" 不是“贴个标签就完事”。它依赖浏览器对 aria-live="assertive" 的支持，且动态插入内容时需确保 AT 能感知变化。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须配合 aria-live="assertive"（可省略，因 alert 默认就是 assertive）
• 不要反复修改 innerHTML：某些读屏（如旧版 NVDA）只读首次内容；应先清空再重设，或用 textContent 替代
• 避免把 role="alert" 放在隐藏区域（display: none 或 hidden）里——它必须在 DOM 中且可见（哪怕视觉上 offscreen）
• 紧急错误（如表单提交失败）用 role="alert"；普通提示（如“已保存”）改用 role="status" + aria-live="polite"

哪些 role 值能放心用？

WAI-ARIA 定义了 60+ 个 role，但日常开发中真正兼容稳定、AT 支持好的不到 10 个。优先选语义明确、原生支持度高的：

• role="alert"、role="status"、role="log"（实时区域）
• role="dialog" + aria-modal="true"（模态框必备组合）
• role="navigation"、role="main"、role="search"（地标角色，仅在语义缺失时显式添加）
• role="img"（仅用于内联 SVG，且必须配 aria-label 或 aria-labelledby）

像 role="application" 或 role="tree" 这类复杂 widget 角色，除非你完整实现所有键盘交互、状态管理和 AT 通知逻辑，否则容易让屏幕阅读器用户卡住。

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