WCAG Score - Not scored
Provided by the component
Role assignment and semantics
Depending on its variant, the Tile must expose an appropriate semantic role:
|
Variant |
Role |
|---|---|
|
Clickable tile |
button or link |
|
Single-select tile |
radio |
|
Multi-select tile |
checkbox |
Color and Contrast
- The Tile’s text and icons meet WCAG 2.1 AA contrast ratios:
- Text: 4.5:1 minimum against background.
- Icons and indicators: 3:1 minimum contrast ratio.
- Tiles doesn’t rely solely on color to indicate state (e.g., use icons, or labels in addition to color changes). It also uses indicators and border changes to indicate the selected state.
Implementation considerations
Semantic roles
Each Tile should use appropriate ARIA roles based on its behavior:
- role="radio" for single-selection groups.
- role="checkbox" for multi-selection.
- role="button" or role="link" for clickable Tiles.
State management
- Use aria-selected="true/false" for selectable Tiles.
- Use aria-pressed="true/false" for toggleable, button-like Tiles.
- Ensure that selected or active states are visually and programmatically communicated.
Focus and Reading Order
- Tiles should appear in logical DOM order consistent with visual presentation.
- Focus order must follow this same logical flow; typically left-to-right, top-to-bottom.
Assistive Technology Support
Screen readers must correctly interpret the Tile’s role, label, and state:
- Provide a clear accessible name via visible label or aria-label.
- For Tiles with descriptive text, use aria-describedby to connect to the additional context.