HTML键盘导航与焦点管理教程

具体来说，你需要关注以下几个方面：

1. 语义化HTML元素优先： 尽可能使用浏览器原生支持键盘导航的元素。比如，一个点击后有行为的文本，就应该用

<div role="button" tabindex="0" aria-label="点击下载文件">
  <img src="download.svg" alt=""> 下载
</div>

这里 role="button" 和 aria-label 也很重要，它们告诉辅助技术这个 div 的真实作用。设置 tabindex="0" 后，这个 div 就会按照它在文档中的自然顺序被Tab键选中。这对于构建自定义组件（比如一个可展开/折叠的面板头部）非常有用。

2. tabindex="-1"：编程性聚焦，但不参与Tab顺序

tabindex="-1" 意味着这个元素不能通过Tab键直接选中，但你可以用JavaScript的 element.focus() 方法来强制将焦点设置到它上面。

<div id="error-message" tabindex="-1" role="alert" style="color: red;">
  请输入有效的邮箱地址。
</div>
<button onclick="submitForm()">提交</button>

当用户提交表单失败时，你可能希望将焦点直接跳到错误信息上，这样屏幕阅读器用户就能立即听到错误内容。

function submitForm() {
  // 假设表单验证失败
  const errorMessage = document.getElementById('error-message');
  errorMessage.focus(); // 编程性地将焦点设置到错误信息上
}

这种用法非常适合处理动态内容更新、错误提示、模态框打开后的首个可交互元素，或者将焦点返回到之前的位置。它不会打乱用户的Tab键导航流程，只在特定逻辑下进行焦点转移。

3. 避免使用 tabindex="正整数" (如 tabindex="1", tabindex="2")

说实话，这是我最不推荐的用法。当你给元素设置 tabindex="1"、tabindex="2" 等正整数时，它们会脱离文档流的自然顺序，按照数值从小到大的顺序优先获得焦点。

<!-- 糟糕的实践！ -->
<button tabindex="2">第二个按钮</button>
&lt;input type=&quot;text&quot; tabindex=&quot;1&quot;&gt;
<a href="#" tabindex="3">第三个链接</a>

这样做会带来几个严重的问题：

• 维护困难： 页面结构一旦调整，你可能需要重新编号所有的 tabindex，这简直是灾难。
• 用户困惑： 用户习惯了Tab键按照视觉顺序或文档流顺序前进，这种跳跃式的焦点顺序会让他们感到非常困惑，不知道下一个焦点会出现在哪里。
• 无障碍性问题： 屏幕阅读器通常会按照文档流顺序来朗读内容，而焦点却在乱跳，这会严重破坏用户体验。

如果你的设计需要一个非标准的焦点顺序，那通常意味着你的HTML结构本身可能就不够语义化，或者你的UI设计存在缺陷。我的建议是，先尝试调整HTML元素的物理顺序，让它们在文档流中就符合逻辑上的焦点顺序。如果实在无法通过调整HTML结构来达到目的，再考虑使用JavaScript进行更精细的焦点管理，而不是滥用 tabindex 的正整数值。保持Tab键的自然流动，对用户来说才是最友好的。

在复杂组件中，如何通过 JavaScript 管理键盘焦点？

在构建像模态框、下拉菜单、选项卡（Tabs）、自动完成输入框或自定义日期选择器这类复杂组件时，光靠HTML和CSS往往无法满足无障碍性要求。这时，JavaScript就成了管理键盘焦点的核心工具，它能帮助我们实现更精细、更符合用户预期的交互行为。

1. 模态框（Modal Dialogs）的焦点管理

模态框是键盘焦点管理中最经典的场景之一。

• 打开时聚焦： 当模态框打开时，焦点应该立即转移到模态框内部的第一个可交互元素（比如一个关闭按钮或表单输入框）。

  function openModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = 'block';
    const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex="0"]');
    if (firstFocusableElement) {
      firstFocusableElement.focus();
    }
    // 存储触发模态框打开的元素，以便关闭时恢复焦点
    document.body.dataset.previousFocus = document.activeElement.id || '';
  }

