CSS+JS Accessibility best practices - hidden things section - is not promoting best practices

### MDN URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript

### What specific section or headline is this issue about?

Hiding things

### What information was incorrect, unhelpful, or incomplete?

the hiding things tab widget demo description doesn't match the demo / is inaccurate.

### What did you expect to see?

the demo needlessly uses position absolute (as the linked demo is using display none to hide the inactive tab panels - so position absolute is useless here)

the end of the first paragraph states: "you can alternatively use Tab and Enter/Return to select them)."
but the demo allows initial tab key press to go to the first tab, but then uses arrows to navigate between the tab items. This sentence should mention the use of left/right arrow keys

>Screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. Absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect because it doesn't stop screen readers from getting to it.

this section should just be removed. i'm not going to get into how inaccurate this is / how it's not a good practice to use absolute positioning this way - but since the demo doesn't even need the absolute positioning, it'd be best to remove this all together.

>On the other hand, you shouldn't use [visibility: hidden](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or [display: none](https://developer.mozilla.org/en-US/docs/Web/CSS/display), because they do hide content from screen readers. Unless of course, there is a good reason why you want this content to be hidden from screen readers.

the demo DOES use display none though - which is what this should be doing. so this paragraph is both inaccurate to the demo, and not the best advice in general for building a tab widget.

### Do you have any supporting links, references, or citations?

_No response_

### Do you have anything more you want to share?

i came across this demo when poking through [this PR](https://github.com/mdn/content/pull/37520#pullrequestreview-2532315022) and noticing the version of the tab demo there was built in a way that wasn't really something we should want devs to copy.

following back to this article, i noticed that the demo here was built better, but the text of this page seemed to be written as if it expected the demo in the linked PR to have been used.

these demos should match, and the information surrounding them needs to be consistent / not promoting bad or unnecessary CSS / ARIA practices.

### MDN metadata

Page report details

* Folder: `en-us/learn_web_development/core/accessibility/css_and_javascript`
* MDN URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md
* Last commit: https://github.com/mdn/content/commit/5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
* Document last modified: 2024-12-19T15:37:45.000Z