When making accessible tabs with ARIA, is it OK to remove 'hidden' content from the DOM?

Question

Various ARIA guides on making accessible tabs suggest using aria-hidden="true" to hide all the tab panels except the 'current' one.

The idea is you use JavaScript to handle clicks on the tabs, updating which of the tab panels have the aria-hidden="true" attribute. And you use some CSS like [aria-hidden] { display: none } for the visual part.

But another way to 'hide' elements is simply to take them off the DOM. If you're using something like React, this is a practical solution – you just only render the currently active tab panel. So there would be no need to use aria-hidden="true", because the tab panels in question don't even exist.

My question: is there any problem doing this, from an accessibility standpoint?

Answer 1

No problem at all. Remember that ARIA attributes are for when normal html semantics can't be used. aria-hidden is used when you want to hide something from the screen reader that can't be hidden using standard CSS. If you're using display:none, then that element is already hidden from the screen reader and aria-hidden is not needed.