The alt attribute (short for alternative text) is an attribute of the img tag and is meant to be an alternative for non-visual users (i.e., individuals who use a screen reader) when they encounter images on your website.
Screen reading applications cannot interpret images. For that reason, it is important that web designers and developers provide alt text that can be read aloud when the screen-reading application encounters an image. Below is an example of the ATI logo with an appropriate alt text description.

HTML Code Example
<img decoding="async" src="ATI-Logo-small-1.jpg" alt="assistive technology initiative logo"/>Another benefit of alt text is when an image does not load properly on a website. Instead of encountering a blank placeholder icon on the web page, the user will see the alt text displayed. This benefits all users as important can still be relayed to those individuals browsing your website.
Use empty “alt” tags for decorative images
Empty alt attributes hide decorative images, allowing screen reading applications to simply skip past them. This technique is useful for background images and aesthetic elements that hold no functional or instructional purpose.
Without an empty alt attribute, screen readers typically might read the filename of the image or simply indicate there is an image without an additional information. This can be confusing for individuals who are unable to see the image. Below is an example of the same ATI logo with an empty alt attribute.

HTML Code Example
<img decoding="async" src="ATI-Logo-small-1.jpg" alt=""/>
taking skills, retention, and comprehension by allowing students to focus more on the course lecture content and less time taking notes.