CCD Accessibility
Best Practices
CCD pictograms must have a descriptive aria-label so assistive technologies announce their meaning reliably. The root element uses role="img" as the labeled graphic.
The aria-label must include charger inclusion status, wattage range, and fast charging specification if applicable (e.g., "Charger included. 1001 - 2000 watts. USB PD").
Interaction Design
Keyboard
CCD pictograms are not interactive and should not be keyboard focusable.
If 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 charger status, wattage range, and optional USB PD. The image role provides semantic context for the pictogram.
Pointer
CCD pictograms are not clickable. If placed within an interactive element, clicking the pictogram will activate that element.
ARIA Reference
| Attribute | Description |
|---|---|
| role="img" | Identifies the CCD as a labeled graphic so the accessible name is announced reliably across assistive technologies. |
| aria-label | Provides the accessible name for the graphic with charging information (e.g., "Charger included. 1001 - 2000 watts. USB PD"). |