本文针对使用 JavaScript 动态加载 Tab 内容的应用场景，探讨了 tabpanel 角色和 aria-controls 属性的正确使用方法。在只将当前激活 Tab 的内容添加到 DOM 中的情况下，省略 aria-controls 属性是可行的，并且推荐将 tablist 放置在 tabpanel 之前，以优化屏幕阅读器的用户体验。
在使用 Tab 组件时，无障碍性 (Accessibility) 是一个重要的考虑因素，尤其是在使用 JavaScript 动态加载 Tab 内容的情况下。WAI-ARIA 提供了一套标准来帮助开发者创建更易于访问的 Tab 组件。本文将深入探讨在这种场景下 tabpanel 角色和 aria-controls 属性的正确使用方法，并提供一些最佳实践。
aria-controls 属性的适用性
根据 WAI-ARIA Authoring Practices (APG) 的建议，通常应该在每个包含 Tab 内容的元素上设置 tabpanel 角色，并将其触发 Tab 的 aria-controls 值设置为该容器的 ID。这在所有 Tab 内容都存在于 DOM 中，只是通过 CSS 隐藏的情况下效果很好。
然而，当使用 JavaScript 仅将当前选定 Tab 的内容添加到 DOM 时，情况就变得复杂了。这意味着 DOM 中只存在一个 tabpanel，而其他 Tab 的 aria-controls 值将指向不存在的 ID。
根据 ARIA 规范，aria-controls 属性并非强制性的。规范指出：
作者应该通过使用 Tab 上的 aria-controls 属性引用 Tab 面板，或者通过使用 Tab 面板上的 aria-labelledby 属性引用 Tab，将 tabpanel 元素与其 Tab 关联起来。
这意味着可以省略 aria-controls 属性，并且仍然符合规范。
动态加载场景下的最佳实践
由于目前大多数屏幕阅读器对 aria-controls 的支持有限，因此在动态加载 Tab 内容的场景下，以下是一些最佳实践：
省略 aria-controls 属性： 如果 aria-controls 属性会导致问题，可以安全地省略它。
-
保持 tablist 和 tabpanel 的紧密相邻： 将 tablist 放置在 tabpanel 之前，确保它们之间没有其他内容。
<div role="tablist"> <button role="tab" aria-selected="true" id="tab1">Tab 1</button> <button role="tab" aria-selected="false" id="tab2">Tab 2</button> </div> <div role="tabpanel" aria-labelledby="tab1"> <!-- Tab 1 的内容 --> </div> <div role="tabpanel" aria-labelledby="tab2" hidden> <!-- Tab 2 的内容 --> </div>
这种布局方式允许用户在更改 Tab 后继续阅读，或者从 Tab 面板返回到 Tab 列表。
使用 aria-labelledby 属性： 使用 aria-labelledby 属性将 tabpanel 与其对应的 Tab 关联起来。
动态更新 aria-selected 属性： 当 Tab 切换时，确保正确更新 Tab 元素的 aria-selected 属性，以指示当前选定的 Tab。
添加 aria-live 和 aria-relevant 属性（可选）： 如果 Tab 内容的更改需要立即通知屏幕阅读器用户，可以考虑在 Tab 内容的容器上添加 aria-live="polite" 和 aria-relevant="all" 属性。 aria-live="polite" 确保屏幕阅读器不会中断当前正在朗读的内容，而是会在适当的时候朗读新的内容。 aria-relevant="all" 确保所有类型的更改（添加、删除、更新）都会被通知。
代码示例
以下是一个简单的示例，展示了如何使用 JavaScript 动态加载 Tab 内容，并遵循上述最佳实践：
<div role="tablist">
<button role="tab" aria-selected="true" id="tab1" onclick="showTab('tab1')">Tab 1</button>
<button role="tab" aria-selected="false" id="tab2" onclick="showTab('tab2')">Tab 2</button>
</div>
<div role="tabpanel" aria-labelledby="tab1" id="panel1">
<p>This is the content for Tab 1.</p>
</div>
<div role="tabpanel" aria-labelledby="tab2" id="panel2" hidden>
<p>This is the content for Tab 2.</p>
</div>
<script>
function showTab(tabId) {
// Hide all tab panels
document.querySelectorAll('[role="tabpanel"]').forEach(panel => {
panel.setAttribute('hidden', 'true');
});
// Unselect all tabs
document.querySelectorAll('[role="tab"]').forEach(tab => {
tab.setAttribute('aria-selected', 'false');
});
// Show the selected tab panel
const panelId = 'panel' + tabId.slice(3); // Extract panel ID from tab ID
document.getElementById(panelId).removeAttribute('hidden');
// Select the clicked tab
document.getElementById(tabId).setAttribute('aria-selected', 'true');
}
</script>在这个例子中，点击 Tab 按钮会调用 showTab 函数，该函数会隐藏所有 Tab 面板，取消选中所有 Tab，然后显示选定的 Tab 面板，并选中对应的 Tab。
总结
在使用 JavaScript 动态加载 Tab 内容时，省略 aria-controls 属性是完全可以接受的，甚至可能是更合适的做法。关键在于确保 tablist 和 tabpanel 之间的关系清晰，并使用 aria-labelledby 属性将它们关联起来。通过遵循这些最佳实践，可以创建更易于访问的 Tab 组件，从而改善所有用户的体验。
记住，无障碍性是一个持续的过程，需要不断学习和改进。希望本文能够帮助你更好地理解和应用 WAI-ARIA 标准，创建更易于访问的 Web 应用程序。
