WCAG Score - Not scored
Provided by the component
Keyboard Operability
A user should be able to use the keyboard to move focus to a tile or a group of tiles.
|
Keys |
Actions |
|---|---|
|
Tab / Shift + Tab |
Moves focus between tiles in a list or multi-select group. It also allows to access to a single-select group. |
|
Arrows (For single-select tiles) |
In grouped single-selection contexts, horizontal or vertical navigation is performed using the arrow keys, also selecting the item that is focused. |
|
Enter or Space |
Activates the Tile (clickable variant) or toggles selection (selectable variants). |
When a Tile receives keyboard focus, a visible focus outline appears, ensuring WCAG 2.1.1 (Keyboard) and 2.4.7 (Focus Visible) compliance. The focus indicator doesn’t rely on color alone, it uses a shape and border for clarity.
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.