WCAG Score - 2.2 AA Compliant
Provided by the component:
The card is a non-interactive container whose border serves purely as a structural or decorative boundary. It does not convey a control state, affordance, or required interaction area. Because of this, the border is considered non-essential visual decoration rather than a UI control or meaningful graphical object.
Under WCAG 2.2 (success criterion 1.4.11 Non-text Contrast), the 3:1 contrast requirement applies only to visual information necessary to identify or operate components. Since the card border does not fall into that category, it is not required to meet 3:1 contrast against the page background.
Implementation Considerations
WCAG 1.1.1
As we offer slots, any non-text passed via the slot must be accessible.
This means you should use HTML's semantic elements to convey meaning, rather than visual presentation.
WCAG 1.3.1
- Use semantic HTML (e.g., <ul>, <li>, <button>, <label>, <fieldset>, <legend>, <section>, <header>, <nav>, <p>, <h*>, etc.) to ensure that visual groupings, labels, and relationships are also present in the markup
- Use ARIA roles, states, and properties only when semantic HTML is not sufficient.
Engineers should optionally, use <section> or <article> for the card container if the card is a distinct region. (parent div)
WCAG 4.1.2
All interactive UI components (like buttons, inputs, checkboxes, dialogs, etc.) must:
- Have a name (an accessible label for screen readers).
- Have a semantic role (what kind of UI element it is, e.g., button, checkbox, dialog).
- Have a value (the current state, e.g., checked/unchecked, input value, open/closed, pressed, expanded, etc).
Engineers should
- Use the HTML tag “article” if the content is self contained. For example, doctor information, user profile, … all that is independent content and can be grouped.
- If the title is present, add role="region" to the root and aria-labelledby connected to the title by using ID.