CCD Accessibility
Best Practices
CCD pictograms must use role="figure" with aria-label to convey their meaning to assistive technologies.
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 will announce the CCD as a figure along with its aria-label value (e.g., "Charger included. 1001 - 2000 watts. USB PD, figure").
Pointer
CCD pictograms are not clickable. If placed within an interactive element, clicking the pictogram will activate that element.
ARIA Reference
| Attribute | Description |
|---|---|
| role="figure" | Applied to the CCD element to identify it as a figure to assistive technologies. |
| aria-label | Applied to the CCD with role="figure" to provide an accessible name with charging information (e.g., "Charger included. 1001 - 2000 watts. USB PD"). |