mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.75k stars 32.24k forks source link

[docs] shouldn't Skeleton's doc adopt same ARIA guidelines as Circular Progress ? #26930

Open liitfr opened 3 years ago

liitfr commented 3 years ago

Summary 💡

First of all, I don't know many things about ARIA best practices, so please forgive me if this issue isn't relevant.

I've read following ARIA suggestion in Circular Progress API :

If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.

Typically, it looks like the same use case as when one uses Skeletons before displaying desired content. So, for sake of consistency, shouldn't we add same guideline for Skeleton API doc ?

Thank you for your consideration

Examples 🌈

In depth reflexion can be found here : https://adrianroselli.com/2020/11/more-accessible-skeletons.html

Motivation 🔦

Consistency in documentation to increase accessibility best practices in people's app.

oliviertassinari commented 3 years ago

Thanks for opening the issue. We currently display nothing https://mui.com/components/skeleton/#aria however, it does sound like there is work to do.

From what I understand, the implementation of the component is correct, attributes should be handled userland, the Skeleton being too low level, but we can improve the documentation by doing the a11y correctly:

  1. I have linked this issue to https://github.com/mui-org/material-ui/issues/20600#issuecomment-615911641, where we track the progress on the a11y of the docs.
  2. Vuetify talks about a similar problem: https://github.com/vuetifyjs/vuetify/issues/10999#issuecomment-736154001
  3. We can describe the aria-busy trick for the region that is loading.