Inclusive Image: The Art of Crafting Meaningful Alternative Text

In today’s increasingly connected digital era, images are not just decorations—they convey messages, emotions, and information. But have we ever thought about how people with visual impairments access those images?

This is where alternative text acts as a bridge. For users who rely on assistive technology like screen readers, alternative text is the only way to understand what is in an image. Without alternative text, visual information is limited only to those who can see it, leaving some users in the dark.

Digital accessibility is not just an extra feature—it’s a fundamental principle that ensures the internet can be used by everyone, without exception. By writing meaningful alternative text, we help create a more inclusive web experience and realize digital accessibility. This also applies to social media, as platforms like Instagram, X (Twitter), and Facebook increasingly support alternative text features.

This article will discuss the art of writing alternative text that is not only descriptive, but also contextual and meaningful. How can we make images more inclusive and ensure everyone, regardless of limitations, can enjoy digital content equally?

Let’s discuss further!

The Role of Alternative Text in Digital Accessibility

Alternative text is a text description used to replace visual elements like images, especially for users who rely on assistive technology such as screen readers. When someone cannot see an image, alternative text becomes their way to understand the content and meaning of that image. Alternative text embodies one of the principles of accessibility, namely perceivable, which means users can obtain information using one or more of their senses.

People with visual impairments usually access digital content using assistive technology like screen readers. They depend on alternative text, which will be read aloud by the screen reader, to understand images they cannot see. People with cognitive disabilities who have difficulty understanding images will also greatly benefit from alternative text. They will be able to grasp the meaning and information conveyed by the image more easily.

How to Add Alternative Text

Alternative text is easy to implement across various media. Here is a brief guide.

Websites

Alternative text can be added through the alt attribute in the <img> tag. Here is an example:

<img src="mountain-view.jpg" alt="A mountain view and a road cutting through rice fields">

X (Twitter): add image, then click +ALT, then write description. Read X guide.
Facebook: upload image, then click Edit on image, then add text in Alt Text field. Read Facebook guide.
Instagram: share image, then click … options, click Edit, click Accessibility, write the alt text. Read Instagram guide.
LinkedIn: after uploading image, click on ALT below the image, then write the alt text. Read LinkedIn guide.

Documents and presentations

Microsoft Word/PowerPoint: right click on the image, then click Edit Alt Text, then write the lat text. Read Microsoft Word/PowerPoint guide.
Google Docs/Slides: click the image to move focus, then right click, chose Alt text, then write the alt text on the Description field. Read Google guide.

Basic Principles of Writing Meaningful Alternative Text

Writing alternative text is not just about describing an image—the goal is to ensure that all users get equal information, regardless of how they access the visual content. Here are some basic principles we can apply when writing alternative text:

1. Context is key

An image can have different meanings depending on where and how it is used. Alternative text should reflect the purpose and meaning of the image in the context of the whole page. Let’s look at the following photo, which will be used in several scenarios.

A man sits on a chair near a sunlit window while using a laptop. There is a cup of hot coffee on the table.

Scenario 1: in an article about remote working, we can highlight how the desk setup supports remote work activities. Alternative text: “A man working remotely from home using a laptop and accompanied by a cup of coffee.”
Scenario 2: if used on a productivity app promotion page, we can emphasize the use of the product being promoted. Even if the product is not visible, context is more important than literal content. Alternative text: “A man focused on his laptop, managing his tasks with the JustDoIt app.”
Scenario 3: in an article about the effect of sunlight on focus levels, we can focus on the sunlight. Alternative text: “Sunlight shines on a man working near a window, illustrating the impact of natural light on focus levels.”

2. Concise but descriptive

This principle is about finding a balance between providing enough information without making it too long or wordy. We should focus on the main information to be conveyed and avoid unnecessary details. For example, if an image shows a child laughing, then “A child laughing happily.” is more concise and informative than “A child with a cheerful expression on their face, showing their teeth while laughing.”

3. Avoid redundancy

This principle aims to ensure that the information conveyed is not repeated or excessive, which can burden and complicate understanding for screen reader users. Here are some things to note to avoid redundancy:

Don’t repeat captions that already exist near the image

Example 1: an article about making baby food has a picture of banana porridge and a caption below: “Banana porridge with a soft texture, suitable for babies just starting solid food.”. We don’t need to repeat that as alternative text. Instead, we can provide visual details without repeating the caption, such as “Banana porridge in a bowl.”
Example 2: a search button with a magnifying glass icon next to the text “Search”. Since the icon’s function is clear from the text, alternative text like “Search magnifying glass icon.” is unnecessary. We can use an empty string (alt="") so the icon is not read by screen readers. We’ll dive more on this kind of image on the Decorative images section.

