WCAG Score - 2.2 AA Compliant
Provided by the component
When the Icon component and its circle variant are used according to the design system guidelines, the following accessibility considerations are already met:
- Circle background variant
- The circular background provides a clear visual boundary, improving perceivability and affordance for interactive icons
- Accessible color tokens
- Default icon and background color pairings from the design system meet a minimum 3:1 contrast ratio for non-text content
- Consistent visual styling
- Icons follow a predictable visual language (stroke weight, shape, padding), supporting recognition, usability and predictability
- Non-interactive by design
- The Icon component does not receive focus, keyboard interaction, or pointer events
- Prevents accidental creation of non-semantic interactive elements.
- Scalable vector format
- Icons scale without loss of clarity or accessibility when zoomed up to 200%
- No color-only meaning
- Any semantic meaning must be reinforced with text, labels, or programmatic context in the parent component.
- Status icons
- Icons representing status (error, warning, success, information) must be accompanied by text or accessible descriptions at the parent level.
Implementation considerations
To ensure full accessibility, teams must address the following when implementing the Icon component within other components:
Accessibility ownership model
- Parent components own accessibility
- Components such as Button, IconButton, Link, or MenuItem must
- Define semantics (<button>, <a>, appropriate ARIA role
- Provide the accessible nam
- Handle focus, keyboard input, and hit target size
Screen reader behavior & ARIA usage
- Decorative icons
- Icons that do not convey meaning must be hidden from assistive technologies using aria-hidden="true" or equivalent mechanisms.
- Meaningful icons
- When an icon conveys meaning, the accessible name must be provided by the parent component, not the icon itself.
- The parent component (e.g., IconButton, Button, Link) must expose an accessible label via visible text or ARIA attributes.
- Avoid standalone icon announcements
- Icons must not be announced independently of their parent element.
- Do not apply role="img" with labels on icons inside interactive components unless strictly required.
- Accessible naming rules
- Accessible names must describe the function, not the visual appearance. For example, use "Search" instead of "magnifying glass icon."
Interaction & Focus Management
- No focus on icons
- Icons must never receive keyboard focus.
- Focus indicators must be applied to the interactive parent element, not the icon.
- Keyboard interaction
- All keyboard interactions (Tab, Enter, Space) must be handled by the parent component.
- Icons must not define event handlers such as onClick.
Visual Contrast & States
- Non-text contrast
- Icons must maintain at least a 3:1 contrast ratio against their immediate background in all visual states (default, hover, focus, disabled), as defined by the parent component.
- State communication
- Changes in state (hover, active, disabled, selected) must be communicated by the parent component using more than color alone.
- Icons may visually reflect state changes but must not be the sole indicator.
Touch & Pointer Considerations
- Target size responsibility
- The Icon component does not define hit area or target size.
- Minimum target sizes (24×24px desktop, 44×44px touch) must be provided by the parent interactive component through padding and layout.