contenteditable默认不满足无障碍要求，因其仅提供可编辑容器功能，缺乏角色声明、多行标识、焦点管理及格式反馈，需显式补全role="textbox"、aria-multiline="true"、aria-label等并同步状态。
富文本编辑区的可访问性问题不是“加几个 ARIA 属性就能修好”，而是从 DOM 结构、焦点行为、语义表达到状态同步的整条链路都得重校准。原生 contenteditable 本身就不具备完整无障碍能力，必须靠显式补全。
为什么 contenteditable 默认不满足无障碍要求
它只是个“可编辑容器”，不自带角色、不声明多行、不处理焦点管理、不反馈格式变化——屏幕阅读器进入后只报“可编辑区域”，其余全靠猜。常见后果包括：键盘用户 Tab 进去却无法用方向键选中文字；加粗后光标跳到开头；插入图片后没提示、alt 缺失；列表嵌套后读屏直接跳过整个结构。
-
contenteditable元素必须显式设role="textbox"+aria-multiline="true"，否则 NVDA/VoiceOver 不识别为多行文本输入 - 不能仅靠
tabindex="0"让它可聚焦——还要监听keydown拦截 Ctrl+B/I/U 等快捷键，并同步触发浏览器原生命令（document.execCommand或insertText/formatSelection） - 每次格式变更后，需手动调用
getSelection()并检查anchorNode是否仍在编辑区内，否则焦点会意外丢失
role="textbox" 的配套动作不能漏
加了 role="textbox" 只是起点，它要求你兑现“textbox”的全部契约：可聚焦、可编辑、可导航、可反馈。缺一环，AT 就卡住。
- 必须提供
aria-label或aria-labelledby（如指向旁边可见的<label id="editor-label">正文编辑区</label>），否则读屏只报“可编辑区域”，用户不知用途 - 禁用
aria-describedby指向长段说明文字——它会在聚焦时一次性朗读全部，打断操作流；应改用aria-live="polite"区域动态播报当前格式（如“加粗，斜体”） - 当用户粘贴富文本进来，需在
paste事件中清洗并标准化结构：把<div><br></div>转成<p><br></p>，空<p></p>改为<p aria-hidden="true"> </p>防止段落塌陷
工具栏按钮的键盘与读屏支持怎么做才对
工具栏不是装饰，是编辑流程的关键控制点。90% 的无障碍失败发生在这一层——按钮用 div 实现、没 aria-label、Enter 键无响应、焦点顺序错乱。
立即学习“前端免费学习笔记（深入）”；
- 一律用
<button>元素，不要用<div role="button">—— 前者自带tabindex、disabled、Enter/Space触发，后者要手写全部逻辑 -
aria-label必须写操作意图，不是图标名称：“加粗文字”而非“B 图标”；“插入超链接”而非“链子图标” - 按钮状态需同步
aria-pressed="true"（如加粗按钮被激活时），且该状态必须随光标移动实时更新——不能只靠 class 切换 - 工具栏整体用
<div role="toolbar">包裹，并设aria-label="编辑工具栏"，让 AT 用户知道这是功能组而非普通容器
图片、链接、列表这些高频元素怎么保语义
编辑器输出的 HTML 若不干预，<img> 没 alt、<a> 没 title 或 aria-label、<ul> 被替换成 <div class="list">，可访问性就已实质失效。
- 插入图片前强制弹出 alt 输入框，空值禁止提交；若用户跳过，回退为
<img alt="未添加说明">而非留空 - 链接必须要求
href+ 至少一项可访问名称：title、aria-label或链接内可见文本（如<a href="/login">登录账号</a>） - 列表结构必须用原生
<ul>/<ol>，禁用<div class="list-item">模拟；插入时自动包裹<li>，嵌套层级不超过 6 层（避免 VoiceOver 导航混乱） - 所有自定义节点（如引用块、代码块）必须设
role="region"+aria-label，例如<div role="region" aria-label="引用内容">
最易被忽略的一点：编辑区和展示区必须用不同策略。编辑时允许宽松结构，但保存后输出的 HTML 必须经过严格清洗（DOMPurify 白名单需包含 figure、figcaption、aside），且渲染时强制样式隔离（.editor-output * { all: unset; }）。否则，哪怕结构全对，高对比度模式下也会因内联样式失效而不可读。
