不重写 DOM 结构仅靠 ARIA 或 CSS 无法达到 WCAG 2.1 AA 合规；必须从 <html> 根节点开始深度重组，校验 DOCTYPE、lang 属性、语义标签（如 <nav> <main> <aside>）的正确使用、<img> 的分层 alt 处理、<time> 的 ISO 8601 datetime 属性及 <article> 与 <section> 的语义区分。
直接说结论：不重写 DOM 结构，只加 ARIA 或改 CSS，不可能达到 WCAG 2.1 AA 级合规。真正的深度重组必须从 <html> 根节点开始，逐层校验语义完整性、可访问性树构建路径和机器可读性表达。
DOCTYPE 和 <html> 标签是否被跳过验证
这是所有审查的第一道关卡，也是最容易被忽略的“基础失效点”。很多项目用 SSR 模板生成 HTML，但开发者只检查组件内片段，忘了确认最终输出的顶层结构。
- 打开 Chrome DevTools → Elements 面板，第一行必须是
<!DOCTYPE html>，第二行必须是<html lang="zh-CN">（lang属性不可省略） - 禁止使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类 XHTML 遗留写法，它会触发怪异模式，导致无障碍树构建异常 - 若用 Vite/Next.js/Nuxt，检查
index.html或app.html模板文件，而非仅看v-html或dangerouslySetInnerHTML渲染的内容
<nav>、<main>、<aside> 是否被 div + role 替代
用 <div role="navigation"> 代替 <nav> 看似等价，实则切断了浏览器自动注入无障碍属性的能力——原生标签自带隐式 role、tabIndex 和焦点管理逻辑，而 div + role 必须手动补全所有交互细节，漏一项就失败。
-
<nav>必须包裹导航链接，且不应嵌套在<header>内作为唯一子元素（除非是页眉专属导航） -
<main>在整个页面中只能出现一次，且不能是<article>或<section>的子元素 -
<aside>不等于“侧边栏 CSS 类”，它代表与主内容相关但可独立存在的信息（如作者简介、延伸阅读），若只是广告位，用<section>更准确
<img> 的 alt 是否按功能/语义分层处理
alt 不是装饰性字段，它是语义网中图像的“文本锚点”。空字符串 alt="" 和无效描述如 alt="图片" 都会导致结构化数据（如 Schema.org ImageObject）解析失败，且让屏幕阅读器跳过关键操作意图。
立即学习“前端免费学习笔记（深入）”；
- 功能性图标（如搜索按钮旁的放大镜）必须写明操作目的：
alt="搜索网站内容"，而不是alt="放大镜图标" - 纯装饰图（如分割线背景图）才用
alt=""；省略alt属性本身即为错误 - 图表类图片需同时提供
alt和<figure><figcaption>，后者用于描述趋势或结论，前者用于说明图像类型与位置
<time> 的 datetime 是否符合 ISO 8601 且机器可解析
语义网要求时间必须可被爬虫、知识图谱和 RSS 阅读器无歧义提取。<time>2026年6月30日</time> 在视觉上没问题，但对机器来说等于没写——没有 datetime 属性，RDFa 解析器无法生成时间三元组。
-
datetime值必须是完整 ISO 8601 格式：datetime="2026-06-30"（日期）、datetime="2026-06-30T15:25:00+08:00"（带时区） - 禁止用斜杠、中文年月日、或省略前导零（如
"2026/6/30"或"2026-6-30"） - 视觉显示仍可用中文：
<time datetime="2026-06-30">2026年6月30日</time>，二者不冲突
真正难的不是加几个标签，而是判断某个模块到底该用 <article> 还是 <section>——这取决于它能否被独立订阅、引用或存档。一旦选错，语义网就认为“这部分内容不值得索引”。
