Skip to main content
  1. SEO glossary/

Alt Text

3 mins

What is Alt Text (Alternative Text)? #

Alt text, also known as alternative text, is a textual description of a non-textual element, such as an image, audio file, or video, that is included in a web page or other digital content. It is designed to provide a textual alternative for users who cannot access or have difficulty accessing the non-textual element, such as users with visual impairments or those who use assistive technologies like screen readers.

The purpose of alt text is to ensure that all users, regardless of their abilities, can understand and interact with the content on a website or other digital platform. It helps create a more inclusive and accessible digital experience for everyone.

Here are some examples: #

Alt text (alternative text) is used in various places to provide a textual description of visual content, such as images, graphics, and multimedia. This is essential for accessibility, as it allows users with visual impairments or those who cannot see the content to understand its meaning and context. Here are some examples of where alt text is used:

  1. Images: Alt text is added to the HTML code of an image to provide a description of the image. This is essential for users who cannot see the image due to visual impairments or slow internet connections.
<img src="image.jpg" alt="A picture of a dog sitting in front of a laptop with a cup of coffee, wearing glasses, and looking exhausted. The text 'When you've been browsing memes for 5 hours and realize you have work in 3 hours' is superimposed on the image." />
  1. Graphics and charts: Alt text is used to describe the information conveyed by a graphic or chart, such as the data points, trends, and comparisons.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 10 L30 30 L40 30 L20 50 L30 50 L10 70 L50 30 L70 70 L50 50 L60 50 L40 30 L50 30 Z" fill="green" stroke="black" stroke-width="1" alt="A bar chart showing the percentage of people who prefer different types of pizza, with a green bar for pepperoni, a red bar for cheese, and a yellow bar for vegetarian." />
</svg>
  1. Multimedia: Alt text is used to describe the visual content of multimedia files, such as videos and animations, to provide context and information for users who cannot see the content.
<video src="video.mp4" alt="A video of a dog sitting in front of a laptop with a cup of coffee, wearing glasses, and looking exhausted. The text 'When you've been browsing memes for 5 hours and realize you have work in 3 hours' is superimposed on the video." />
  1. Links: Alt text is used to describe the destination of a link, providing additional context and information for users with visual impairments.
<a href="https://www.example.com" alt="Visit the Example Website">Example Website</a>
  1. Buttons and icons: Alt text is used to describe the function and content of buttons and icons, ensuring that users with visual impairments understand their purpose and can interact with them effectively.
<button type="submit" alt="Submit the form">Submit</button>
  1. Error messages: Alt text is used to provide a textual description of error messages or notifications, ensuring that users with visual impairments are aware of any issues and can take appropriate action.
<div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions text">
  <img src="error-icon.png" alt="An icon of a warning sign" />
  <div>Error: Form submission failed. Please try again.</div>
</div>

In Summary #

(Alt Text) is a technique used in web development to provide alternative text for non-textual content, such as images, audio, and video. It is essential for accessibility, as it allows users with visual impairments or those who cannot hear audio to understand the content and context of the media. (Alt Text) can be used to describe the media, its purpose, and any relevant information that would be lost without the media.