Button
The basic interactive element that triggers an action
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsKeyboard accessible
Must be focusable with Tab and activatable with Enter or Space.
Clear label
Must have text or an aria-label that describes the button's purpose.
Focus indicator
A visible focus ring must appear when the button receives keyboard focus.
Color contrast 4.5:1
Text and background must meet a minimum contrast ratio of 4.5:1.
Communicate disabled state
Use aria-disabled or the disabled attribute to indicate an inactive state.
Loading state announcement
Provide aria-busy="true" and a screen-reader-friendly loading message.
Icon button label
Buttons with only an icon must have an aria-label.
44×44px touch target
Ensure a minimum 44×44px touch target on mobile.
Do not implement buttons with div/span
<div onClick> has no keyboard accessibility. Use <button> instead.
Do not distinguish state with color alone
Do not rely solely on color to indicate active/inactive state.
Additional checks
Ripple effect accessibility
The ripple effect is purely visual and does not affect accessibility. Use disableRipple to remove it if needed.
Verify contrast per variant
Check that each variant (contained, outlined, text) meets the 4.5:1 contrast ratio requirement.
Code sample
Implementation notes
- –MUI Button renders a <button> element by default.
- –When changing to <a> via the component prop, explicitly manage href and role.
- –The disableRipple prop can be used without affecting accessibility.