本文探讨了在动态加载 Tab 内容的应用场景下，tabpanel 角色和 aria-controls 属性的正确使用方法。当只有当前激活的 Tab 内容存在于 DOM 中时，省略 aria-controls 属性是符合 ARIA 规范的。最佳实践是将 tablist 元素紧邻 tabpanel 元素放置，以提升屏幕阅读器的用户体验。本文还讨论了在技术实现尚未完善的情况下，如何权衡语义化标注与实际应用。
在使用 Tab 控件时，无障碍性 (Accessibility) 是一个重要的考虑因素。WAI-ARIA (Accessible Rich Internet Applications) 提供了一系列属性和角色，帮助开发者创建更易于访问的 Web 应用。其中，tabpanel 角色和 aria-controls 属性在 Tab 控件的无障碍设计中扮演着关键角色。然而，在动态加载 Tab 内容的情况下，如何正确使用这些属性可能会带来一些困惑。
aria-controls 的可选性
根据 ARIA 规范，tabpanel 元素应该与其对应的 Tab 元素相关联。这种关联可以通过两种方式实现：
- 使用 Tab 元素的 aria-controls 属性，指向 tabpanel 元素的 ID。
- 使用 tabpanel 元素的 aria-labelledby 属性，指向 Tab 元素的 ID。
然而，规范中明确指出，这两种方式都是SHOULD，而非MUST。这意味着，你可以选择不使用 aria-controls 属性，并且仍然符合 ARIA 规范。
Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab.
在动态加载 Tab 内容的场景下，只有当前激活的 Tab 内容存在于 DOM 中。如果为所有 Tab 元素设置 aria-controls 属性，指向不存在的 tabpanel 元素 ID，这可能会导致屏幕阅读器出现问题。因此，在这种情况下，省略 aria-controls 属性是合理的。
tablist 与 tabpanel 的位置关系
虽然可以省略 aria-controls 属性，但为了提升屏幕阅读器的用户体验，最佳实践是将 tablist 元素紧邻 tabpanel 元素放置，通常是 tablist 元素位于 tabpanel 元素之前。
tablist elements are typically placed near, usually preceding, a series of tabpanel elements. See the WAI-ARIA Authoring Practices for details on implementing a tab set design pattern.
这样做的好处是，当用户通过 Tab 切换内容时，屏幕阅读器可以更容易地识别出 Tab 控件的结构，并引导用户继续阅读新的 Tab 内容。用户可以通过屏幕阅读器轻松地在 Tab 之间切换，并返回到 Tab 列表。
示例代码
以下是一个简单的示例代码，展示了如何使用 tablist 和 tabpanel 元素，并省略 aria-controls 属性：
<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> <button role="tab" aria-selected="false" id="tab3">Tab 3</button> </div> <div role="tabpanel" aria-labelledby="tab1"> <p>Content for Tab 1.</p> </div> <div role="tabpanel" aria-labelledby="tab2" hidden> <p>Content for Tab 2.</p> </div> <div role="tabpanel" aria-labelledby="tab3" hidden> <p>Content for Tab 3.</p> </div>
在这个示例中，tablist 元素包含了三个 Tab 按钮，tabpanel 元素包含了每个 Tab 对应的内容。aria-labelledby 属性用于将 tabpanel 元素与其对应的 Tab 按钮相关联。hidden 属性用于隐藏非当前激活的 Tab 内容。
JavaScript 代码 (示例，用于动态加载内容)
const tabs = document.querySelectorAll('[role="tab"]');
const tabpanels = document.querySelectorAll('[role="tabpanel"]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有 tab 的 aria-selected 属性
tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
// 隐藏所有 tabpanel
tabpanels.forEach(panel => panel.setAttribute('hidden', ''));
// 设置当前 tab 的 aria-selected 属性
tab.setAttribute('aria-selected', 'true');
// 获取当前 tab 对应的 tabpanel 的 id
const tabId = tab.getAttribute('id');
const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
// 显示对应的 tabpanel
if (panel) {
panel.removeAttribute('hidden');
}
});
});
注意事项
- 确保 tablist 元素和 tabpanel 元素具有正确的角色属性 (role="tablist" 和 role="tabpanel")。
- 使用 aria-selected 属性指示当前激活的 Tab。
- 使用 aria-labelledby 属性将 tabpanel 元素与其对应的 Tab 元素相关联。
- 使用 CSS 或 JavaScript 隐藏非当前激活的 Tab 内容。
- 在动态加载 Tab 内容时，确保只有当前激活的 Tab 内容存在于 DOM 中。
- 虽然可以省略 aria-controls 属性，但仍然建议将 tablist 元素紧邻 tabpanel 元素放置。
- 测试你的 Tab 控件在不同的屏幕阅读器上的表现，以确保其具有良好的无障碍性。
总结
在动态加载 Tab 内容的场景下，省略 aria-controls 属性是符合 ARIA 规范的，并且可以避免潜在的问题。最佳实践是将 tablist 元素紧邻 tabpanel 元素放置，以提升屏幕阅读器的用户体验。在设计 Tab 控件时，始终要考虑无障碍性，并进行充分的测试，以确保所有用户都可以轻松地访问你的 Web 应用。
