为含文本的末级元素设置tabindex="0"的无障碍访问优化问题

你遇到的核心问题是给嵌套的文本容器都加了tabindex="0"，导致屏幕阅读器在Tab切换时多次聚焦关联元素，重复朗读相同/合并文本。我来帮你梳理问题根源和可行的解决办法：

问题拆解 #

1. 嵌套元素重复聚焦：比如你提到的div和内部的p都被设为可聚焦，Tab切换时会先聚焦外层div（朗读它包含的所有文本，包括子元素内容），再聚焦内层p（再次朗读p的文本），直接导致重复朗读。
2. 父元素文本合并：父容器的textContent会自动合并所有子元素的文本，当父容器和子元素都可聚焦时，会先读合并后的完整内容，再读子元素的单独内容，就出现了"First text Second text" + "Second text"的重复情况。

解决方案 #

核心原则是只给独立的、无文本子元素的文本容器添加tabindex="0"，避免嵌套元素重复触发朗读。

1. 优化元素筛选逻辑 #

在选择要添加tabindex的元素时，需要排除两类元素：

• 本身没有独立文本（所有文本都来自子元素）的容器
• 包含其他可见文本子元素的父容器

2. 实现代码示例 #

// 遍历所有未设置tabindex的元素
document.querySelectorAll('*:not([tabindex])').forEach(element => {
  // 检查元素是否有非空白的独立文本
  const hasOwnText = element.textContent.trim() !== '';
  // 检查元素是否包含有实际文本的子元素（排除换行、图片等无文本标签）
  const hasTextChildElements = Array.from(element.children).some(child => {
    const childTag = child.tagName.toLowerCase();
    return !['br', 'hr', 'img'].includes(childTag) && child.textContent.trim() !== '';
  });

  // 仅当元素有独立文本且无文本子元素时，添加可聚焦属性
  if (hasOwnText && !hasTextChildElements) {
    element.setAttribute('tabindex', '0');
  }
});

3. 额外的语义化建议 #

• 尽量用<p>、<span>、<h1>-<h6>这类语义化标签承载文本，而非多层嵌套的<div>，屏幕阅读器对语义化标签的处理更符合预期。
• 纯装饰性的容器（无独立文本）不要加tabindex，避免干扰正常的Tab浏览顺序。

4. 测试验证 #

用主流屏幕阅读器（如NVDA、VoiceOver）测试Tab切换流程：

• 确认每个文本内容只被朗读一次
• 朗读顺序符合页面的视觉流和逻辑顺序

内容的提问来源于stack exchange，提问作者user9011377