Buttons: Other accessibility considerations
Additional accessibility considerations for different types and characteristics of buttons.
On this page
Icon and image buttons
Understand the accessibility concerns with and best practices for icon and image buttons.
- Icon buttons — MDN Web Docs
- Accessible Icon Buttons — Sara Souiedan
- Image elements within buttons — Contextually Marking up accessible images and SVGs — Scott O'Hara
- How icons are ruining interfaces — Axess Lab
- Accessible icon links — Kitty Giraudel
Disabled buttons
Understand when and how to implement a disabled button.
- Making Disabled Buttons More Inclusive — CSS-Tricks
- Disabled buttons suck — Axess Lab
- Disabled buttons don’t have to suck — Justine Win
- Short note on the disabled/aria-disabled attributes — Steve Faulkner
- Aria-disabled — A11y-101
Toggle buttons
Understand best practices regarding toggle buttons.
- On Designing and Building Toggle Switches — Sara Souiedan
- Toggle Buttons — Heydon Pickering
- Switch Component: Toggle Button — Scott O’Hara
:focus-visible
For considerations on selectively styling a button’s focus indicator for keyboard-input only, see: :focus-visible — Styling focus indicators — Knowledge Area: Keyboard accessibility
Button target size
Make buttons large enough so that they are easy to activate for people who have motor control issues or who are using less precise input methods such as touch or a stylus. See Size and Proximity — MDN Web Docs.