返回

Shift+Tab 导致 Safari/Chrome 键盘与VoiceOver焦点不一致问题及解法

javascript

Shift + Tab 导致 Safari 和 Chrome 键盘焦点与 VoiceOver 焦点行为不一致问题解析与解决方案

当使用 Shift + Tab 组合键在浏览器中进行反向 Tab 导航时，可能会遇到键盘焦点与 VoiceOver (VO) 焦点行为不一致的情况。具体表现为：键盘焦点已经移动到父元素，但 VoiceOver 焦点仍然停留在子元素，导致 VoiceOver 没有朗读父元素的相关信息。 这种现象在 Safari 和 Chrome 浏览器中都可能出现。本文将深入分析此问题产生的原因，并提供多种解决方案，帮助开发者构建更友好的无障碍体验。

问题根源：焦点同步与 VoiceOver 机制

键盘焦点与 VoiceOver 焦点不一致的核心原因在于两者对焦点的管理和同步机制不同。

  • 键盘焦点： 由浏览器内核直接管理，遵循标准的 Tab 键导航规则。按下 Shift + Tab 时，焦点会按照 DOM 树的结构反向移动到前一个可聚焦元素。

  • VoiceOver 焦点： 作为屏幕阅读器，VoiceOver 拥有独立的焦点管理机制。它会监听 DOM 结构和焦点事件，并尝试将自身的焦点与浏览器焦点同步。但有时，由于 DOM 更新、事件处理或 VoiceOver 内部机制等因素，会导致同步失败，造成焦点错位。

尤其当涉及到嵌套元素、动态内容更新或复杂的事件处理时，更容易出现键盘焦点和 VoiceOver 焦点不同步的情况。 另外，父子元素之间 Tabindex 设置不当也会加剧这种问题。

解决方案

针对 Shift + Tab 导致焦点不一致的问题，以下提供几种解决方案：

1. 显式设置 VoiceOver 焦点

通过 JavaScript 代码，在 Shift + Tab 触发时，强制将 VoiceOver 焦点设置到父元素。

  • 原理： 利用 VoiceOver 提供的 API 或 ARIA 属性，直接控制 VoiceOver 焦点。

  • 方法： 在子元素的 keydown 事件监听器中，判断是否按下 Shift + Tab，如果是，则调用父元素的 focus() 方法，并在其后使用 setTimeout 延迟一定时间，再通过 aria-activedescendant 属性将父元素的 ID 设置为 VoiceOver 活动的焦点。

  • 代码示例:

const parentDiv = document.getElementById('parent-div');
const childLink = document.getElementById('child-link');

childLink.addEventListener('keydown', (event) => {
    if (event.shiftKey && event.key === 'Tab') {
        event.preventDefault();
        parentDiv.focus(); // 键盘焦点设置到父元素

        setTimeout(() => {
            parentDiv.setAttribute('aria-activedescendant', parentDiv.id); // 设置VO焦点
        }, 100); // 设置一个小的延迟，确保VO 焦点正确更新
    }
});

<div id="parent-div" aria-label="Parent container" tabindex="0">
  <a id="child-link" href="#" tabindex="0">Child Link</a>
</div>

  • 步骤:

    1. 给父元素和子元素设置唯一的 id 。
    2. 获取父元素和子元素的 DOM 引用。
    3. 为子元素添加 keydown 事件监听器。
    4. 在监听器中，判断是否按下了 Shift + Tab。
    5. 如果按下，阻止默认行为 (防止浏览器默认处理焦点)。
    6. 将键盘焦点设置到父元素。
    7. 使用 setTimeout 设置延迟。
    8. 通过 aria-activedescendant 属性设置 VoiceOver 焦点到父元素。

  • 安全建议：

    • 确保 setTimeout 的延迟时间足够短，以避免用户体验延迟。但也不宜过短，要留出足够的时间让浏览器和 VoiceOver 处理焦点变化。 测试不同的延迟值以找到最佳平衡。
    • aria-activedescendant 应指向可聚焦元素。

