Icon Button Accessibility

Best Practices

Every icon button must have an aria-label that describes the action (e.g., "Menu", "Close", "Save"). The inner SVG icon must use aria-hidden="true" since the accessible name is provided by the button.

For badged icon buttons, the badge must use aria-hidden="true" . Include the badge count in the button's aria-label (e.g., "Watchlist (4 notifications)").

Interaction Design

This section provides detailed instructions for how different input types should navigate and operate the pattern.

Keyboard

Pressing TAB key must move focus to the icon button.

Pressing ENTER or SPACEBAR key must activate the button. If the icon button triggers a modal or popover, closing it must return focus to the icon button.

For icon links, pressing ENTER key must follow the link.

Screen Reader

A screen reader must announce the aria-label value and the element role (button or link).

If disabled, the screen reader must announce the disabled state.

Pointer

Clicking or tapping the icon button must activate the action. Clicking an icon link must follow the link.

ARIA Reference

Further Reading

• APG Button Pattern