role-required-image

Description

Images must have the correct ARIA role assigned to ensure they are properly interpreted by assistive technologies.

Assistive technologies use ARIA roles to determine how elements are presented to users. If an image is assigned an incorrect role or lacks a role attribute, assistive technologies may misinterpret or ignore the image, leading to accessibility issues.

Examples

The following example incorrectly assigns the presentation role to an image, which may cause assistive technologies to miss or misinterpret the image.

The following example correctly assigns the img role to the image, ensuring that assistive technologies properly interpret the image.

How to fix?

• Assign role="img" to non-decorative images.
• Add meaningful alternative text to describe the image.
• Use role="presentation" for purely decorative images to hide them from screen readers.

References

• WCAG 4.1.2: Name, Role, Value