构建符合WCAG规范的HTML5结构布局核心在于语义正确、结构清晰、交互可访问：必须使用<header><nav><main><article><section><aside><footer>等语义化标签承担明确角色，<main>唯一且包裹主体内容，<nav>需用aria-label区分多导航区，<section>须配标题，图片必带alt属性（有意义描述或alt=""），所有交互元素需键盘可操作且焦点可见，表单控件必须显式关联<label>，文档首行为<!DOCTYPE html>，<html>标签必须含lang属性（如lang="zh-CN"），标题层级须线性递进，CSS布局不能替代语义结构。
构建符合 WCAG 规范的 HTML5 结构布局，核心在于语义正确、结构清晰、交互可访问。不是堆砌新标签，而是让每个标签承担它本该承担的含义和功能，同时为辅助技术提供可靠路径。
用对语义化标签，是无障碍的第一道门槛
HTML5 的 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 不是装饰性容器，而是有明确角色（role）的结构元素。屏幕阅读器依赖它们快速定位内容区块。
-
<main>必须且只能出现一次，包裹页面主体内容，相当于“当前视图的焦点区域” -
<nav>专用于导航链接集合，多个导航区可用aria-label区分，如<nav aria-label="主导航">和<nav aria-label="页脚导航"> -
<section>需配标题（<h2>–<h6>），否则会被视为无意义分组；避免仅用它替代<div>做样式隔离 - 所有图片必须带
alt属性：有意义的图写描述，纯装饰图写alt=""（空但不可省略）
确保键盘可操作与焦点可见
WCAG 2.1 要求所有功能可通过键盘完成，且焦点位置清晰可辨。
- 所有交互元素（按钮、链接、表单控件）天然支持 Tab 导航，但自定义组件（如用
<div role="button">模拟按钮）必须手动添加tabindex="0"并监听Enter/Space事件 - 避免用 CSS 隐藏焦点轮廓（如
outline: none），若需定制样式，请用:focus-visible或确保:focus有足够对比度的视觉反馈 - 表单控件必须显式关联
<label>：推荐用for/id方式，或直接包裹输入控件（<label>用户名 <input name="user"></label>）
结构层级与语言设置不能出错
错误的文档结构会直接破坏辅助技术解析逻辑。
- 文档开头必须是
<!DOCTYPE html>，且必须为第一行，前面不能有任何字符（包括 BOM、空格、注释） -
<html>标签必须带lang属性，中文页面统一用lang="zh-CN"；多语言混排时，局部元素单独加lang，如<span lang="en">JavaScript</span> - 标题层级要线性递进：
<h1>之后应为<h2>，跳级（如h1→h4）会导致阅读器跳过中间层级，丢失结构感知
配合 Flexbox/Grid 布局时守住语义底线
CSS 布局能力再强，也不能替代语义结构。
- Flexbox 或 Grid 容器本身不改变语义，但不要用它们“撑开”语义缺失的结构。例如：把一堆
<div>用display: grid排成导航栏，不如直接用<nav>包裹<ul> - 当用
display: contents或aria-hidden="true"隐藏某元素时，确认它不承载关键信息或交互功能，否则可能被屏幕阅读器完全忽略 - 使用
aria-labelledby或aria-describedby显式建立内容关联，比如让一个图标按钮的说明文字被正确朗读
不复杂但容易忽略。
