跳到主要内容

HTML 键盘导航

介绍​

在现代网页开发中，确保网站对所有用户都具有可访问性是至关重要的。键盘导航是Web可访问性的核心部分，它允许用户在不使用鼠标的情况下浏览和与网页交互。这对于依赖键盘的用户（如视力障碍者或行动不便者）尤为重要。

本文将详细介绍如何在HTML中实现键盘导航，并提供实际案例和代码示例，帮助你为所有用户创建更友好的网站。

什么是键盘导航？​

键盘导航是指用户通过键盘（通常是Tab键、方向键、Enter键等）在网页中移动焦点并与之交互的能力。一个良好的键盘导航体验应确保：

  1. 焦点顺序合理：用户按下Tab键时，焦点应按逻辑顺序移动。
  2. 可交互元素可访问：所有可交互元素（如按钮、链接、表单控件）都应可以通过键盘访问。
  3. 清晰的焦点指示：用户应能清楚地看到当前聚焦的元素。

实现键盘导航的基础​

1. 使用语义化HTML​

语义化HTML是键盘导航的基础。浏览器会根据HTML元素的语义自动处理键盘导航。例如：

  • <a> 标签用于链接，默认可以通过Tab键聚焦。
  • <button> 标签用于按钮，默认可以通过Tab键聚焦。
  • <input>、<select> 和 <textarea> 等表单元素也默认支持键盘导航。

示例：

html
<a href="#about">关于我们</a>
<button onclick="alert('按钮被点击！')">点击我</button>
<input type="text" placeholder="请输入内容" />
提示

始终使用语义化的HTML元素，而不是用 <div> 或 <span> 模拟可交互元素。这样可以确保默认的键盘导航行为。

2. 管理焦点顺序​

焦点顺序由HTML元素的顺序决定。你可以通过 tabindex 属性来控制元素的焦点顺序：

  • tabindex="0"：将元素添加到自然的Tab顺序中。
  • tabindex="-1"：使元素可通过JavaScript聚焦，但不添加到自然的Tab顺序中。
  • tabindex="1" 或更高值：强制改变焦点顺序（不推荐使用，可能导致混乱）。

示例：

html
<button tabindex="0">第一个按钮</button>
<button tabindex="1">第二个按钮</button>
<button tabindex="-1">不可通过Tab聚焦的按钮</button>
警告

避免使用 tabindex 值大于0，因为它会破坏自然的焦点顺序，可能导致用户体验不佳。

3. 自定义焦点样式​

默认情况下，浏览器会为聚焦的元素添加一个轮廓（通常是蓝色边框）。你可以通过CSS自定义焦点样式，但不要完全移除它。

示例：

css
button:focus {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}
注意

不要使用 outline: none; 移除焦点样式，这会使依赖键盘导航的用户无法看到当前聚焦的元素。

实际案例​

案例1：模态对话框​

模态对话框是一个常见的需要键盘导航的场景。以下是一个简单的模态对话框实现：

html
<button onclick="openModal()">打开对话框</button>

<div id="modal" style="display: none;">
  <h2>这是一个模态对话框</h2>
  <p>按ESC键关闭对话框。</p>
  <button onclick="closeModal()">关闭</button>
</div>

<script>
  function openModal() {
    const modal = document.getElementById('modal');
    modal.style.display = 'block';
    modal.querySelector('button').focus(); // 将焦点移动到关闭按钮
    document.addEventListener('keydown', handleEscape);
  }

  function closeModal() {
    const modal = document.getElementById('modal');
    modal.style.display = 'none';
    document.removeEventListener('keydown', handleEscape);
  }

  function handleEscape(event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  }
</script>
备注

在这个例子中，我们确保模态对话框打开时焦点被正确管理，并且用户可以通过ESC键关闭对话框。

案例2：下拉菜单​

下拉菜单是另一个需要键盘导航的常见组件。以下是一个简单的实现：

html
<button aria-expanded="false" onclick="toggleMenu()">菜单</button>
<ul id="menu" style="display: none;">
  <li><a href="#item1">项目1</a></li>
  <li><a href="#item2">项目2</a></li>
  <li><a href="#item3">项目3</a></li>
</ul>

<script>
  function toggleMenu() {
    const menu = document.getElementById('menu');
    const isExpanded = menu.style.display === 'block';
    menu.style.display = isExpanded ? 'none' : 'block';
    document.querySelector('button').setAttribute('aria-expanded', !isExpanded);
  }
</script>
提示

使用 aria-expanded 属性来指示菜单的展开状态，这对屏幕阅读器用户非常有用。

总结​

键盘导航是Web可访问性的重要组成部分。通过使用语义化HTML、管理焦点顺序和自定义焦点样式，你可以确保网站对所有用户都具有良好的可访问性。记住，始终测试你的网站，确保键盘用户可以轻松浏览和交互。

附加资源与练习​

资源​

练习​

  1. 创建一个包含多个表单字段的页面，并确保用户可以通过Tab键按逻辑顺序导航。
  2. 实现一个自定义的下拉菜单，并确保它可以通过键盘完全操作。
  3. 测试你的网站，尝试仅使用键盘浏览所有页面，并记录需要改进的地方。