We need to associate more information with an image so that the screen reader picks that up when the image is focused. Try navigating through these images using Tab key or focus separately to understand the difference. Keep the screen reader on and for better understanding, view the code on Github.

This image element has got no alt text associated neither any aria-label and hence screen reader will stay silent

Sunrise is the one of the most beautiful natural phenomenon.

This image element has proper alt text associated so the screen reader will read that on focusing the image

Sunrise is the one of the most beautiful natural phenomenon.

This image has a proper alt text as well as a title and hence on hovering over it, the title will appear

Sunrise is the one of the most beautiful natural phenomenon.

The image is associated with the above label since using aria-label we have associated it with that and hence the screen reader will mention the label on focusing the image

Sunrise is the one of the most beautiful nature phenomenon.

The image is associated with the above label since using aria-describedby. We are using figure and figcaption here. Make sure to check out the code on github.

Made with ❤️ by Mainak.
Find the Code on GithubFollow me on LinkedIn