Avoid saying “image of…” or “photo of…”

We don’t need to add those words in alternative text because screen readers already announce a visual element as an image. For example, in the Narrator app—the built-in screen reader on Windows—the alternative text will be read: “Special fried rice served with a sunny side up egg, crackers, and pickles. Graphic.”.

Adapting Alternative Text for Different Types of Images

Writing alternative text should also be adjusted to the type of image. Here are the types of images based on their purpose:

1. Decorative images

Not all images need alternative text. If an image is purely decorative—meaning it does not convey new information and is not important for understanding the content—it should be given empty alternative text (alt=""). This way, screen readers will skip the image without reading anything, so users are not burdened with irrelevant information. What is the difference with not adding the alt attribute at all? If there is no alt attribute on an img element, the screen reader will by default read the image file name. Besides not conveying information effectively, this can also confuse users.

When can an image be considered decorative?

Images that do not add meaning to the content, only for aesthetics or to enhance the atmosphere

Example 1: an illustration of a worker sitting at a computer, placed near the article title “How to Increase Work Productivity”.

Since the image only enhances the atmosphere and does not convey new information, we can consider it decorative and use empty alternative text (alt="").
Example 2: an image used as a background for a web page. We use empty alternative text (alt="") because the image is only for aesthetics.

Images whose content is already mentioned by nearby text

Example 1: a button with an arrow icon and the text “Read more” next to it.
```
<button type="button">
    Read more
    <img src="right-arrow.png" alt="" />
</button>
```
Since the icon’s purpose is already conveyed by the button text, we use empty alternative text (alt="").
Example 2: in a product catalog, there is a photo of a wooden desk with the text next to it: “Study desk made of teak wood, size 120x60 cm, equipped with a drawer and natural finish.”.

The photo only supports visually without adding new information. Therefore, we can use empty alternative text (alt="").

2. Informative images

Informative images convey important information that can be expressed in a short sentence but is not fully explained in the surrounding text. Alternative text for such images must be written carefully, because without it, screen reader users may miss the main meaning of the content.

Principles for writing alternative text for informative images:

Explain the image content concisely but clearly.
Focus on information relevant to the context.
Avoid unimportant visual descriptions (such as background color or font type, unless relevant).
Do not repeat information already written near the image.

Here are some examples of informative images and their alternative text:

Example 1: an image used as a replacement label. In the following example, there is information about the date and place of an event. In front of each piece of information is a calendar icon and an address pin icon, respectively.

Since both icons function as labels for the information next to them, we can use alternative text “Date: ” for the calendar icon and “Address: ” for the address pin icon.
Example 2: an image that provides important visual context not explicitly explained in the surrounding text. For example, in an article titled “BJ Habibie’s Achievements in Aviation Technology”, there is a photo of BJ Habibie inspecting an aircraft design.

We can provide alternative text “BJ Habibie inspecting an aircraft design, showing his role as a technologist in Indonesia’s aerospace sector.”. Mentioning BJ Habibie in the alternative text is also necessary, as he is the subject of the article and a well-known figure.
Example 3: an image that provides insignificant context. For example, in a travel blog, the author adds a photo of a mountain path at sunrise.

If the goal is to give an impression and “healing” atmosphere, we can add alternative text: “A mountain path with soft morning sunlight, bringing calm and freshness.”.

However, if the image is only to enrich the visual appearance and does not add any information or context, we can consider it decorative and use empty alternative text.

The decision to categorize an image as informative or decorative is entirely up to the author, based on the purpose of the image in the content.

3. Functional images

Functional images are images used to trigger certain interactions or actions, such as on buttons, navigation, and links. For this type of image, alternative text should explain the function or purpose of the interaction, not the visual appearance or information contained.

Characteristics of functional images:

Can be clicked or tapped.
Performs an action or takes the user to a certain page.
Has important meaning for user interaction.

Principles for writing alternative text for functional images:

Focus on the purpose or function of the image, not its appearance.
Use action verbs if relevant, such as “Download”, “Search”, “View details”, etc.
To avoid redundancy, make sure the alternative text does not repeat text already visible.

Here are some examples of functional images and their alternative text:

Example 1: a cloud icon with a downward arrow used as a button to download a product brochure.
```
<button type="button">
  <img src="cloud-download.png" alt="Download product brochure" />
</button>
```
The icon’s function is to indicate downloading the brochure, so we can give the alternative text “Download product brochure.”.
Example 2: a logo that functions as a link to the homepage.
Menu 1 Menu 2
```
<a href="/">
  <img src="logo.png" alt="Homepage" />
</a>
```
The logo here is not just a visual identity, but also has a navigation function. We can use the alternative text “Homepage”. You can also add the brand identity if needed, for example “eBuy Homepage”.

