Improve localization and accessibility #8901
Comments
danielchalmers
changed the title
aria-label properties to all components
|
Community help to address this is wanted. |
|
Should I pin this? |
|
I unpinned the nullable one and pinned this instead as it's more important. |
danielchalmers
changed the title
aria-label properties to all componentsMudBlazor#8901 Alert: - Using aria-live="assertive" so screen readers immediately announce the alert's content to users - Add way of specifying the ARIA label for the close icon, with a default English one provided - Change from a Toggle to a regular button to show intent Buttons: - Add MudBaseButton.AriaLabel and hooked it up - Add ToggleIconButton.AriaLabel, ToggleIconButton.ToggledAriaLabel Chip: - Add role="button" to indicate the chip is interactive - Add CloseIconAriaLabel - Closes MudBlazor#6278 - Add role="group" to ChipSet
danielchalmers
changed the title
danielchalmers
changed the title
…labels Part of MudBlazor#8901. They still need to be checked for keyboard navigation and other accessibility opportunities.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
|
From Mozilla's Accessibility guide:
Maybe it would be helpful to be able to disable aria properties globally until closer to compliant. |
|
@zachrybaker FWIW there's a few people (me included) working on the subject (on top of full time jobs) because we too have projects that require certain accessibility compliance. As you can tell by the recent PRs, the listing at the very top, as well as other accessibility/localization issues opened by contributors to the project, it's an actively worked on subject:
If you have any specific issues that don't fit the existing open issues feel free to create new ones! Maybe you'll even have the occasional spur of free time that could be spent fixing one of the issues or improving upon existing features. Everyone benefits 😄
None of us are experts in accessibility -- if you spot any such occurrences feel free to report or correct them. Recent PRs have mostly been based on MDN and WAI, and use tools such axe devtools, siteimprove, and WAVE to find issues and validate fixes/improvements. |
|
@igotinfected, My devs will be compiling a list of things they've done to work around the ADA issues. When I get that I'll back that out to a list of issues that are not being tracked. TBH I wonder if developer expert-level in accessibility even exists! The fact that all the tools don't come to the same results, and the fact that there's so many standards thrown out there by the government...it does feel like a cat-and-mouse game. But one with legal ramifications... |
Is your feature request related to a problem?
MudBlazor was ranked low for accessibility but has improved. It impacts the usability and SEO of consumers (which means we need your help as we can't do it alone).
Describe the solution you'd like
Accessibility information for web authors.
Accessibility includes things like
ariaandroleattributes and extends past keyboard navigation and semantic HTML.At a minimum we need localized
aria-labels (How?) for relevant parts of a component that aren't labeled themselves such as icon buttons. It's important to not overdo it and add labels to elements that don't need them as too many labels will makes accessibility worse ("No ARIA is better than bad ARIA.").Have you seen this feature anywhere else?
❗ Search
aria-labelon the MUI button page and it will return 246 results.(Though this particular issue is for the fundamental components, not the docs)
Describe alternatives you've considered
Hardcoding labels in English. English is a good default but it's crucial to keep it open for localization.
🙏 If you want to help, please inspect a component you use often or check the accessibility and localization labels to find more issues related to this effort. Leave a comment if you have other accessibility tips or concerns!
The text was updated successfully, but these errors were encountered: