What you need to provide
- If the Tag carries important meaning (e.g. room status) that is not repeated in the text label, include this information for screen readers using aria-label with an accurate description.
Avoid showing a tooltip when hovering on the Tag, as there is no visual difference between a tag with and without a tooltip, forcing the user to guess by trying.
If you still choose to display a tooltip, refer to the Tooltip’s accessibility guidelines to ensure it remains accessible.
If you still choose to display a tooltip, refer to the Tooltip’s accessibility guidelines to ensure it remains accessible.
Color contrast
Since the Tag’s background and border are not meant to convey any additional information, the only contrast requirements are the 4.5:1 for text and 3:1 for icon, which is ensured.