domcontentloaded时机对可访问性初始化不够，因dom构建完成不等于辅助技术能正确识别内容；需确保元素插入dom且语义稳定后，再通过settimeout或queuemicrotask延迟一帧触发可访问性状态变更。
DOMContentLoaded 时机对可访问性初始化是否足够
不够。DOM 构建完成 ≠ 辅助技术能正确识别内容。比如 aria-live 区域在 DOMContentLoaded 时挂载，但若此时屏幕阅读器尚未完成 DOM 树解析或未监听到节点插入，首次播报可能丢失。
常见错误现象：页面加载后，动态插入的提示文本（如表单错误）没被朗读；role="alert" 元素渲染了但静默无反应。
- 必须确保元素已插入 DOM 且具有稳定语义（如非空
alt、有效aria-label）后再触发可访问性状态变更 - 对关键反馈类元素（如
aria-live="polite"），建议用setTimeout(() => {}, 0)或queueMicrotask延迟一帧，让辅助技术“看到”变化 - 避免在
DOMContentLoaded回调里直接操作document.body.innerHTML = ...—— 这会清空已有无障碍树，重置焦点和朗读上下文
load 事件中处理图片尺寸是否影响可访问性
会影响，但不是直接的语义问题，而是间接导致可访问性失效。例如：用 img.naturalWidth 判断是否加载成功，再决定是否显示替代文案（如 fallback 文本或图标），若逻辑卡在 load 且某张图 404，整个可访问性降级流程就被阻塞。
使用场景：为无 alt 的旧图补描述、根据图片宽高动态调整 aria-hidden 状态、生成响应式 srcset 同时同步 aria-describedby 关联说明。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
load等所有资源，但图片失败（404/跨域/CORS）时不会触发该图的load，整个事件会被延迟甚至永不触发（取决于哪张图） - 更可靠的做法是监听单个
img的load和error事件，配合alt值校验，而非依赖全局window.load - 若需尺寸信息，优先用 CSS
aspect-ratio+object-fit控制布局，避免 JS 读取offsetWidth导致布局抖动或可访问性树重建
iframe 懒加载与可访问性标签如何协同
loading="lazy" 本身不破坏可访问性，但若忽略 title 或沙箱策略过严，会导致屏幕阅读器无法理解嵌入内容意图，甚至完全跳过该区域。
容易踩的坑：给 YouTube iframe 加了 loading="lazy" 却没设 title="YouTube 视频：如何使用键盘导航"，结果 NVDA 只报“内联框架”，用户不知其用途。
- 每个
iframe必须有非空title属性，哪怕只是描述性短语（如title="客户支持聊天窗口"） - 若启用
sandbox，需显式添加allow-scripts allow-same-origin才能让内部脚本正常注册 ARIA 状态；但allow-popups会削弱隔离性，慎加 - 懒加载下，
iframe内容首次加载时可能触发焦点丢失 —— 应在iframe.onload中主动focus()到首个可聚焦元素（如iframe.contentDocument.querySelector("button")）
Vue/React 组件挂载顺序与 aria-live 冲突点
框架的异步渲染（如 Vue 的 nextTick、React 的 useEffect）和 aria-live 的播报节奏不同步，是高频盲区。DOM 节点已存在，但框架还没把文本塞进去，aria-live 就空转一次。
典型表现：表单提交后，错误消息 div 渲染了，但屏幕阅读器只读出“错误”，没读出具体字段名（如“邮箱格式不正确”）。
- 不要把
aria-live区域写死在模板顶层，而应和动态内容同级，由框架控制其存在与内容更新 - 在 Vue 中，用
v-if控制aria-live区域显隐，比v-show更稳妥（后者保留 DOM 但aria-hidden="true"可能干扰播报） - React 中避免直接用
innerHTML更新aria-live内容 —— 用textContent或受控组件，防止 HTML 注入破坏语义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
