HTML网页内容层级划分对认知障碍用户是可用性底线：必须唯一且为直接子元素，每个<section>配连续层级的<h2>–<h6>标题、嵌套≤三层，表单控件紧邻提示文本并用aria-describedby指向真实id，错误提示加role="alert"，文字行高≥1.5、字号≥16px，语言须简洁主动。

HTML网页内容层级划分对认知障碍用户不是“有帮助”，而是决定他们能否独立完成任务的底线条件。结构混乱、跳级标题、嵌套过深或语义缺失，会直接导致用户迷失上下文、无法预测下一步操作、反复回溯确认——这不是体验问题，是可用性失效。

为什么

必须唯一且不能嵌套

认知障碍用户依赖页面的“锚点感”：一眼看到页头、知道哪块是核心内容、哪块是辅助信息。如果

被包在

或

里，或出现多次，屏幕阅读器和键盘导航就无法准确定位主任务区。

• <main></main>必须是的直接子元素，且全页面只出现一次
• 不能写成<div class="container"><main>...</main></div>，这会让辅助技术忽略它
• 若用框架（如React/Vue），需确保渲染后DOM中<main></main>位置真实、未被JS动态移除或包裹

为什么

要配

且嵌套不能超三层

认知障碍用户靠标题建立心理模型。“操作步骤”“注意事项”“常见问题”这些区块名，必须通过

显式声明，且顺序线性、不可跳跃。跳过

直接用

，等于撕掉说明书目录。

• 每个<section></section>必须包含且仅包含一个<h2></h2>（或

  –

  ，但需与上层连续）

禁止<section><section>...</section></section></section>这种双层嵌套；三层即顶限（

→

→

）

纯视觉分隔（如加一条横线）不用<section></section>，改用<hr>或CSS margin

为什么表单控件必须紧邻且禁用for/id错配

认知障碍用户不擅长跨区域关联信息。看到“请输入邮箱”，却要眼睛/耳朵去找那个带id="email"的<input>，中间还隔着几个

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

，就会中断操作流。

立即学习“前端免费学习笔记（深入）”；

• 优先用包裹式写法：<label>请输入邮箱<input type="email" id="email"></label>
• 若必须分离，for值必须与id完全一致（区分大小写、无空格），且id全局唯一
• 禁用<label for="email"></label><input id="email-input">这类错配——屏幕阅读器会静默跳过该控件
• 错误提示必须用role="alert"动态插入，不能只靠CSS显示/隐藏

为什么文字行高≥1.5、字号≥16px是硬约束而非样式偏好

这不是为了“看得更舒服”，而是防止视觉拥挤引发认知负荷激增。行高过小会让行间粘连，字号过小会迫使用户频繁缩放、丢失上下文位置——尤其在移动端， pinch-zoom 后焦点容易漂移，页面重排又打乱原有节奏。

• 禁止用rem换算后实际渲染小于16px，例如html { font-size: 62.5%; }再设font-size: 1.4rem → 实际14px，违规
• 行高必须用无单位数值（如line-height: 1.5），避免继承链中被像素值覆盖
• 段落间距 ≥ 行高的1.5倍，禁用<br>或margin-top硬调——用margin-bottom统一控制下边距即可

最容易被忽略的点：结构再规范，若文案用被动语态（“申请将被审核”）、堆砌术语（“执行身份核验流程”）、或链接写“点击此处”，所有HTML层级都白搭。可访问性始于标签，成于语言——而后者无法被自动检测工具捕获。