EEK Accessibility
Best Practices
The EEK component must have a descriptive aria-label that conveys both the energy rating and the range. Format: "Energy Rating: [rating]. Range: [max] - [min]".
Color alone must not be the only means of conveying the energy rating. The rating value in the aria-label provides the accessible alternative.
Interaction Design
Keyboard
EEK elements are not interactive by default and therefore should not be keyboard focusable.
If an EEK is placed within an interactive element (such as a button or link), the interactive element must be keyboard accessible via TAB key.
Screen Reader
A screen reader must announce the label content, including the energy rating and range. The figure role provides semantic context.
Pointer
EEK elements are not interactive by default and therefore are not clickable.
If an EEK is placed within an interactive element (such as a button or link), clicking the EEK will activate that interactive element.
ARIA Reference
| Attribute | Description |
|---|---|
| role="figure" | Identifies the EEK as a figure element, providing semantic meaning for the graphical representation of the energy rating. |
| aria-label | Provides the accessible name for the figure. (e.g., "Energy Rating: A+++. Range: A+++ - D"). |
| aria-hidden="true" | Applied to the content container (eek__container), which hides all visual children—rating text, range text, and SVG icons—as a group. |