search

mdn / content

The content behind MDN Web Docs
https://developer.mozilla.org
Other
8.96k stars 22.45k forks source link

Hiding things example - using absolute positioning #30171

Open Liz-Matmos opened 7 months ago

Liz-Matmos commented 7 months ago

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: https://github.com/mdn/content/commit/bb026bcb88b7f45374d602301b7b0db5a49ff303 * Document last modified: 2023-07-03T10:12:35.000Z
pepelsbey commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

pepelsbey commented 7 months ago

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