Image

What the components handle

Image component

Proper <img> element semantics for content images

Default empty alt="" (decorative) - images are hidden from screen readers by default

Screen reader access when meaningful alt text is provided

DecorationImage component

Decorative images are automatically hidden from screen readers

What you need to provide

For Image component

Provide descriptive alt text when the image conveys essential information that is not available in the written text alongside the image.

For DecorationImage component

Use the showOverlay prop when needed to improve text readability

Image with decorative role

Here the image has a decorative function. The information is provided in text, and if the image wouldn't load user would not loose any context.
Alt attribute should be left empty.

Image with essential information

While the icon on the left is decorative, the card images provide information on which payement methods are available to the user, which is not available in tetx. Provide descriptive alt text.