Are Mantine Components Accessible - Mantine

import { Layout } from '@/layout';

export const meta = { title: 'Are Mantine components accessible?', description: 'Learn about Mantine components accessibility features', slug: 'are-mantine-components-accessible', category: 'about', tags: ['inputs', 'a11y', 'axe', 'accessibility'], created_at: 'July 15, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

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 are Mantine components 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. The Mantine codebase has more than 10,000 unit tests.

In addition to automated tests, Mantine components are manually tested with screen readers (VoiceOver) to ensure that they are fully accessible for users of assistive technologies.

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 a component requires props to make it accessible, this 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-label attribute 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: