WCAG Score - Compliant
The Illustration component is primarily decorative and non-interactive, but accessibility still plays an important role. Because illustrations can influence how users perceive information, it is necessary to ensure that there are no barriers for screen reader users or users with cognitive or visual impairments.
Implementation considerations
Alt Text requirements
- Decorative illustrations
- If the illustration does not convey essential information, it should be marked as decorative.
- Provide an empty alt="" so screen readers skip it.
- This avoids unnecessary, confusing, or repetitive announcements.
- Informative illustrations
- If the illustration adds meaningful information that is not already expressed in text, provide a clear and concise alt description.
- Avoid describing visual style unless relevant to meaning.
- Example: alt="User holding an open box to represent package tracking".
- Avoid duplicating text
- Do not repeat copy that is already visible elsewhere.
- If the parent component already states the message, keep the illustration decorative.
Color considerations
- Ensure illustrations meet contrast expectations only if they convey meaning.
- Purely decorative illustrations do not need to meet WCAG contrast ratios.
- Avoid using color alone to communicate concepts (e.g., red to indicate danger) unless paired with text in the parent component.
Responsive and scaling accessibility
- Because illustrations scale with the container, always ensure the content remains recognizable at all available sizes (especially XSMALL and SMALL).
Keyboard and Pointer accessibility
- The Illustration component itself is non-interactive, so it should never receive focus.
- Avoid adding controls or links inside illustrations. Interaction must always come from the parent component.