Hiding things example - description not aligned with code

[Liz-Matmos]

MDN URL

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

What specific section or headline is this issue about?

Hiding things

What information was incorrect, unhelpful, or incomplete?

The example shown uses a tabs widget, and tabpanel content that is not visible is discoverable by screen readers due to the absolute positioning. The content reads:

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.

and

On the other hand, you shouldn't use visibility:hidden or display:none, because they do hide content from screen readers.

What did you expect to see?

Does this not cause an issue for sighted screen reader users? Wouldn't the best approach for the example given be to use display:none; as per the APG Tabs pattern?

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

APG guidance as above. Many screen reader users have some vision, and generally what they hear and see should be in harmony.

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/accessibility/css_and_javascript
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/accessibility/css_and_javascript/index.md
• Last commit: bb026bc
• Document last modified: 2023-07-03T10:12:35.000Z

[pepelsbey]

Hey! Thank you for bringing this up. You’re absolutely right: this particular example is not fully accessible. Not just because of the positioning but also because it lacks focus management, needed ARIA roles, etc. The whole section needs to be rewritten.

[Liz-Matmos]

Thanks @pepelsbey - I discovered this content as I am studying for the WAS exam and it is referenced in the Body of Knowledge, so it would be great to have amended!

[teoli2003]

@Liz-Matmos Maybe are you interested in submitting a PR with the needed changes? It would help us fix it more quickly.

[pepelsbey]

As for the potential fix, I’d suggest using something else instead of improving this example. There are some good thoughts/examples in these articles:

https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html

[Josh-Cena]

The code is fixed by mdn/learning-area#745. Welcoming a PR to change the description.

[pepelsbey]

Should be fixed in mdn/learning-area#745 Let me know if there's anything left.