使用 ARIA 制作可访问选项卡时，是否可以从 DOM 中删除 'hidden' 内容？
When making accessible tabs with ARIA, is it OK to remove 'hidden' content from the DOM?
关于制作可访问选项卡的各种 ARIA 指南建议使用 aria-hidden="true" 隐藏除 'current' 之外的所有选项卡面板。
您的想法是使用 JavaScript 处理选项卡上的点击，更新选项卡 面板 中的哪些具有 aria-hidden="true" 属性。你在视觉部分使用了一些 CSS，比如 [aria-hidden] { display: none }。
但是 'hide' 元素的另一种方法是简单地将它们从 DOM 中删除。如果您正在使用类似 React 的东西，这是一个实用的解决方案——您只需渲染当前活动的选项卡面板。所以不需要使用 aria-hidden="true"，因为有问题的选项卡面板根本不存在。
我的问题：从可访问性的角度来看，这样做有什么问题吗？
完全没问题。请记住，ARIA 属性适用于无法使用正常 html 语义的情况。 aria-hidden 用于在屏幕上隐藏无法使用标准 CSS 隐藏的内容 reader。如果您使用 display:none，则该元素已从屏幕上隐藏 reader，不需要 aria-hidden。
关于制作可访问选项卡的各种 ARIA 指南建议使用 aria-hidden="true" 隐藏除 'current' 之外的所有选项卡面板。
您的想法是使用 JavaScript 处理选项卡上的点击，更新选项卡 面板 中的哪些具有 aria-hidden="true" 属性。你在视觉部分使用了一些 CSS，比如 [aria-hidden] { display: none }。
但是 'hide' 元素的另一种方法是简单地将它们从 DOM 中删除。如果您正在使用类似 React 的东西，这是一个实用的解决方案——您只需渲染当前活动的选项卡面板。所以不需要使用 aria-hidden="true"，因为有问题的选项卡面板根本不存在。
我的问题：从可访问性的角度来看，这样做有什么问题吗？
完全没问题。请记住，ARIA 属性适用于无法使用正常 html 语义的情况。 aria-hidden 用于在屏幕上隐藏无法使用标准 CSS 隐藏的内容 reader。如果您使用 display:none，则该元素已从屏幕上隐藏 reader，不需要 aria-hidden。