How to design great alt text: An introduction

Writing Effective Alt Text: More Than a Checkbox Images need alternative text, commonly known as alt text. This is often one of the first accessibility concepts designers and developers learn. On the surface, it seems simple and usually is easy to implement. Automated tools can quickly detect whether alt text exists.

The real challenge is not adding alt text, but deciding when it is needed and how to write it well.

Good alt text requires understanding two things: who the text is for and why the image exists. Who Uses Alt Text 

Alt text is primarily used by people who rely on screen readers to access websites, apps, and software. This includes people who are blind and people with low vision who may not be able to see images clearly enough to understand them.

If an image communicates information that is not available elsewhere on the page, a user who cannot see that image will miss that information entirely if alt text is missing.

Alt text is also useful for people with slow or unreliable internet connections. Images can be turned off in most browsers to speed up page loading, and when this happens, the alt text is shown in place of the image.

Some people with cognitive disabilities choose to turn off images to reduce distractions and make content easier to process.

On the other hand, people with learning disabilities may benefit from images that support written text. This highlights an important truth about accessibility: different users have different needs, and thoughtful image use matters.

Alt text also benefits search engines. It helps them understand image content and contributes to search engine optimization.

Do All Images Need Alt Text Yes. Every image should include an alt attribute.

This does not mean every image needs a description. Decorative images should use an empty alt attribute. This tells screen readers to ignore the image. Without it, a screen reader may announce the image file name, which creates a poor experience.

In accessibility, images generally fall into two categories: decorative and informative. Decorative vs Informative Images Decorative images exist purely for visual appeal or repeat information already available in text. Removing them does not reduce understanding. These images should use empty alt text.

Informative images convey meaning or information that is not otherwise available. If removing the image would cause a loss of information, the image is informative and needs descriptive alt text.

A simple test helps. Imagine the image is removed. If something important is missing, the image is informative.

Context is critical. A large background banner may add visual interest but no meaning. A logo identifies the site. The same type of image can be decorative in one context and informative in another. Images Used With Text Images often appear alongside headlines, captions, or product descriptions. In many cases, the surrounding text already explains what the image shows.

When this happens, adding alt text that repeats the same information can be redundant. Sometimes the image exists mainly to attract attention or encourage a click rather than to convey details.

Whether such images need alt text depends on purpose and context. There is no single rule that applies in every case. Images That Almost Always Need Alt Text Some image types are almost always informative:

Images that act as links or buttons

Images that contain important text

Logos

Even for these, it is still important to check context. If nearby HTML text provides the same information, duplicating it in alt text may not be necessary. Images Used as Links or Buttons Clickable images are common, especially on marketing and e-commerce sites. Screen readers always announce links and buttons. If a linked image has no alt text, a user may only hear the word “link,” with no idea what it does.

When writing alt text for clickable images:

The image should have alt text or be part of a clickable area that includes descriptive HTML text

The text should make clear what will happen when the link or button is activated

If there is no visible text, alt text is essential

If users cannot understand a link or button, they are unlikely to use it. Images of Text Whenever possible, text should be rendered using HTML rather than embedded inside images. HTML text is easier to access and customize.

In marketing, designers sometimes rely on visual text styles that are difficult to reproduce with CSS. In these cases, teams may use a single image that includes both text and visuals and provide the text using alt text.

While this helps screen reader users, it still fails accessibility requirements for many low vision users who need control over font size, color, and contrast. It is sometimes used as a practical shortcut, but it is not ideal. Logos Logos almost always need alt text. Even when a logo is mostly text, recreating it accurately in HTML often compromises design or branding.

At a minimum, the alt text should be the company or product name. If the logo links to the homepage, a clearer description such as the company name followed by “home” provides a better experience. Icons Are Images Too Icons are often overlooked, but they are images and follow the same rules.

Ask yourself:

Is there text next to the icon

Does that text clearly explain the icon’s purpose

Is the icon clickable

Icons without labels are common, but they create accessibility issues. Many icons can represent multiple actions. A gear icon, for example, might mean settings, preferences, or tools.

Including text labels next to icons improves clarity, increases the clickable area, and benefits everyone. If labels are not possible, the icon should be clear, large enough to interact with easily, and include meaningful alt text. When Alt Text Should Be Written and By Whom Alt text should be written as early as possible.

If you created the image, you should write the alt text.

If you introduced the image in a wireframe or mockup, you should write the alt text.

If you are a developer implementing an existing design, the alt text should already exist. Your responsibility is to ensure it is implemented correctly.

Designers can include alt text as annotations in wireframes. Content creators should write alt text or captions while drafting content.

Alt text written long after the design phase is usually less effective because the original context has been lost. As with most accessibility work, it is faster and better when done upfront. Finding the Right Level of Detail Good alt text focuses on what matters.

Too little detail is unhelpful.

Too much detail is overwhelming.

For example, “Photo of a house” provides very little value. A more useful description might mention the type of house, the setting, and one or two key features. At the same time, listing every architectural detail is unnecessary unless those details are important to the content.

The goal is clarity, not exhaustiveness. Why Alt Text Matters Writing alt text forces you to think about the purpose and meaning of every image you include. This process often leads to better design and better content.

While writing alt text, you may realize an icon is unclear and needs to be redesigned. While drafting a blog post, you may struggle to describe an image and decide it does not add value after all.

By thinking carefully about images and their impact on different users, you create stronger, more inclusive experiences. Images are powerful. The more intention you bring to them, the more effective they become.

Published by CoolHappenings

Hi, i am a tech accessibility advocate, and this is my way of reaching out to people from all over the world.

Leave a comment