应优先使用原生语义元素，仅在无法用原生标签（如用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区分用途：<nav aria-label="主导航"></nav> - 如果用
div实现导航（比如 JS 渲染的动态菜单），才需显式加role="navigation" - 别嵌套写：
<div role="navigation"><nav>...</nav></div>——这会让辅助技术困惑，直接用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 通知逻辑，否则容易让屏幕阅读器用户卡住。
