HTML底层语义架构和辅助技术可访问性对接

时间：2026-07-12 10:54:46 编辑：袖梨来源：一聚教程网

nav标签必须包裹可跳转的链接集合，单独包裹按钮、图标或纯文本会导致语义失效；main只能出现一次且不可嵌套；h1全页唯一并须位于main内，标题层级须严格递进。

单独用 <nav> 包一个按钮、一个图标或纯文本，屏幕阅读器会识别为 role="navigation"，但内部无跳转能力，直接忽略导航意图。它不是“有导航样式的容器”，而是“可跳转的链接组”专用标记。

常见错误现象：

正确做法：

确保每个 <nav> 至少含一个有效 <a href> 或带 tabindex="0" + role="link" 的可聚焦元素
必须用 <ul><li> 套链接，不可用 <div> 模拟列表（即使加 role="list" 兼容性也差）
共存多个 <nav> 时，必须配 aria-label，如 <nav aria-label="主导航"> 和 <nav aria-label="文章内目录">

<main> 表示页面唯一主体内容区，浏览器和读屏软件靠它提供“跳转到主要内容”快捷指令。一旦重复或嵌套，辅助技术会丢弃该区域，用户被迫线性听完整页。

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

典型误用场景：

在 <section> 或 <article> 内再写一个 <main> —— 违反规范，部分读屏直接跳过整块
页面顶部用 <header>，中间用 <main>，底部又塞一个 <main> —— 第二个 <main> 被忽略，页脚内容被当成正文一部分朗读
用 CSS 隐藏了 <main> 但没设 aria-hidden="true"，导致视觉不可见但语音仍播报

实操建议：

屏幕阅读器依赖 <h1>–<h6> 构建文档大纲（outline），跳级或乱序会导致“子章节突然变成父章节”，用户无法建立稳定认知路径。

常见错误现象：

关键约束：

全页严格只有一个 <h1>，代表页面核心主题（如文章标题、产品名称）
每个 <section> 或 <article> 应以 <h2> 起始（若整体已用 <h1>）
CSS 隐藏标题时，必须用 position: absolute; clip: rect(1px, 1px, 1px, 1px);，禁用 display: none 或 visibility: hidden

原生语义标签（如 <nav>、<main>、<button>）自带角色（role）、名称（name）和状态（state）。乱加 ARIA 属性反而覆盖默认行为，导致读屏误解或静默失败。

容易踩的坑：

给已有 <label for="xxx"> 的 <input> 再加 aria-labelledby —— 读屏重复播报两次
模态框没设 role="dialog" + aria-modal="true"，仅靠 aria-hidden="true" 关闭背景 —— 键盘焦点仍可进入背景内容
用 aria-current="true" 标识当前页 —— 不是合法值，NVDA 忽略，应始终用 aria-current="page"

原则：

语义化不是标签堆砌，而是让每个标签承载它本该表达的含义；最常被忽略的，是那些看似“不影响视觉”的结构性断裂——比如缺失 <h1>、<main> 嵌套、或 <nav> 里没链接。这些地方机器不会报错，但人会因此卡在页面里。