动态加载 Tab 内容时 Tabpanel 的正确角色与 ARIA 属性使用

本文探讨了在动态加载 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 元素相关联。这种关联可以通过两种方式实现：

1. 使用 Tab 元素的 aria-controls 属性，指向 tabpanel 元素的 ID。
2. 使用 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.

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

这样做的好处是，当用户通过 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 应用。

以上就是动态加载 Tab 内容时 Tabpanel 的正确角色与 ARIA 属性使用的详细内容，更多请关注php中文网其它相关文章！