[material-ui][docs] Add Accessibility section to all component demo pages

[nspaeth]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Many components' documentation contains an Accessibility section that tells you how to make sure your components are Accessible, but some components don't contain this section.

For the sections that don't contain Accessibility, it isn't clear if that means that the component is accessible without any special measures, or if it isn't accessible at all.

It would be helpful if each component had an Accessibility section that says which is the case:

• Component is accessible without extra work.
• Component requires special measures to make accessible.
• Component is not accessible.

Examples 🌈

See
https://material-ui.com/components/tables/#accessibility
vs
https://material-ui.com/components/popper/

Motivation 🔦

I want to make sure I only use accessible components in my development.

[eps1lon]

Thanks for opening this issue.

So far we've added a guide if questions came up. So if you have specific pages with open questions then feel free to ask. The Popper is a pretty generic component. What makes it accessible or not depends on the use case.

My preferred version has a11y sections that address WCAG success criteria directly. For some components an a11y section doesn't make much sense (because components aren't "accessible or not"). Or would at least require full blown guides e.g. https://material-ui.com/components/cards/ which has no a11y concerns that are specific to Material Cards.

We'll probably add a general a11y page that includes an a11y statement including the targetted WCAG version.

[nspaeth]

My preferred version has a11y sections that address WCAG success criteria directly.

That would be great!

The Popper is a pretty generic component. What makes it accessible or not depends on the use case.

This doesn't seem completely right to me. For example, in all uses of the Popper I would want to know where that content was inserted into the document flow and, if it contains links, where those links would be in the focus order. Does it require any kind of labeled-by attribute in order to indicate what element it is 'popping over' and relevant to, or should I manage that with the content of the popper? Or, should a popper not contain any interactive elements?

[oliviertassinari]

@nspaeth Regarding the Popper, It seems that they are a lot of possible cases. I'm not sure how far we can cover them. If you could list all the pages that could benefit from a new accessibility section it would be 💯.

[nspaeth]

Here's a list of the components that I would be most concerned about using and don't currently have A11y info. I think, largely, they have similar behavior as Popper.

• Tabs https://material-ui.com/components/tabs/#accessibility
• Tooltip - Does this automatically add a title or alt prop to the child, or is the Tooltip similar to Popper in accessibility? https://next.material-ui.com/components/tooltips/#accessibility
• Badge
• Popper
• Popover
• Floating action button
• Pickers
• Transfer List
• Bottom Navigation - Does any special work need to be done to indicate that the main content has changed?
• Drawer
• Menu
• Backdrop - Do I need to manually disable focus to the coverd area?
• Transitions - Some tips about handling a 'reduced motion' option would be good guidance.
• Speed Dial
• Skeleton [docs] shouldn't Skeleton's doc adopt same ARIA guidelines as Circular Progress ? #26930
• Progress

[eps1lon]

Added section for tabs. Will be part of the next release.

[bmccarthyco]

Reviewed list above to current docs and these components now have Accessibility sections and can likely be checked off:

• Badges
• Speed Dial
• Skeleton

[samuelsycamore]

This is something to keep in mind for #35158