search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.56k stars 31.91k forks source link

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

Open nspaeth opened 4 years ago

nspaeth commented 4 years ago

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:

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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.

eps1lon commented 4 years ago

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

bmccarthynn commented 2 years ago

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

samuelsycamore commented 7 months ago

This is something to keep in mind for #35158