If possible use the appropriate semantic HTML element to mark up a figure and related caption with <img> and <figurecaption>. For descriptive text without using captions, use the aria-labelledby="".
Alternative you have to provide appropriate attribute (ARIA label & role) for assistive technology.
- Add role role="figure"
- Add aria-labelledbyto refer a figure caption description
- Use aria-describedby for longer description text
Images must have an alt="" attribute text which describes the content or function of the image. Avoid redundancies and do not provide the same information used in the context of the image. For this purpose, the following application types of images are possible:
- Informative images
- Decorative images
- Functional images
- Images of text
- Complex images
- Group of images
- Image maps
Find more details on the usage of the alt texts attributes under WCAG Web Accessibility Tutorial Images
Examples for most common use
Informative images
For this use, the alternative text should only contain the meaning of the visual representation of the image.
Decorative images
Group of images
For a image collection use the figure markup and WAI-ARIA attribute role="group" to identify a group of pictures. The figure- and figcaption-element can also be used nested as a heading (see example).
If possible use the appropriate semantic HTML element to mark up a figure and related caption with <img> and <figurecaption>. For descriptive text without using captions, use the aria-labelledby="".
Alternative you have to provide appropriate attribute (ARIA label & role) for assistive technology.
- Add role role="figure"
- Add aria-labelledbyto refer a figure caption description
- Use aria-describedby for longer description text