Image Placeholder Accessibility
Best Practices
Like any image, an image placeholder is either informative content or non-important decoration . Classify it before choosing its accessible treatment.
A placeholder that communicates a missing image is informative. It must use role="img" and aria-label to name the state, such as "Image not available."
A purely decorative placeholder must use aria-hidden="true" to hide it from assistive technology. Never expose the SVG filename or visual shape as its name, otherwise a screen reader will read it aloud.
Interaction Design
Keyboard
An image placeholder is not interactive and therefore must not be keyboard focusable.
Screen Reader
A decorative placeholder must be skipped by screen readers.
An informative placeholder must announce its aria-label value and image role.
Pointer
An image placeholder is not interactive and therefore is not clickable.
ARIA Reference
| Attribute | Description |
|---|---|
| role="img" | Applied to an informative placeholder to identify it as an image to assistive technologies. |
| aria-label | Applied to an informative placeholder with role="img" to provide an accessible name. |
| aria-hidden="true" | Applied to a decorative placeholder to hide it from assistive technologies. |