Images can contribute greatly to a website's design. But if, for whatever reason, an image cannot be viewed, a lot of information can be lost. That's why you need to include the alt attribute with all your <img/> tags.

The alt attribute is where you add a description of what is shown in the image. While you don't need to be overly detailed, a description should include enough information that a person can imagine what the picture looks like with reasonable accuracy. This information should be concise and text based.

<img src="" alt=""/>

In addition to a website experiencing errors while loading, an image link can also break if the image file is moved or deleted from your directory. Since glitches and mistakes happen, alt attribute text would be used in place of the image and displayed where the image should have been. This is a way for users to know what visual information is being conveyed, even in the absence of the image itself.

Example

Working Image	Broken Image

<img src="roller-coaster.jpg" 
alt="roller coaster train zooming through a loop"/>

An extra benefit of having a thoughtful and semantic (meaningful) alt-text description is accessibility. Even if your images are working just fine, users who have visual impairments won't be able to see them. Assistive technologies like screen readers read out the text on websites. If you have useful information in an images alt-text, a screen reader will read that to the user instead. That helps visually impaired users get more out of your website. As of now, screen readers can't view and interpret images, but who knows what the future will hold?

Think you got it?

Complete the activity below by answering each prompt question in the provided text box. Once complete, you'll have the opportunity to compare your answers with the sample answers.