Welcome to another crucial topic in our journey to create engaging and accessible webpages! In this lesson, we'll dive into the importance of alt text (alternative text) for images in HTML. Adding alt text to images is not just a good practice; it is essential for making your webpages accessible to all users, including those who rely on screen readers due to visual impairments.
In this lesson, we will cover:
alt attribute in the <img> tag.Here's a code snippet to get you started:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>My Enhanced Webpage</title> 6</head> 7<body> 8 <h1>Welcome to My Enhanced Webpage</h1> 9 <p>Here is an image:</p> 10 <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718971012550/a0506561-f951-4885-a4d4-faa6bd6ab16f.jpg" alt="An image of floating Space Corgis" width="300"> 11 <img src="doesnt-exist.jpg" alt="This image doesn't exist. This is an alternative text"> 12</body> 13</html>
The alt attribute in the <img> tag provides alternative text for the image if it cannot be displayed. It also helps screen readers describe the image to visually impaired users.
Note that some browsers may not display the alt text if the image is not found. This might be the case with Safari.
Alt text is a small but significant addition to your HTML that makes a big difference. Here's why it's important:
Making your webpage more accessible not only benefits a wider audience but also enhances the overall user experience and search engine performance. Ready to make your images more informative and accessible? Let’s head into the practice section and apply these concepts!