What is the purpose of the alt attribute in the <img> Tag ?
Last Updated :
01 Feb, 2024
The “alt” attribute in the <img> Tag is important for making websites more accessible. It stands for “alternative text” and is used to describe what an image is about. If the image can’t load, this text shows up instead. It’s also helpful for people who use screen readers because they can hear this description, making the web more inclusive for those with visual impairments.
Purpose of alt Attribute
Accessibility Boost:
- The
alt attribute enhances web accessibility.
- It makes sure that people with visual impairments can also comprehend the images.
Image Loading Fallback:
- If an image doesn’t load, the
alt text is displayed as a backup.
- Users still get an idea of the image content.
Screen Reader Assistance:
- Screen readers, used by people with visual disabilities, rely on
alt text.
- It provides a spoken description of the image.
Syntax
<img src="image.jpg" alt="Description of the image">
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image alt attribute</title>
<style>
img {
margin: 10px;
}
</style>
</head>
<body>
<img src="#" alt="Image not loaded">
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...