本文档旨在指导开发者在使用 JavaScript 动态加载 Tab 内容时，如何正确应用 ARIA (Accessible Rich Internet Applications) 属性，以确保 Web 应用的可访问性。重点讨论了在仅将当前激活 Tab 的内容添加到 DOM 的情况下，`aria-controls` 属性的使用，并提供了一种无需使用 `aria-controls` 也能保证可访问性的替代方案。
ARIA Tabpanel 的正确使用姿势
在使用 ARIA 构建 Tab 组件时，tabpanel role 用于标识包含 Tab 内容的元素。按照 WAI-ARIA Authoring Practices 的建议，通常会将每个 tabpanel 元素与其对应的 Tab 关联起来，通过设置 Tab 的 aria-controls 属性指向 tabpanel 的 ID 来实现。
然而，在某些场景下，我们可能只在 DOM 中添加当前选中的 Tab 的内容，即只有一个 tabpanel 存在。此时，如果其他 Tab 的 aria-controls 指向不存在的 ID，可能会导致辅助技术（如屏幕阅读器）无法正确识别组件结构。
动态加载 Tab 内容的 ARIA 实现策略
在这种动态加载的场景下，是否还需要设置 tabpanel role 呢？ 或者是否有更好的实践方式？
根据 ARIA 规范，aria-controls 并非强制属性。
作者应该将 tabpanel 元素与其 Tab 关联起来，可以通过使用 Tab 上的 aria-controls 属性来引用 tabpanel，或者使用 tabpanel 上的 aria-labelledby 属性来引用 Tab。
这意味着，即使不使用 aria-controls，仍然可以符合 ARIA 规范。
最佳实践：保持 Tablist 和 Tabpanel 的紧邻关系
目前，大多数屏幕阅读器对 aria-controls 的支持并不完善。因此，最佳实践是保持 tablist 和 tabpanel 紧密相邻，避免在它们之间插入其他内容。
ARIA 规范也建议：
tablist 元素通常位于一系列 tabpanel 元素附近，通常位于其前面。
这样做的好处是，用户在切换 Tab 后，可以很自然地继续阅读新的 Tab 内容，或者从 tabpanel 返回到 tablist 进行 Tab 切换。
示例代码 (HTML):
<div role="tablist"> <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">Tab 1</button> <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">Tab 2</button> <button role="tab" aria-selected="false" id="tab3" aria-controls="panel3">Tab 3</button> </div> <div role="tabpanel" id="panel1" aria-labelledby="tab1"> <p>Content of Tab 1.</p> </div> <!-- Tabpanel 2 和 3 的内容通过 JavaScript 动态加载 -->
示例代码 (JavaScript - 动态加载 Tab 内容):
const tabs = document.querySelectorAll('[role="tab"]');
const tabpanelsContainer = document.querySelector('[role="tablist"]').parentNode; // 获取 tablist 的父元素，用于插入 tabpanel
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除之前选中的 tab 的 aria-selected 属性
tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
// 设置当前 tab 的 aria-selected 属性为 true
tab.setAttribute('aria-selected', 'true');
// 移除之前的 tabpanel
const oldTabpanel = tabpanelsContainer.querySelector('[role="tabpanel"]');
if (oldTabpanel) {
tabpanelsContainer.removeChild(oldTabpanel);
}
// 动态创建新的 tabpanel
const tabId = tab.getAttribute('id');
const panelId = tabId.replace('tab', 'panel');
const newTabpanel = document.createElement('div');
newTabpanel.setAttribute('role', 'tabpanel');
newTabpanel.setAttribute('id', panelId);
newTabpanel.setAttribute('aria-labelledby', tabId);
newTabpanel.innerHTML = `<p>Content of ${tab.textContent}.</p>`;
// 将新的 tabpanel 插入到 tablist 后面
tabpanelsContainer.appendChild(newTabpanel);
});
});注意事项:
- 确保 Tab 切换的逻辑正确，包括更新 aria-selected 属性和动态加载 Tab 内容。
- 为动态加载的 tabpanel 设置 aria-labelledby 属性，指向对应的 Tab。
- 如果需要，可以添加 aria-live="polite" 和 aria-relevant="all" 到包含 tabpanel 的容器上，以便屏幕阅读器及时通知用户内容的变化。 但是，由于这里是替换整个 tabpanel，通常不需要 aria-live。
- 在复杂的应用中，可能需要使用 JavaScript 框架或库来管理组件状态和 DOM 操作。
总结
虽然 aria-controls 属性在理论上可以用于关联 Tab 和 Tab 内容，但在动态加载 Tab 内容的场景下，保持 tablist 和 tabpanel 的紧邻关系，并使用 aria-labelledby 属性，是一种更简单有效的实现可访问性的方法。 开发者应根据实际情况选择合适的 ARIA 实现策略，并始终关注 Web 应用的可访问性。
