Are Mantine components accessible?
Yes, Mantine components follow WAI-ARIA accessibility guidelines. All components have proper roles, aria-* attributes and semantics, provide full keyboard support, manage focus correctly and support screen readers.
How Mantine components are tested for accessibility?
All components that have interactive elements are tested with axe (jest-axe) to ensure that they have all required roles and aria-* attributes. Additionally, all components are tested for keyboard support and focus management with unit tests, you can view an example of these tests here. In Mantine codebase, there are more than unit 10,000 tests.
In addition to automated tests, Mantine components are manually tested with screen readers (VoiceOver) to ensure that they are fully accessible for assistive technologies users.
Is there anything I need to do on my side to make my app accessible?
Of course! While Mantine components provide a solid foundation for accessible applications, there are still things that you need to do to ensure that your app is fully accessible. If the component requires props to make it accessible, it will be mentioned in the component documentation.
Things to look out for while building accessible applications:
- Use semantic HTML elements where possible: use
<button>for buttons,<a>for links, etc. - Provide proper labels for inputs
- Use
aria-labelattribute where necessary - Ensure that your app is fully navigable with a keyboard
- Ensure that all elements in your app have proper color contrast
- And more
If you are interested in learning more about web accessibility, you can check out these free courses: