Tag
Tags help people filter content or see metadata at a glance.
Use Cases
- Users should be able to:
- Use a tag to perform an action
- Navigate to a tag with keyboard or switch input
- Activate a tag with keyboard or switch input
Interaction & Style
Tags are often clustered components that need to pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of like components.
A tag that performs an action should present the same semantics as a button to a platform's accessibility API.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) tag |
| Space / Enter | Activates the (non-disabled) tag |
Use Cases
- Users should be able to:
- Use a tag to perform an action
- Navigate to a tag with keyboard or switch input
- Activate a tag with keyboard or switch input
Interaction & Style
Tags are often clustered components that need to pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of like components.
A tag that performs an action should present the same semantics as a button to a platform's accessibility API.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) tag |
| Space / Enter | Activates the (non-disabled) tag |
Use Cases
- Users should be able to:
- Use a tag to perform an action
- Navigate to a tag with keyboard or switch input
- Activate a tag with keyboard or switch input
Interaction & Style
Tags are often clustered components that need to pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of like components.
A tag that performs an action should present the same semantics as a button to a platform's accessibility API.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) tag |
| Space / Enter | Activates the (non-disabled) tag |
Use Cases
- Users should be able to:
- Use a tag to perform an action
- Navigate to a tag with keyboard or switch input
- Activate a tag with keyboard or switch input
Interaction & Style
Tags are often clustered components that need to pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of like components.
A tag that performs an action should present the same semantics as a button to a platform's accessibility API.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) tag |
| Space / Enter | Activates the (non-disabled) tag |