• 焦点捕获（Focus Trapping）： 确保当模态框打开时，Tab键的焦点不会跳到模态框后面的页面内容上。这意味着焦点必须在模态框内部循环。这通常需要监听模态框内部的 keydown 事件，特别是 Tab 键。

  modal.addEventListener('keydown', function(e) {
    if (e.key === 'Tab') {
      const focusableElements = Array.from(modal.querySelectorAll('button, [href], input, select, textarea, [tabindex="0"], [tabindex="-1"]'))
                                  .filter(el => el.tabIndex !== -1); // 排除tabindex="-1"的元素
      const firstFocusable = focusableElements[0];
      const lastFocusable = focusableElements[focusableElements.length - 1];
  
      if (e.shiftKey) { // Shift + Tab
        if (document.activeElement === firstFocusable) {
          lastFocusable.focus();
          e.preventDefault();
        }
      } else { // Tab
        if (document.activeElement === lastFocusable) {
          firstFocusable.focus();
          e.preventDefault();
        }
      }
    }
    if (e.key === 'Escape') { // Esc键关闭模态框
      closeModal();
    }
  });

• 关闭时恢复焦点： 当模态框关闭时，焦点应该返回到打开模态框的那个元素上。

  function closeModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = 'none';
    const previousFocusElementId = document.body.dataset.previousFocus;
    if (previousFocusElementId) {
      const previousFocusElement = document.getElementById(previousFocusElementId);
      if (previousFocusElement) {
        previousFocusElement.focus();
      }
    }
  }

2. 自定义组件内部导航（例如下拉菜单、选项卡）

对于自定义的下拉菜单或选项卡组件，用户可能期望使用方向键（上、下、左、右）来导航内部选项，而不是仅仅依靠Tab键。

• 下拉菜单/列表：

  const dropdownList = document.getElementById('myDropdownList');
  let currentSelectedIndex = -1; // 跟踪当前选中项
  
  dropdownList.addEventListener('keydown', function(e) {
    const items = Array.from(this.children); // 假设子元素是列表项
  
    if (e.key === 'ArrowDown') {
      currentSelectedIndex = (currentSelectedIndex + 1) % items.length;
      items[currentSelectedIndex].focus();
      e.preventDefault(); // 阻止页面滚动
    } else if (e.key === 'ArrowUp') {
      currentSelectedIndex = (currentSelectedIndex - 1 + items.length) % items.length;
      items[currentSelectedIndex].focus();
      e.preventDefault();
    } else if (e.key === 'Enter') {
      // 模拟点击当前选中项
      items[currentSelectedIndex].click();
      e.preventDefault();
    }
  });

  这里，每个列表项可能需要 tabindex="-1" 才能被编程性聚焦，而整个下拉列表容器可能需要 tabindex="0" 来接收初始焦点。

• 选项卡（Tabs）： 使用 ArrowLeft 和 ArrowRight 键在选项卡之间切换。

  <div role="tablist">
    <button role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</button>
    <button role="tab" id="tab2" aria-controls="panel2" tabindex="-1">Tab 2</button>
    <button role="tab" id="tab3" aria-controls="panel3" tabindex="-1">Tab 3</button>
  </div>
  <div id="panel1" role="tabpanel" aria-labelledby="tab1">...</div>
  <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>...</div>
  <div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>...</div>

  JavaScript会监听 keydown 事件，当用户按下左右箭头时，切换 tabindex 和 aria-selected 属性，并调用 focus() 方法。

3. element.focus() 和 event.preventDefault()

• element.focus()： 这是JavaScript中用于将焦点设置到特定元素上的核心方法。确保目标元素是可聚焦的（要么是原生可聚焦，要么设置了 tabindex="0" 或 tabindex="-1"）。
• event.preventDefault()： 在处理键盘事件时，如果你的自定义行为与浏览器默认行为冲突（例如，按下 Tab 键时，你希望焦点停留在模态框内而不是跳出），一定要调用 e.preventDefault() 来阻止浏览器的默认行为。

4. ARIA属性辅助

除了焦点管理，ARIA（Accessible Rich Internet Applications）属性也至关重要，它们为辅助技术提供了组件的语义信息。

• role="dialog"、role="tablist"、role="tab"、role="tabpanel"：定义组件类型。
• aria-labelledby、aria-describedby：将元素与可读文本关联起来。
• aria-expanded：表示一个可折叠/展开的元素当前的状态。
• aria-hidden="true"：当元素不可见或不应被辅助技术访问时使用。

总的来说，JavaScript在复杂组件中的焦点管理是一个细致活。它要求开发者深入理解用户行为、键盘交互模式，并结合ARIA属性，才能构建出既功能强大又无障碍的交互体验。这可能需要一些额外的开发成本，但从长远来看，它大大提升了产品的可用性和用户覆盖面。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~