编辑“︁HTML无障碍导航”︁

= HTML无障碍导航 =

HTML无障碍导航（Accessible Navigation）是指通过语义化HTML结构和ARIA属性，确保所有用户（包括使用屏幕阅读器等辅助技术的残障人士）能够清晰理解并顺畅浏览网站导航系统的设计方法。它是[[Web无障碍性|WCAG 2.1]]指南中"可操作性原则"的核心组成部分。

== 核心概念 ==
导航系统的无障碍性体现在以下维度：
* '''键盘可操作性'''：无需鼠标即可通过Tab键遍历
* '''屏幕阅读器兼容性'''：朗读逻辑与视觉顺序一致
* '''焦点可见性'''：当前聚焦元素有明确视觉反馈
* '''跳过机制'''：允许跳过重复的导航内容

=== 键盘导航基础 ===
标准HTML元素（如`<a>`、`<button>`）默认具备键盘可操作性。测试时需验证：
1. 能否用Tab键（Shift+Tab反向）聚焦所有交互元素
2. Enter/Space能否激活元素
3. 箭头键在菜单中是否有效

<syntaxhighlight lang="html">
<!-- 良好的导航示例 -->
<nav aria-label="主菜单">
  <ul>
    <li><a href="#home" tabindex="0">首页</a></li>
    <li><a href="#services" tabindex="0">服务</a></li>
    <li><a href="#contact" tabindex="0">联系我们</a></li>
  </ul>
</nav>
</syntaxhighlight>

== 语义化结构 ==
=== 导航地标 ===
使用`<nav>`元素定义导航区域，配合`aria-label`提供描述：

<syntaxhighlight lang="html">
<nav aria-label="快速链接">
  <!-- 链接列表 -->
</nav>
</syntaxhighlight>

=== 列表结构 ===
导航项应包裹在`<ul>`/`<ol>`中，这为屏幕阅读器提供项目数量信息：

<syntaxhighlight lang="html">
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>
</syntaxhighlight>

== ARIA增强 ==
对于复杂导航（如多级菜单），需使用WAI-ARIA属性：

{| class="wikitable"
|+ ARIA导航属性对照表
! 属性 !! 用途 !! 示例

| `aria-current` || 标识当前页面 || `aria-current="page"`
| `aria-haspopup` || 指示有子菜单 || `aria-haspopup="true"`
| `aria-expanded` || 控制子菜单状态 || `aria-expanded="false"`
|}

<syntaxhighlight lang="html">
<!-- 带ARIA的多级菜单 -->
<nav aria-label="产品导航">
  <ul>
    <li>
      <button aria-expanded="false" aria-haspopup="true">产品分类</button>
      <ul>
        <li><a href="/products/software">软件</a></li>
        <li><a href="/products/hardware">硬件</a></li>
      </ul>
    </li>
  </ul>
</nav>
</syntaxhighlight>

== 跳过链接 ==
为重复的导航添加"跳过链接"，允许直接跳至主要内容：

<syntaxhighlight lang="html">
<a href="#main-content" class="skip-link">跳至主要内容</a>
...
<main id="main-content">
  <!-- 页面主要内容 -->
</main>

<style>
  .skip-link {
    position: absolute;
    left: -9999px;
  }
  .skip-link:focus {
    left: 10px;
  }
</style>
</syntaxhighlight>

== 视觉反馈 ==
必须为焦点状态提供明显样式，例如：

<syntaxhighlight lang="css">
a:focus, button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}
</syntaxhighlight>

== 移动端考虑 ==
在触控设备上需注意：
* 确保触摸目标不小于48×48px
* 避免悬停(:hover)触发关键功能
* 视口缩放不影响导航可用性

<mermaid>
flowchart TD
    A[用户触发导航] --> B{键盘用户?}
    B -->|是| C[焦点管理]
    B -->|否| D[指针交互]
    C --> E[箭头键操作子菜单]
    D --> F[触摸/鼠标事件]
</mermaid>

== 测试方法 ==
1. '''键盘测试'''：仅用Tab键遍历整个导航
2. '''屏幕阅读器测试'''：使用NVDA/VoiceOver验证朗读顺序
3. '''颜色对比度'''：文本与背景至少4.5:1的对比度
4. '''缩放测试'''：放大到200%仍可操作

== 实际案例 ==
'''电商网站导航改造前：'''
<syntaxhighlight lang="html">
<div class="menu">
  <span>产品</span>
  <div class="submenu">
    <a href="/phones">手机</a>
    <a href="/laptops">笔记本</a>
  </div>
</div>
</syntaxhighlight>

'''问题诊断：'''
* 无语义化标签
* 键盘无法操作子菜单
* 屏幕阅读器无法识别层级关系

'''改造后方案：'''
<syntaxhighlight lang="html">
<nav aria-label="产品分类">
  <ul>
    <li>
      <button aria-expanded="false" aria-haspopup="true" id="products-btn">产品</button>
      <ul aria-labelledby="products-btn">
        <li><a href="/phones">手机</a></li>
        <li><a href="/laptops">笔记本</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  document.getElementById('products-btn').addEventListener('click', function() {
    const expanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', !expanded);
  });
</script>
</syntaxhighlight>

== 数学基础 ==
计算导航项的理论可访问性得分：

<math>
Accessibility\ Score = \frac{\sum(Semantics + Keyboard + ARIA)}{Total\ Items} \times 100\%
</math>

其中各参数取值为：
* Semantics ∈ {0,1}（是否使用语义化标签）
* Keyboard ∈ {0,1}（是否支持键盘操作）
* ARIA ∈ {0,0.5,1}（ARIA属性完整度）

== 进阶技巧 ==
* '''动态内容加载'''：使用`aria-live`区域通知导航变化
* '''快捷键'''：通过`accesskey`属性分配（但需谨慎使用）
* '''面包屑导航'''：添加`aria-label="breadcrumb"`

== 常见错误 ==
1. 使用`<div>`代替`<button>`作为可点击元素
2. 依赖CSS`:hover`显示子菜单
3. 移除默认焦点样式而未提供替代方案
4. 忽略移动设备的触摸目标尺寸

== 延伸阅读 ==
* [[Web无障碍性]]
* [[WAI-ARIA]]
* [[语义化HTML]]

[[Category:HTML学习路径]]
[[Category:网页无障碍性]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML可访问性]]