Accessibility
- Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use
role="group" for button groups or role="toolbar" for button toolbars.
- Use
aria-label or aria-labelledby to label them.
- Use the
<button type="button"> element. Don’t use <a> or <span> because screen readers won’t recognize it as a usable button.
- Make sure all the buttons within the button group are focusable and part of a linear tabbing sequence.
- When using an icon-only button group, each button must have a
Tooltip.
