Comments (20)
I'm trying to understand the current plan on accessibility improvements. The roadmap for the "next" release has "Better accessibility support" on the list, but I don't see accessibility called out in the next milestone or the next project. Is accessibility a priority in the "next" release? If so, are there any details that could be shared? Also, if we wanted to contribute help on accessibility in the "next" release is there a component or area you'd recommend we could work on?
from material-ui.
I would recommend auditing your project with the Chrome Accessibility Developer Tools and reading up on accessibility best practices, there are many issues beyond just keyboard tabbing: https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
from material-ui.
Hi everyone,
I am a visually impaired developer (relying on a screen reader) using Material UI in my projects. I am really interested in implementing aria-related stuff.
Are you guys accepting pull requests on these issues right now?
from material-ui.
http://www.google.com/design/spec/usability/accessibility.html
from material-ui.
Yep - totally agree. Working on cleaning up components to account for this. This is done for Icon Buttons and the other components will follow.
Check out http://material-ui.com/ and hit the tab key. :)
from material-ui.
It would be great to implement aria roles on every widget.
For example on the dialog :
http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/
For dropdown menu :
http://staff.washington.edu/tft/tests/menus/html5/
Many examples :
http://heydonworks.com/practical_aria_examples/
from material-ui.
Thanks @marcysutton - I'll check it out.
from material-ui.
https://github.com/rackt/react-a11y should be much more friendly @hai-cea. https://www.youtube.com/watch?v=z5e7kWSHWTg&t=644
from material-ui.
@matthewoates Thanks for showing this to us :)
from material-ui.
I use a chrome extension that helps detect accessibility. I really want to use this lib, but I need it to be able to pass this tools checks at least
from material-ui.
I totally agree, Vujita. We're currently using Material-UI on a project at work but it's now hurting us because it's far from 508 compliant. Are contributions welcome?
from material-ui.
@sshirley Contributions are welcome but this is not a high priority until we get closer to a stable API. (v1.0)
from material-ui.
A brief look at some of the components shows that many could be improved fairly easily.
Some things I noticed:
- Modal dialogs and drawers do not lock focus within them, creating a poor experience with keyboard navigation. If it grays out the UI, it should gray constrain keyboard navigation to within. Menus do this fine, so this should be easy to implement.
Esc
does not dismiss popover menus
from material-ui.
Better accessibility is one of the motivations of the ongoing rewrite of Material-UI that will be published under v1. I don't think that there is much value at keeping this issue open. We have learned that accessibility is important and we now try to better support it. Let's stick to specific component issues for the upstream work.
@patrickhlauke Thanks for the feedback ❤️
from material-ui.
@mush42 we are trying to respect accessibility best practices on the v1-alpha branch. If you find any issue, feel free to report it, or even better, submit a pull request.
from material-ui.
Has this actually been implemented? We're on 3.9.4 and don't see a clear explanation of how to make things accessible: it does seem anything that utilizes Typography will get the props passed down to the dynamically generated Component that becomes the dom node, so we could theoretically pass any aria-labels down that get passed via ...other (hence https://next.material-ui.com/components/breadcrumbs/#accessibility). Is this the recommended method for all components?
from material-ui.
@natedsaint I'm not sure to understand the link between making the components keyboard accessible (issue description) and having an accessibility section on each page of the documentation. Do you have a specific issue?
from material-ui.
Sorry let me explain: I originally came upon this via #633, which lead me here, then #168, also closed in favor of this. My assumption was the accessibility issues were to be resolved in one big pass in v1-alpha but I don't see conclusions on that.
from material-ui.
@natedsaint We try to fix the accessibility issues as they are reported. You can find them under https://github.com/mui-org/material-ui/labels/accessibility. Did you discover a new one?
from material-ui.
The biggest part was this concern from #633: It appears several components dont expose ARIA roles
We're looking into how accessible our site is, and applying aria-labels will fix many issues for us. Digging through the code, it appears that many components use Typography under the covers and you can pass props which end up on the resulting DOM node through ...other
in the props, but there are cases where the label or role needs to be on a button. Digging through the code I don't see any places where it's made clear how we make these things reader-accessible, or tag them for usability testing.
from material-ui.
Related Issues (20)
- Add Repobeats (metrics) to README
- Type erros in `@mui/utils` HOT 1
- Module not found: Can't resolve '@emotion/react' in dual route (page,app) HOT 2
- [lab] Remove deprecated lab packages HOT 5
- [material-ui][Chip] Icon Not Centered When Only Icon is Provided HOT 4
- [material-ui][Select] Scroll inside select input HOT 4
- [material-ui] Move `CssVarsProvider` to `ThemeProvider` HOT 3
- [material-ui] Add Bento Grid component HOT 1
- [material-ui] Handling complex themes/palettes
- [docs] Routing Libraries List example contains deprecated `button` prop HOT 1
- Hydration error in next.js with MUI HOT 3
- getColorSchemeSelector returns the wrong selector when multiple are present HOT 1
- Label is not visible when using Select or Input components HOT 2
- @mui/material-nextjs@next does not work with @mui/[email protected]
- [material-ui][Autocomplete] Unexpected scrolling behaviour in virtualised custom Autocomplete component
- [material-ui][RadioGroup][FormControlLabel] onClick prop is called twice
- [material-ui][Autocomplete] Customize 'useAutocomplete' method based on the example provided
- Can'use Vietnamese keyboard in input field HOT 1
- MuiSvgIcon theme override doesn't work for width/height HOT 1
- [material-ui][Badge] When `showZero={false}` and value is `0` content is not updated HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.