Chip / Accessibility

The Chip group is (as of now) restricted to hold only one (or none) selected/checked value. Because of this, it is modeled semantically as a radio button.

As with a "normal" radio button, you must provide assistive technologies with the context of what is being selected upon (not just the values of each Chip). A great way to do this is to group the Chip components within a <fieldset> with an <legend> element. See the examples on the code examples under the "Preview" page.

Relevant WCAG Success Criteria

1.4.11: Non-text Contrast (AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components: Visual information required to identify user interface components AND STATES, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

W3C article: Understanding Success Criterion 1.4.11

1.4.11 and the Chip-component

If you override the colors (via twColorand/or twColorChecked props) take care to check the contrast.

Tip: Color contrast checker tool (external link).

This guide is based on version: 1.5.0