Alt text is an important aspect of digital content because it helps to make the content more accessible to users with disabilities, specifically users who are blind or visually impaired. When a screen reader encounters an image on a web page, it reads the alt text to the user so they can understand what the image is depicting. Alt text is also displayed in place of an image if the image is unable to be displayed, such as when the image file is not found or the user has turned off image display in their web browser.
In addition to making content more accessible, alt text can also impro6ve the search engine optimisation (SEO) of a website by providing context for the images on the page. When search engines crawl a web page, they use the alt text to understand the content of the images on the page, which can help the page rank higher in search results.
It’s important to use alt text thoughtfully and accurately when creating digital content. This includes using relevant and descriptive alt text for images and using empty alt text for decorative images that do not add any meaningful information to the page. By including alt text, you can make your digital content more accessible and improve its SEO.
What is Alt-Text?
Alt text, also known as “alternative text” or “alt tags,” is a short piece of text that describes an image on a web page. Alt text is used by screen readers, which are programs that read the contents of a web page aloud for users who are blind or visually impaired. When a screen reader encounters an image on a web page, it reads the alt text to the user so they can understand what the image is depicting. Alt text is also displayed in place of an image if the image is unable to be displayed, such as when the image file is not found or the user has turned off image display in their web browser. Alt text is added to an image by including the alt attribute in the HTML img tag. For example:

HTML Attributes
Alt text is an important aspect of digital content because it helps to make the content more accessible to users with disabilities, specifically users who are blind or visually impaired. When a screen reader encounters an image on a web page, it reads the alt text to the user so they can understand what the image is depicting. Alt text is also displayed in place of an image if the image is unable to be displayed, such as when the image file is not found or the user has turned off image display in their web browser.
In addition to making content more accessible, alt text can also improve the search engine optimisation (SEO) of a website by providing context for the images on the page. When search engines crawl a web page, they use the alt text to understand the content of the images on the page, which can help the page rank higher in search results.
It’s important to use alt text thoughtfully and accurately when creating digital content. This includes using relevant and descriptive alt text for images and using empty alt text for decorative images that do not add any meaningful information to the page. By including alt text, you can make your digital content more accessible and improve its SEO.

- Class: specifies one or more class names for an element, which can be used to style the element using CSS (Cascading Style Sheets).
- ID: specifies a unique identifier for an element.
- Src: specifies the source of an image or other media file.
- Href: specifies the URL of a link.
- Title: specifies extra information about an element, which is displayed as a tooltip when the user hovers over the element.
There are many other attributes available in HTML, and different elements support different attributes. You can learn more about HTML attributes and which elements support them in the HTML documentation.
When to use and not to use alt-text?
Alt text should generally be used whenever you include an image in digital content, such as on a website or in a document. Alt text is important because it helps to make the content more accessible to users with disabilities, specifically users who are blind or visually impaired. When a screen reader encounters an image on a web page, it reads the alt text to the user so they can understand what the image is depicting. Alt text is also displayed in place of an image if the image is unable to be displayed, such as when the image file is not found or the user has turned off image display in their web browser.
There are a few exceptions to this rule. If an image is purely decorative and does not add any meaningful information to the content, you can use empty alt text (alt=""
) to indicate to screen readers that the image can be skipped. This helps to reduce the amount of unnecessary information that screen readers have to read to users, which can improve the user experience.
It’s important to note that alt text should not be used as a replacement for meaningful content. If an image contains important information that is necessary for the understanding of the content, it should not be omitted from the alt text. Instead, the alt text should accurately describe the content of the image.
Here are some guidelines for writing effective alt text:
- Keep it concise: Alt text should be brief and to the point. Aim for a maximum of 125 characters.
- Describe the image accurately: The alt text should accurately describe the content of the image. Avoid using vague or generic descriptions like “image” or “photo.”
- Use relevant keywords: If the image is relevant to the content of the page, include relevant keywords in the alt text. This can help improve the search engine optimisation of the page.
- Avoid using the same text as the surrounding text: If the text in the alt text is the same as the surrounding text, it may not provide any additional information to users.
- Don’t stuff alt text with keywords: While it’s important to include relevant keywords in the alt text, don’t stuff the text with unnecessary keywords in an attempt to improve SEO. This can have the opposite effect and harm the user experience.
- Use empty alt text for decorative images: If an image is purely decorative and does not add any meaningful information to the page, you can use empty alt text (alt=””) to indicate to screen readers that the image can be skipped.
- Test alt text with a screen reader: To ensure that your alt text is effective, test it with a screen reader to see how it sounds to users who are blind or visually impaired.
Additional Resources:
The Web Accessibility Initiative (WAI) has a guide on how to write effective alt text: WAI Alt Decision Tree