2. 使用 aria-owns 和 aria-controls 属性

利用 ARIA 属性明确声明父子元素之间的关系，帮助 VoiceOver 理解 DOM 结构，从而更准确地同步焦点。

  • 原理:

    • aria-owns: 表示一个元素拥有另一个元素，即使该元素在 DOM 结构上不是它的直接子元素。
    • aria-controls : 表示一个元素控制另一个元素的内容。通过显式声明关系，可以帮助 VoiceOver 正确识别父子元素，进而正确处理焦点同步。

  • 方法:

    • 将 aria-owns 属性添加到父元素，并将其值设置为子元素的 id ，表明父元素拥有该子元素。
    • 根据实际场景，考虑是否在父元素或子元素上添加 aria-controls 属性。

  • 代码示例:

    <div id="parent-div" aria-label="Parent container" tabindex="0" aria-owns="child-link">
    <a id="child-link" href="#" tabindex="0">Child Link</a>
</div>

  • 步骤:

    1. 为父元素和子元素设置唯一的 ID 。
    2. 在父元素上添加 aria-owns 属性，并将其值设置为子元素的 ID 。

  • 安全建议：

    • 谨慎使用 aria-owns 和 aria-controls 。过度使用或者不恰当的使用会导致 VoiceOver 朗读冗余信息或者行为混乱。 只有在确实需要明确声明父子关系，或者 DOM 结构无法直接反映这种关系时，才使用这两个属性。
    • 确认 aria-owns 指向的元素 ID 是存在的，并且是有效的。

3. 模拟焦点事件

通过手动触发焦点的获取和失去事件，让 VoiceOver 感知到焦点的变化，从而触发相应的朗读。

  • 原理: VoiceOver 会监听元素的 focus 和 blur 事件，并根据这些事件更新自身的焦点和朗读内容。通过模拟这些事件，可以主动触发 VoiceOver 的行为。

  • 方法: 在 Shift + Tab 触发时，先将焦点设置到父元素，然后分别触发子元素的 blur 事件和父元素的 focus 事件。

  • 代码示例:

const parentDiv = document.getElementById('parent-div');
const childLink = document.getElementById('child-link');

childLink.addEventListener('keydown', (event) => {
    if (event.shiftKey && event.key === 'Tab') {
        event.preventDefault();
        parentDiv.focus();  // 键盘焦点设置到父元素

        // 模拟焦点事件
        const blurEvent = new Event('blur', { bubbles: true, cancelable: true });
        const focusEvent = new Event('focus', { bubbles: true, cancelable: true });

        childLink.dispatchEvent(blurEvent);
        parentDiv.dispatchEvent(focusEvent);
    }
});

  • 步骤：

    1. 获取父元素和子元素的 DOM 引用。
    2. 为子元素添加 keydown 事件监听器。
    3. 在监听器中，判断是否按下了 Shift + Tab。
    4. 如果按下，阻止默认行为。
    5. 将键盘焦点设置到父元素。
    6. 创建 blur 事件和 focus 事件。
    7. 分别触发子元素的 blur 事件和父元素的 focus 事件。

  • 安全建议:

    • 触发事件时，确保 bubbles 和 cancelable 属性设置正确。bubbles 设置为 true ，表示事件可以向上冒泡， cancelable 设置为 true 表示事件可以被取消。
    • 模拟事件可能会干扰正常的事件处理流程。要仔细评估潜在的影响，避免产生副作用。

总结

解决 Shift + Tab 导致 Safari 和 Chrome 浏览器中键盘焦点与 VoiceOver 焦点行为不一致的问题，需要深入理解焦点管理机制和 VoiceOver 的工作原理。 通过显式设置 VoiceOver 焦点、使用 ARIA 属性明确元素关系、或者模拟焦点事件等方法，可以有效地解决此问题，提升无障碍体验。 在实际应用中，需要根据具体的场景选择合适的解决方案，并进行充分的测试，确保无障碍功能的稳定性和可靠性。 最终目标是提供给使用辅助技术的用户一致、流畅的交互体验。