HTML无障碍改版核心是构建真实反映内容逻辑的语义结构：严格遵循h1→h2→h3层级、合理使用nav/main/aside等语义标签、精准设置aria-live和alt属性，并从DOM骨架重构起步。
HTML网站无障碍改版不是加几个 aria-label 就完事，核心在于语义结构是否真实反映内容逻辑——爬虫和屏幕阅读器都靠这个“骨架”理解页面。
为什么 <h1> 只能有一个，且不能跳级用 <h4>
标题层级是语义结构的主干。百度爬虫和 NVDA、VoiceOver 等读屏软件都依赖连续、嵌套的 <h1>→<h2>→<h3> 判断信息重要性与从属关系。跳级（比如 <h2> 后直接写 <h4>）会让辅助技术误判内容断裂，也会让爬虫降低该区块的索引权重。
- 每个页面严格只设一个
<h1>，通常是主标题或品牌名 -
<h2>用于一级栏目或主要内容区块标题 - 子内容用
<h3>，不跨级，不为“视觉样式好看”而改用<h4> - 避免用
<div>+ CSS 字体大小模拟标题——爬虫和读屏器完全无视
<nav>、<main>、<aside> 这些语义标签真有用吗
有用，而且是基础级有效。它们不是装饰，而是给爬虫和辅助技术提供“区域地图”。百度在 2025 年后明确将 <main> 内容作为页面主体文本的首要抓取范围；未包裹在 <main> 中的正文，可能被降权或延迟索引。
-
<nav>包围主导航、面包屑等导航链路，读屏用户可一键跳转 -
<main>必须且仅出现一次，包裹真正的内容主体（不含 header/footer） -
<aside>用于侧边栏、相关链接等辅助信息，不参与主内容权重计算 - 别用
<section>或<div>替代——它们无语义，等于没标
什么时候必须加 aria-live，什么时候反而有害
aria-live 是动态内容的“广播开关”，只适用于真实需要即时播报的更新（如表单校验提示、实时消息弹窗）。滥用会导致读屏器频繁中断用户操作，百度爬虫也可能因反复重渲染而漏抓静态文本。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 仅对通过 JS 插入、且用户需立即感知的内容加
aria-live="polite"（如搜索建议列表） - 表单错误提示要绑定
aria-invalid="true"+aria-describedby指向具体错误文案 - 禁止给整个
<main>或轮播图容器加aria-live——这是典型误用 -
aria-live="assertive"仅用于严重中断型提示（如会话超时警告），否则干扰极大
alt 属性写什么，才既过无障碍审核又利于 SEO
alt 不是关键词堆砌区，也不是“图片”“示意图”这种无效描述。它必须准确传达图片在当前上下文中的功能或信息价值。百度图像搜索和读屏器都依赖这个字段做内容匹配。
- 纯装饰图：用空字符串
alt=""（不是省略，不是alt=" "） - 信息图/图表：写清数据结论，例如
alt="2025年Q2移动端访问占比达68%，同比上升12%" - 按钮内图标：结合功能写，如搜索按钮里的放大镜图标，应为
alt="搜索"，而非alt="放大镜" - 含文字的截图类图片：优先用 HTML 文本替代；若必须用图，
alt需完整抄录可读文字
最常被忽略的一点：无障碍不是上线前贴个 aria-label 就能补救的。如果原始 DOM 结构混乱、焦点顺序错乱、表单控件没 label[for] 绑定，再好的 ARIA 也救不回可用性。改版必须从 HTML 骨架重搭开始，而不是在旧代码上打补丁。
