非激活内容未渲染时，标签的aria-controls应指向何处？

我开发了一个客户端渲染的标签页应用，为了提升效率，仅渲染当前选中标签的面板内容。这里有两个疑问：

• 非激活标签的aria-controls应该指向什么？
• 能不能让所有标签复用同一个共享面板的ID，而不会给依赖ARIA元数据的用户（比如屏幕阅读器使用者）带来问题？

场景代码示例（Preact Hooks） #

const MyApp = ({ items }) => {
  const [selectedItemKey, selectItemKey] = useState(items[0].key);
  const selectedItem = useMemo(() =>
    items.find(d => d.key === selectedItemKey),
  [items, selectedItemKey]);

  return (
    <div class="my-app">
      <div class="sidebar" role="tablist">
        {items.map((item) => (
          <button type="button"
            role="tab"
            aria-selected={item.key === selectedItemKey}
            aria-controls="single-element-container0"        // <------- 此处存疑
            onclick={evt => selectItemKey(item.key)}
          >{item.name}</button>
        ))}
      </div>
      <div id="single-element-container0" class="details-display" role="tabpanel">
        <h2>{selectedItem.name}</h2>
        <p class="intro">{selectedItem.intro}</p>
        <p>{selectedItem.details}</p>
        <p class="seeAlso">{selectedItem.moreInfo}</p>
      </div>
    </div>
  );
};

这里的核心矛盾是：所有标签的内容要么渲染到#single-element-container0中，要么完全不渲染，因此N个标签按钮只能共享同一个元素ID——这种方式是否可行？

从渲染效率角度，仅生成激活标签的内容确实更高效，无需渲染全部内容再用CSS隐藏非激活项。但aria-controls似乎要求引用对应特定的标签面板，哪怕这些面板不存在于DOM中。这种场景下的最佳实践是什么？

解答与最佳实践 #

核心结论 #

所有标签复用同一个面板ID是可行且符合ARIA规范的，只要保证标签切换时面板的内容和关联状态正确更新。

具体细节说明 #

• 非激活标签的aria-controls处理：
  非激活标签的aria-controls依然可以指向这个共享面板的ID。因为当标签未被选中时，屏幕阅读器不会主动通过aria-controls跳转（仅当用户主动触发跳转操作时才会生效），而此时面板内容属于当前选中的标签，不会造成混淆。
  同时要给非激活标签设置tabindex="-1"，确保未选中时无法通过Tab键聚焦，避免用户误操作；保持aria-selected="false"的状态明确。

• 共享面板ID的合理性：
  ARIA规范并未强制要求每个标签对应唯一的面板ID，只要求aria-controls引用的元素在DOM中存在且语义正确。在这个场景中，共享面板本质是“动态承载当前激活标签内容的容器”，只要每次标签切换时，面板内容完全替换为对应标签的内容，且面板的role="tabpanel"属性始终保持，这种用法就是合规的。

• 额外优化建议：

  1. 给标签面板添加aria-labelledby，指向当前选中标签的唯一ID，建立更清晰的语义关联：
     • 给每个标签按钮添加唯一ID，比如id={tab-${item.key}}
     • 面板设置aria-labelledby={tab-${selectedItemKey}}
  2. 标签切换后，让面板获得焦点（可选但推荐），提升键盘导航体验：可以用useRef获取面板元素，在切换后调用focus()。

优化后的代码示例 #

const MyApp = ({ items }) => {
  const [selectedItemKey, selectItemKey] = useState(items[0].key);
  const selectedItem = useMemo(() =>
    items.find(d => d.key === selectedItemKey),
  [items, selectedItemKey]);
  const panelRef = useRef(null);

  const handleTabClick = (itemKey) => {
    selectItemKey(itemKey);
    // 切换后延迟聚焦面板，确保DOM更新完成
    setTimeout(() => panelRef.current?.focus(), 0);
  };

  return (
    <div class="my-app">
      <div class="sidebar" role="tablist">
        {items.map((item) => (
          <button 
            type="button"
            id={`tab-${item.key}`}
            role="tab"
            aria-selected={item.key === selectedItemKey}
            aria-controls="single-element-container0"
            tabindex={item.key === selectedItemKey ? "0" : "-1"}
            onClick={() => handleTabClick(item.key)}
          >{item.name}</button>
        ))}
      </div>
      <div 
        id="single-element-container0" 
        class="details-display" 
        role="tabpanel"
        aria-labelledby={`tab-${selectedItemKey}`}
        ref={panelRef}
        tabindex="0"
      >
        <h2>{selectedItem.name}</h2>
        <p class="intro">{selectedItem.intro}</p>
        <p>{selectedItem.details}</p>
        <p class="seeAlso">{selectedItem.moreInfo}</p>
      </div>
    </div>
  );
};

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