本文档旨在指导开发者在使用 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):
Content of Tab 1.
示例代码 (JavaScript – 动态加载 Tab 内容):
const tabs = document.querySelectorAll('[role="tab"]');const tabpanelsContainer = document.querySelector('[role="tablist"]').parentNode; // 获取 tablist 的父元素，用于插入 tabpaneltabs.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 = `Content of ${tab.textContent}.
`; // 将新的 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 应用的可访问性。
以上就是使用动态加载 Tab 内容时的 ARIA 最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584924.html
微信扫一扫 
支付宝扫一扫 