4. Text in images

Images containing text as part of their content need special attention for accessibility. If an image conveys a message or important information through text in the image (e.g. quotes, promo titles, data labels, etc.), the text must also be conveyed in the alternative text or accompanying text.

Using text in images should be avoided as much as possible due to various limitations, such as screen readers not being able to read text in images, possible image loading failures, or low image quality making the text unreadable. However, if text in images must be used, all text in the image must also be written in the alternative text or other text elements near the image.

Principles for writing alternative text for text in images:

If the text in the image is the core information, rewrite the text in the alternative text.
If the text in the image is already conveyed in another element nearby, it can be considered decorative (empty alternative text).
If the image only contains decorative text, it can be considered decorative (empty alternative text).
Avoid describing the appearance of the text (such as color, font size, font type), unless the appearance has meaning that must be conveyed.

Here are some examples of text in images and their alternative text:

Example 1: a funny meme with a cat and the text “Mantap jiwa”.

We can use the alternative text “A cat lying down with a flat expression and raising its left front paw. Text: ‘Good job!’.”. The text is the main part of the humor, so it should not be ignored.
Example 2: a promo banner on an e-commerce site.

Since all the text in the image is meaningful, and there is no other text element explaining it, we can write all of it as alternative text: “Stay active this winter. Shop smartwatches. Fast Delivery. Great Prices.”.
Example 3: a photo of the Indonesian Declaration of Independence manuscript.

Since the content is quite long, it’s better to write it explicitly near the image and give a brief explanation as alternative text, such as: “Typed manuscript of the Indonesian Declaration of Independence.”.

5. Complex images

Sometimes, an image conveys too much or too detailed information to be conveyed briefly in the alt attribute. For example, data charts, flow or process diagrams, maps, technical or scientific schematics, and infographics with many elements. If the information in the image cannot be adequately conveyed with relatively short alternative text, the right approach is to write the alternative text in two parts.

Short part: contains the type of image (chart, map, diagram, etc.) and its general content, and if necessary, a reference to the long part. This part is written in the alt attribute.
Long part: contains the important information the author wants to convey through the image. This part is written in another text element near the image, elsewhere, or even on a separate page.

Let’s review a complex image in the form of a bar chart showing the distribution of Tuberculosis (TB) cases in Indonesia by age and gender.

Alternative text can be written using several approaches, namely:

Approach 1: Using only `alt`

If the information to be conveyed is relatively simple and can fit in one or two sentences, we can write it in the alt. For example: “A bar chart showing the number of TB cases in Indonesia by age and gender. Males dominate the cases, especially in the 45–54 age group.”.

<img
  src="grafik-tbc.png"
  alt="A bar chart showing the number of TB cases in Indonesia by age and gender. Males dominate the cases, especially in the 45–54 age group."
/>

Approach 2: Using `alt` and a full explanation near the image

If the author wants to convey more detailed information, the alternative text should be divided into a short part and a long part. The short part is written in the alt attribute, for example: “A bar chart showing the number of TB cases in Indonesia by age and gender. Full explanation is in the next section.”

Meanwhile, the long part containing a more detailed explanation is added near the image. For example: “A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases…”.

<img
  src="grafik-tbc.png"
  alt="A bar chart showing the number of TB cases in Indonesia by age and gender. Full explanation is in the next section."
/>
<p>
  A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases. For females, the peak is in the 15–24 and 25–34 age groups, each with about 8,000 to 8,500 cases. In general, males have a higher number of TB cases than females in almost all age groups.
</p>

Approach 3: Using `alt` and explanation in the image

The short and long parts can also be written and displayed together in the image. This approach requires the use of special HTML elements, namely <figcaption> placed inside the <figure> element.

<figure>
  <img
    src="grafik-tbc.png"
    alt="A bar chart showing the number of TB cases in Indonesia by age and gender. Full explanation is below."
  />
  <figcaption>
    A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases. For females, the peak is in the 15–24 and 25–34 age groups, each with about 8,000 to 8,500 cases. In general, males have a higher number of TB cases than females in almost all age groups.
  </figcaption>
</figure>

A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases. For females, the peak is in the 15–24 and 25–34 age groups, each with about 8,000 to 8,500 cases. In general, males have a higher number of TB cases than females in almost all age groups.

Approach 4: Using `alt` and explanation elsewhere

The long part can also be written elsewhere on the same page, not necessarily near the image. To refer to it, we can use two ways.

Adding a reference in the alternative text

For example, if the full explanation is written in a section with the heading “Distribution of TB Cases in Indonesia”, we can use alternative text “A bar chart showing the number of TB cases in Indonesia by age and gender. Full explanation is under the heading Distribution of TB Cases in Indonesia.”.

