语义化导航

语义化导航通过 <nav> 标签和 ARIA 属性，明确标识导航区域及其用途。

基本结构

主导航

HTML

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products/">产品</a></li>
    <li><a href="/about/">关于我们</a></li>
    <li><a href="/contact/">联系方式</a></li>
  </ul>
</nav>

多导航区分

HTML

<nav aria-label="主导航">
  <ul>...</ul>
</nav>

<nav aria-label="用户导航">
  <ul>
    <li><a href="/login/">登录</a></li>
    <li><a href="/register/">注册</a></li>
  </ul>
</nav>

<nav aria-label="页脚导航">
  <ul>...</ul>
</nav>

导航类型

类型	aria-label	特点
主导航	"主导航"	核心页面入口
面包屑	"面包屑导航"	层级路径指示
侧边栏	"侧边栏导航"	辅助内容导航
页脚导航	"页脚导航"	补充链接
用户导航	"用户导航"	登录/账户相关

面包屑导航

HTML

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/tutorials/">教程</a></li>
    <li><a href="/tutorials/html/">HTML</a></li>
    <li><a href="/tutorials/html/semantic/" aria-current="page">语义化</a></li>
  </ol>
</nav>

面包屑特点

要素	实现
容器	`<nav>` + `aria-label`
列表	`<ol>`（有序）
当前页	`aria-current="page"`
分隔符	CSS伪元素实现

下拉导航

HTML

<nav aria-label="主导航">
  <ul>
    <li>
      <a href="/products/">产品</a>
      <ul aria-label="产品子菜单">
        <li><a href="/products/phone/">手机</a></li>
        <li><a href="/products/tablet/">平板</a></li>
      </ul>
    </li>
  </ul>
</nav>

键盘支持

HTML

<nav aria-label="主导航">
  <ul role="menubar">
    <li role="none">
      <a role="menuitem" href="/">首页</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-haspopup="true"
        aria-expanded="false"
      >
        产品
      </button>
      <ul role="menu" aria-label="产品">
        <li role="none">
          <a role="menuitem" href="/products/phone/">手机</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

当前状态标记

aria-current 属性

HTML

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products/" aria-current="page">产品</a></li> <!-- 当前页 -->
    <li><a href="/about/">关于</a></li>
  </ul>
</nav>

aria-current值	说明
page	当前页面
step	当前步骤
location	当前位置
date	当前日期
true	当前项（通用）

跳过导航链接

HTML

<body>
  <a href="#main-content" class="skip-link">跳过导航</a>

  <nav aria-label="主导航">
    <!-- 导航内容 -->
  </nav>

  <main id="main-content">
    <!-- 主要内容 -->
  </main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
}

.skip-link:focus {
  top: 0;
}
</style>

站点地图链接

HTML

<nav aria-label="站点地图">
  <h2>网站导航</h2>
  <ul>
    <li>
      <a href="/tutorials/">教程</a>
      <ul>
        <li><a href="/tutorials/html/">HTML</a></li>
        <li><a href="/tutorials/css/">CSS</a></li>
        <li><a href="/tutorials/js/">JavaScript</a></li>
      </ul>
    </li>
  </ul>
</nav>

注意：页面多导航时必须使用 aria-label 区分，屏幕阅读器会朗读导航标签帮助用户定位。

要点总结

<nav> 包裹导航区域，aria-label 区分多个导航
使用 <ul> 或 <ol> 构建导航列表
当前页面使用 aria-current="page" 标记
面包屑用 <ol> 表示层级顺序
提供跳过导航链接，方便键盘用户直达主内容