不重写dom结构仅靠aria或css无法达到wcag 2.1 aa合规；必须从根节点开始深度重组，校验doctype、lang属性、语义标签使用、分层alt处理、的iso 8601 datetime属性及与的语义区分。
满足合规认证（如 WCAG 2.1 AA 级、EN 301 549 或 ADA 合规）的网站可访问性，不是靠加几个 aria- 属性就能过关的，而是必须从 HTML 结构层就建立语义正确、状态可控、焦点可预测的基础。自动化工具扫出“0 错误”不等于合规，但结构硬伤（比如缺 lang、多 <main></main>、<img> 没 alt）一定会被审计否决。
HTML 开头必须强制声明 lang 和 charset
这是所有合规审计的第一道门槛。没声明 lang，屏幕阅读器会用默认语言（通常是英文）读中文页面，关键术语全错；没声明 charset 或位置不对，旧 WebView 可能回退到 ISO-8859-1，导致 DOM 解析中断或乱码——这两类问题在 EN 301 549 测试中直接归为“严重缺陷”。
-
lang必须写全，例如lang="zh-CN"，不能只写lang="zh"；港澳台地区需用zh-HK或zh-TW -
charset必须放在最前面，紧挨<title></title>前：<meta charset="UTF-8"> <title>首页</title> - 若用 SSR/SSG（如 Next.js），确保服务端渲染时每个页面都注入正确的
lang，不要依赖 JS 动态改document.documentElement.lang
<main></main> 必须全局唯一且仅包裹核心内容
WCAG 2.2 明确要求 <main></main> 只能出现一次，且不能嵌套在 <section></section>、<article></article> 或其他语义容器内。多个 <main></main> 或它里面塞了侧边栏、广告位、页脚链接，会导致 NVDA/VoiceOver 跳转失败或跳过正文——这在 ADA 诉讼中属于高频败诉点。
- 检查方法：Chrome DevTools → Elements 面板 → 搜索
<main>，确认只有一处，且其父节点是 <code> - 常见错误：Next.js Layout 组件里写了
<main></main>，子页面又渲染一个；或者<main></main>包了顶部 banner + 左侧导航 + 内容区 - 正确做法：所有非主内容（导航、广告、相关推荐）都放在
<main></main>外部，用<header></header>、<nav></nav>、<aside></aside>等包裹
表单控件必须显式绑定 <label></label>，禁用 title 替代
表单是合规审计最常扣分的区域。title 属性对多数屏幕阅读器无效，且不参与焦点逻辑；仅靠 CSS 视觉对齐（文字挨着输入框）完全无法被辅助技术识别。WCAG 3.3.2 要求所有用户都能理解每个输入框的用途，这只能靠显式关联实现。
- 推荐写法一：
<label for="email">邮箱</label><input id="email" type="email"> - 推荐写法二（模板限制时）：
<label>邮箱<input type="email"></label> - 绝对避免：
<div>邮箱<input type="email"> </div>或<input title="邮箱" type="email"> - 自定义复选框/单选按钮必须同步
aria-checked和tabindex，否则键盘用户无法操作
图片 alt 不是可选项，而是信息等价的强制声明
<img> 缺 alt 是 W3C Validator 的硬性 Error，也是 WCAG 1.1.1 的 A 级必达项。但更关键的是写法：空字符串 alt="" 合法，但仅限纯装饰图；任何承载功能或信息的图片，alt 必须传达等价含义，而非描述文件名或绕开问题。
- 功能图标（如搜索、关闭）：
alt="搜索"，不是alt="search-icon.png" - 数据图表：
alt="2025年Q3用户留存率上升12%，达84%"，不是alt="柱状图" - 纯装饰图：
alt=""（空字符串），不是alt="装饰图"或留空不写 - 复杂图表/流程图：仍需提供有意义的
alt概括结论，并用<figure><figcaption></figcaption></figure>补充细节
真正卡住合规认证的，往往不是那些炫技的 ARIA 模式，而是这些基础 HTML 层的硬性约束：开头两行是否合规、<main></main> 是否干净、表单能否被键盘用户独立操作、每张图是否传递了等价信息。它们不难，但一旦漏掉，后续所有 ARIA 和 JS 补救都无效——因为可访问性树的根已经断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
