直接改html标签比加aria更有效安全，因结构性错误（如div冒充按钮、main嵌套在div里、缺lang属性）会导致屏幕阅读器彻底失语；必须用语义标签替换非语义容器，确保lang="zh-cn"、为body直接子元素、标题层级连续、表单label显式关联。
直接改 HTML 标签比加 ARIA 属性更有效，也更安全。很多页面无障碍问题根源不在“没加 aria-label”，而在用了 <div> 冒充按钮、用 <code><span></span> 当标题、<main></main> 嵌套在 <div> 里——这些结构错误会让屏幕阅读器彻底失语。
<h3>检查并修复根级结构与语言声明</h3>
<p>不带 <code>lang 属性的 HTML 页面，NVDA 和 VoiceOver 很可能把中文读成日文或英文；没有 或多个同级 <code><div> 直接挂在 <code> 下，会导致 DOM 树解析异常、SSR 渲染错乱。
-
标签必须带lang="zh-CN"（简体）或lang="zh-TW"（繁体），不能只写lang="zh"或留空 -
<meta charset="UTF-8">必须出现在最前面，且不能被 JS 动态插入 -
<main></main>必须是的**直接子元素**，不能包在<div class="wrapper"> 之类容器里 <li>全页只能有一个 <code><main></main>；若存在多个逻辑主区（如双栏文章+侧边推荐），应只把核心正文放进<main></main>，其余用<aside></aside> - 导航区域统一用
<nav aria-label="主导航"></nav>，面包屑用<nav aria-label="面包屑"><ol></ol></nav>，避免多个<nav></nav>无区分地堆在一起 -
<section></section>必须以<h2></h2>–<h6></h6>开头，否则语义退化为普通<div>；不要用它替代 <code><article></article>包裹独立内容（如博客正文） - 所有按钮交互必须用
<button></button>，链接必须用<a href></a>；禁止<div role="button"> + <code>tabindex="0"+ 手动监听事件的组合 -
<figure></figure>+<figcaption></figcaption>替代图文混排的<div class="img-wrap">，让读屏明确识别图像与说明的关系 <h3>校验标题层级与表单可访问性</h3> <p>标题跳级（比如 <code><h2></h2>后直接<h4></h4>）不是“看起来差不多”，而是会让屏幕阅读器用户导航时直接“掉出章节”。表单没配<label></label>，等于关闭了视障用户的输入入口。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用浏览器 DevTools 的 Accessibility 面板检查标题树，确保
<h1></h1>–<h6></h6>连续、不跳跃；JS 动态插入的标题也要同步补全层级 - 每个
<input>、<select></select>、<textarea></textarea>必须有显式<label for="xxx"></label>或包裹式<label><input>xxx</label> -
<img>的alt属性不能缺失、不能为空值（alt）、不能写 “图片” 或 “图标”；装饰图写alt=""，功能图写动作（如alt="提交表单"） - 禁用默认焦点框（
outline: none）前，必须提供等效视觉样式，例如：button:focus { outline: 2px solid #007aff; outline-offset: 2px; }
别依赖 ARIA 修补结构性缺陷
给一个嵌套在
<div> 里的 <code><main></main>加role="main"，不会让它被正确识别——浏览器和 AT 已在解析阶段丢弃了该节点的语义上下文。ARIA 是补丁，不是胶水；原生语义失效的地方，ARIA 往往也无效。- 优先删掉冗余
role：比如<button role="button"></button>、<nav role="navigation"></nav>，纯属重复且干扰可访问性树 -
aria-hidden="true"只用于视觉隐藏但需保持 DOM 存在的内容（如加载动画），不能替代display: none；后者才是真正移除可访问性暴露 - 模态框打开后，焦点必须锁定在内部；用
inert属性（现代浏览器）或手动管理tabindex，而非仅靠aria-modal="true" - 所有自定义组件（下拉、开关、滑块）必须同时满足：键盘可操作、状态可感知（
aria-expanded/aria-checked）、角色明确（role="combobox"等），缺一不可
最常被忽略的是：重构后没在真实 AT 环境中验证。NVDA + Chrome、VoiceOver + Safari、TalkBack + Android WebView，三者行为差异很大；仅靠 axe 或 Lighthouse 扫描，会漏掉焦点流断裂、朗读顺序错乱等关键问题。
- 用浏览器 DevTools 的 Accessibility 面板检查标题树，确保
替换非语义容器为语义化标签
把 <div class="header"> 改成 <code><header></header> 不是“锦上添花”，而是让 AT 用户按 H 键就能跳到页头；把 <div onclick="submit()"> 换成 <code><button></button> 后，键盘用户 Tab 就能聚焦、回车就能触发——不用手写 tabindex 和 keydown。
