富文本可访问性需构建完整链路：清洗时白名单须包含figure、figcaption、aside、main等语义标签及img的alt、loading属性；空<p>转为<p aria-hidden="true"> </p>；展示层必须CSS隔离并重置样式；table加role="table"、th设scope；图标改用<svg><title>或aria-hidden；动态内容插入后需设置aria-live或使用<details>/<dialog>/popover等原生语义元素。
富文本展示的可访问性不是“加几个 aria-label 就完事”，而是从清洗、结构补全、语义保留到样式隔离的完整链路；动态 HTML 的安全过滤若只防 XSS，大概率会把 figure、figcaption、loading 这类对辅助技术关键的标签/属性一并干掉。
DOMPurify 清洗时必须放宽语义白名单
默认配置下 DOMPurify 会删掉 figure、aside、main 等语义化标签，也禁用 img 的 alt 和 loading 属性——这些恰恰是 AT（辅助技术）识别内容结构和加载行为的关键。
- 显式在白名单中加入：
figure、figcaption、aside、section、header、nav、main - 允许
img的alt、loading、decoding属性（loading="lazy"对 VoiceOver/NVDA 友好且不影响性能） - 对
a标签，至少保留href+title或aria-label，禁止放行空href="#"且无说明的链接 - 空
<p></p>别直接删除——转成<p aria-hidden="true"> </p>，否则段落视觉间距塌陷，AT 却感知不到空白存在
展示容器必须做 CSS 隔离与语义重置
富文本输出常带内联 style 或编辑器专属类名（如 mce-item-table），直接用 v-html 或 innerHTML 渲染会污染全局样式，更致命的是覆盖用户代理样式（user agent stylesheet），导致高对比度模式失效、字体缩放异常。
- 必须包裹在独立容器中，例如：
<article class="rich-content">...</article> - CSS 隔离规则必须包含：
.rich-content * { all: unset; }，再显式重置font-size、line-height、color、margin等关键属性 -
table必须加role="table"，th必须有scope="col"或scope="row"，否则表格无法被 AT 导航 - 所有图标禁用 icon font，改用
<svg>+<title>，或aria-hidden="true"+ 文本替代
动态插入的 HTML 必须触发可访问性通知
仅靠 innerHTML = htmlString 插入内容，屏幕阅读器完全感知不到变化。尤其在搜索建议、评论加载、手风琴展开等场景，不主动通知，等于对键盘和读屏用户“隐身”。
立即学习“前端免费学习笔记（深入）”；
- 优先用原生语义元素：
<details>/<summary>替代手写折叠面板，<dialog>替代div模态框——它们自带状态同步与焦点管理 - 若必须 JS 动态插入，插入后立即调用：
el.setAttribute('aria-live', 'polite')（用于非中断性更新）或'assertive'（用于关键操作反馈） - 对弹出类内容（如 Tooltip、Popover），2026 年起推荐直接用
popoverAPI：<button popovertarget="menu">菜单</button> <div id="menu" popover>...，它自动处理aria-expanded、焦点捕获、ESC 关闭、inert隔离 - 禁止手动维护
aria-hidden和aria-expanded的开关逻辑——JS 报错或异步失败会导致状态卡死，AT 完全失联
基础结构缺失必须在渲染前补全
富文本编辑器只管内容区，<html>、<head>、<body> 这些外层结构常被忽略。但在 SSR、微前端或 iframe 场景下，缺一不可——浏览器不会帮你补全 lang 或 viewport，而这两项直接决定中文朗读是否错乱、移动端 AT 是否能缩放定位。
-
<html>标签必须显式带lang="zh-CN"（不能只写lang="zh"），否则 JAWS/NVDA 按系统语言朗读中文，发音严重错乱 -
<title>不可为空、不可用 “Untitled” 类占位符——它是屏幕阅读器进入页面后第一个播报的内容 -
<meta name="viewport">缺失会导致 iOS VoiceOver 直接跳过整个区域 - 不要依赖浏览器自动补全结构：服务端直出或 iframe 加载时，
<html>外层缺失会让 DOM 解析异常，SSR 渲染结果可能被截断
最常被跳过的环节，是清洗后没做展示层样式重置——哪怕 DOM 结构全对、ARIA 属性全齐，一旦挂上编辑器的内联样式，高对比度模式就失效，字体缩放就崩，可访问性前功尽弃。
