When a user using a screen reader reads a web page and encounters an image, it has no idea what the image conveys or if the image is important, often times leaving the user unsure and uncertain of what they missed. By using a descriptive "alt" attribute with images, screen readers are able to know what the image was trying to convey and can more confidently browse the page.
How do I make images accessible?
- For images on a website, best practice is to include an alternative text field with a descriptive label.
- <img src="brilliantminds.jpg" alt="Brilliant Minds official logo"/>
- In cases where small images are used for layout or spacing, replace the images with CSS styling so a user accessing the content with a screen reader is not confused by the image.
View Best Practices for Images for more information.