curriculum/challenges/english/blocks/lecture-accessible-media-elements/672a55b5c0c14493328fe36e.md
Alternative text, often abbreviated as alt text, is a brief text description of an image. It provides essential information about the image for users who cannot see it, such as people who use screen readers and other assistive technologies.
It's essential for making websites accessible to people with visual disabilities.
Alternative text is also used by search engines to understand images. Some browsers may also display it when an image is not loaded properly. This can happen when the image file is missing or when the user has connectivity issues. So it's helpful for many different purposes.
A person with a visual disability will not be able to know what's in the image unless it's described in the alt text. An example of bad alt text for an image of a puppy would be "A cute puppy."
This text is not specific enough to convey the important details of the image, like what does the puppy look like? Where is the puppy? Are there any important objects around the puppy?
Let's improve this. An example of good alternative text would be: "A black and white puppy with an orange collar lies on its belly in the sand, looking off to the side. A bright orange ball rests near its front paws."
Here you can see this in HTML with an image element, the alt attribute, and a more detailed description:
It is important to note that there is no one correct way to write alt text for an image. What you include in your description will depend on the context the picture is used in. For example, if the puppy picture was on a website about dog breeds, you might want to include more specifics about the physical description of the puppy and possibly ignore the fact that the puppy is at the beach playing with an orange ball. Ultimately, the alt text you use for an image should reflect the primary purpose for including the image on the page, and the information you provide should give people who can't see the image the necessary details to understand that purpose.
Here we have another example of a beautiful tropical resort. Let's describe it.
An example of bad alt text for this image would be "Resort."
This is too short and it doesn't provide enough information about the image. To improve this description, you could expand it to include the most important elements of the image:
"Tropical resort featuring a swimming pool surrounded by palm trees and bungalows."
You can use the alt attribute in HTML like this:
Now that you know what makes good and bad alt text, let's see some of the best practices.
alt text short. It should be detailed enough to understand the image but not so long that it becomes confusing.alt text should describe what will happen if users click on it.For example, if your website has a right arrow icon that takes the user to the next page, instead of writing an alt text that only says "right arrow", like in this example, where you can see the alt attribute with this description:
<a href="about.html">
</a>
You should write something like this instead, where the alt text describes what will happen if users clicks on the image. They will go to the next page.
<a href="about.html">
</a>
Only images that convey important information should have alt text. If an image is only used for decorative purposes, it should have null (empty) alt text, so it can be ignored by screen readers and other assistive technologies.
Here is an example of an empty alt attribute is empty:
Every image on your website should have an alt attribute, even if it's empty. If you omit the alt attribute completely, some screen readers will read the file name instead, which can be distracting for people who use assistive technologies, so this is not recommended.
Finally, before your website is live, you should carefully test if screen readers can read the alt text correctly.
Writing effective alt text is essential for creating accessible web content. As a web developer, by providing clear descriptions of your images, you can make sure that everyone can engage with your website in an inclusive online experience.
What is the purpose of alt text in an image?
To improve the appearance of an image.
Think about why images should be accessible and why these descriptions are important.
To provide a decorative element to the webpage.
Think about why images should be accessible and why these descriptions are important.
To describe the image for people with visual disabilities.
To increase website loading speed.
Think about why images should be accessible and why these descriptions are important.
3
When is it appropriate to leave the alt text empty for an image?
When the image is purely decorative.
When the image is important to understand the content.
Think about the role of the image on the page.
When the image is small.
Think about the role of the image on the page.
Always, to improve website performance.
Think about the role of the image on the page.
1
What should be the primary focus of the alt text for an image that acts as a link?
Describing the image visually.
Think about the purpose of alt text and how it relates to links.
Indicating the link's destination.
Combining both the image description and link destination.
Think about the purpose of alt text and how it relates to links.
The alt text is not important for images that are links.
Think about the purpose of alt text and how it relates to links.
2