动态Tab内容的ARIA优化方法

在使用 JavaScript 动态加载 Tab 内容时，如何提升 Web 应用的可访问性？本文重点探讨了 `aria-controls` 属性在动态加载场景下的应用，并提供了一种无需依赖该属性也能保证可访问性的替代方案。针对 ARIA Tabpanel 的正确使用姿势，文章指出在仅添加当前激活 Tab 内容到 DOM 的情况下，保持 Tablist 和 Tabpanel 的紧邻关系，并利用 `aria-labelledby` 属性进行关联，是更有效且兼容性更佳的策略。通过示例代码，详细展示了如何通过 JavaScript 动态创建和插入 Tabpanel，同时确保屏幕阅读器等辅助技术能够正确识别和呈现 Tab 组件的结构和内容，帮助开发者构建更易用的 Web 应用。

本文档旨在指导开发者在使用 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 应用的可访问性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~