<img
  src="grafik-tbc.png"
  alt="A bar chart showing the number of TB cases in Indonesia by age and gender. Full explanation is under the heading Distribution of TB Cases in Indonesia."
/>
...
<section>
  <h3>Distribution of TB Cases in Indonesia</h3>
  <p>
    A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases. For females, the peak is in the 15–24 and 25–34 age groups, each with about 8,000 to 8,500 cases. In general, males have a higher number of TB cases than females in almost all age groups.
  </p>
</section>
...

Using aria-describedby

We can use the aria-describedby attribute to semantically link the image with its full explanation text. The value of the attribute is the id of the full explanation text element.

<img
  src="grafik-tbc.png"
  alt="A bar chart showing the number of TB cases in Indonesia by age and gender."
  aria-describedby="tbc-graph-description"
/>
...
<p id="tbc-graph-description">
  A grouped bar chart showing the distribution of TB cases in Indonesia by age group and gender. There are two bars for each age group: one for males and one for females. The highest number of TB cases for males is in the 45–54 age group, about 9,500 cases. For females, the peak is in the 15–24 and 25–34 age groups, each with about 8,000 to 8,500 cases. In general, males have a higher number of TB cases than females in almost all age groups.
</p>
...

Approach 5: Using `alt` and a link to the full explanation

If the information you want to convey through an image is very detailed and lengthy, you can write it on a separate page and then refer to it with a link.

<img
  src="grafik-tbc.png"
  alt="A bar chart showing the number of TB cases in Indonesia by age and gender."
/>
<a href="/distribusi-kasus-tbc.html">
  Full description of the TB cases bar chart in Indonesia
</a>

Beyond Compliance: The Broad Benefits of Alternative Text

Alternative text is fundamentally a crucial element for digital accessibility, ensuring that visual content is accessible to all users, including those with visual impairments. However, viewing alternative text merely as a requirement for compliance is a limited perspective. In reality, alternative text has a much broader impact and can provide significant added value.

Improves SEO

Google uses alternative text and page content to understand the main meaning of an image. By providing meaningful alternative text, images are more likely to appear in image search results and contribute to the overall SEO optimization of the page. This can increase organic traffic to your website.
Enhances the experience for all users in any condition
- When images fail to load: unstable internet connections, data-saving settings, or other technical issues can sometimes cause images to not load or load in poor quality. In such situations, alternative text plays a role in conveying the information from the visual element that failed to load and prevents a frustrating experience.
- Deeper understanding for everyone: even for sighted users, meaningful alternative text can help in understanding complex visual elements that contain dense information.
- Voice assistants and smart speakers: many users increasingly rely on devices like Google Home, Alexa, Google Assistant, or Siri to access information. When content is read aloud, meaningful alternative text allows voice assistants to accurately convey visual information. Imagine asking a smart speaker or voice assistant about a recipe, and it can describe the steps illustrated in an image thanks to meaningful alternative text.
Optimizing social media content

Adding meaningful alternative text to visual content uploaded to social media makes your content accessible to a wider audience, including those using screen readers. This clearly expands the potential reach of your uploaded content and demonstrates a commitment to inclusivity.

Conclusion

Alternative text is not just a formality to comply with accessibility standards. It is a fundamental component of an inclusive and user-friendly web and social media for everyone. From news articles, product descriptions in online stores, to posts on X, alternative text ensures that visual messages can be understood by anyone, on any device, and in any condition.

Beyond the technical aspect, writing meaningful alternative text also involves an art that requires sensitivity to: determine whether an image is informative, decorative, or functional; understand the context of the image in relation to the surrounding content; and compose concise yet descriptive words, so that screen reader users can grasp the essence of the image without being overwhelmed by excessive information.

By providing meaningful alternative text, we are not only help users with disabilities, but also improve the quality, reach, and impact of our digital content as a whole. Let’s commit together to creating a more inclusive digital environment by always writing meaningful alternative text. This is our shared responsibility.

Meaningful alternative text is a small step with a big impact in realizing digital accessibility. Let's start there, and expand to other areas.

References

https://www.w3.org/WAI/tutorials/images/decision-tree/ https://webaim.org/techniques/alttext/ https://accessibility.web-resources.upenn.edu/resources/content-creators/alternative-text-complex-images https://www.med.unc.edu/webguide/accessibility/alt-text/ https://accessibility.huit.harvard.edu/describe-content-images https://html.spec.whatwg.org/multipage/images.html#alt https://www.oyova.com/blog/ada-alt-text-best-practices/ https://developers.google.com/tech-writing/accessibility/self-study/write-alt-text