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