What is Alt Text for barrier-free reading of images?

Alt text, or alternative text, describes what can be seen in an image. It’s used to make your website accessible to everyone — including people who are blind or visually impaired.

Screen readers read alt text aloud, allowing users to understand what an image represents. This means alt text directly contributes to digital accessibility and helps your website comply with the WCAG guidelines.

Alt text doesn’t just improve accessibility — it also strengthens your SEO. Clear descriptions help search engines understand what an image is about, supporting both usability and website performance.

In short

• Alt text makes websites accessible to everyone

• Clear descriptions help search engines better understand your content

• Alt text is essential for complying with digital accessibility guidelines

How to write good alternative text (alt text)

You create alt text by adding a short description to the element you want to clarify. This can be done in the code or via your CMS (Content Management System). A CMS allows you to manage website content without requiring advanced technical knowledge.

In HTML, you add the description using the alt attribute inside the img tag. This tells users — and assistive technologies — what the image shows. For example:

<img src="flower.jpg" alt="yellow tulip in a vase" title="yellow tulip in a vase>

In addition to the alt attribute, you can also use the title attribute. This provides extra information when users hover over an element. Some screen readers read the title instead of the alt text. By using the same description in both, you ensure no information is lost.

For buttons and forms, use ARIA attributes such as aria-label or aria-labelledby. hese describe the function of an element, even when there are no visual cues.

Attribute

Purpose

Example

alt

Description of an image

<img alt=" Eye-Able logo">

title

Additional explanation

<img title="Eye-Able logo">

aria-label

Describes buttons or forms

<button aria-label="Send form">

Different types of images

Informative images

Informative images contain essential content. They help screen reader users understand what is shown visually.

A common example is a logo. The alt text should briefly describe what the logo shows and which organisation it belongs to.

<img src="logo.jpg" alt="Eye-Able logo showing a stylised eye." title="Eye-Able logo showing a stylised eye.">

Avoid vague descriptions like “nice image” or “photo.” Focus only on information that is relevant.

A screen reader reads this text aloud, so that someone who cannot see the image still knows that it is the Eye-Able logo. This makes the website accessible and ensures that it complies with the WCAG guidelines.

Examples:

Poor example

Good example

“Image of a chart”

“Bar chart showing sales figures for 2025”

"Logo"

“Eye-Able logo with a stylised eye”

"Photo"

“Portrait of an employee working on a laptop”

Charts and diagrams

Charts show data and relationships. The alt text should explain what the chart shows and why it matters.

• For simple charts, include the key data directly in the alt text.

• For complex charts, describe the purpose and refer users to nearby text for details.

If the diagram is complex, just describe the purpose and refer to a text below for more details. This prevents the alt text from becoming too long.

Example:
<img src="election-chart.jpg" alt="Bar chart showing election results. Further explanation follows in the text.">

Always ensure key figures are also available in text, so everyone can access the information.

Functional images

Functional images trigger actions, such as buttons, icons, or linked logos. The alt text should describe what the image does, not what it looks like.

Example:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Go to Eye-Able homepage" title="Go to Eye-Able homepage"</a>

The alt text here indicates that the image links to the home page. The appearance of the logo is not important, but its function is.

Good examples:

• “Start search”

• “Submit form”

• “Next page”

Avoid visual descriptions like “arrow” or “magnifying glass.”

Common functional images:

Type of image

Function

Example alt-text

Search icon

Start a search

"Start search"

Save icon

Save the document

"Save"

Arrow to right

Go to the next page

"Next page"

Home icon

Go to homepage

"Homepage"

This approach ensures that everyone, including screen reader users, understands what happens when they click on the image.

Decorative images

Decorative images do not add any content. They are only there for atmosphere or design. In this case, keep the alt attribute empty:

<img src="background-pattern.jpg" alt="">

Screen readers will skip these images, preventing unnecessary interruptions.

Use decorative images deliberately. If a photo or icon conveys something about the content, it should not be decorative. In that case, you should add a description.

Checklist for decorative images:

• Does the image add meaning?
  Yes → add alt text.
  No → leave the alt attribute empty.

• Is it purely decorative?

  Yes → use alt="".

• Is it part of a button or link?

  No → then it can be decorative.

A clear distinction between decorative and informative images helps to keep your website accessible.

By using alt text in this way, you make your website more understandable and user-friendly for everyone.

How to write effective alt text

Good alt texts help people who cannot see images to understand the content. You can write a good alt text by briefly and clearly describing what can be seen in the image.

Best practices:

• Be concise and descriptive

• Avoid phrases like “image of” or “photo of”

• Focus on what’s relevant to the context

• Keep alt text between 80–120 characters

• Use correct spelling and grammar

Guidelines overview

Aspect

Guideline

Example

Opening

Avoid “image of”

“Blue car on a country road”

Length

80–120 characters

“Two students working on laptops in a library”

Language

Clear and correct

No abbreviations or emojis

Focus

Relevant context only

Describe what matters

Alt text also supports SEO. Search engines use it to understand images, improving visibility in image search results, without keyword stuffing.

Ask for feedback from someone who uses a screen reader or who is unfamiliar with the image. Their response will show whether your description is clear enough. If they understand what the image shows, you know that your alt text is working well. This will make your website more accessible and user-friendly for everyone.

What happens if alt text is missing?

Without alt text, screen readers announce file names like img123.jpg. Users miss crucial information, and your website may violate WCAG and accessibility legislation.

Consequences of missing alt text:

• Users don’t understand content

• Your site fails WCAG 2.2 requirements

• Organisations risk fines under accessibility laws

Alt text ensures equal access, and compliance with the European Accessibility Act (EAA).

Digital accessibility legislation

Digital accessibility laws require organisations to make websites and apps usable for everyone, including people with disabilities.

• WCAG guidelines define accessibility standards

• From 28 June 2025, the European Accessibility Act (EAA) applies to many digital products and services

• Enforcement is overseen by a diverse group of (government) agencies or institutions.

Key obligations:

• Comply with EN 301 549

• Publish an accessibility statement

• Provide text alternatives for images and media

• Monitor and maintain accessibility continuously

WCAG guidelines and alt text

WCAG 2.2 clarifies how alt text should be used:

• Every meaningful image needs a descriptive alt text

• Decorative images use alt=""

• Context determines what’s relevant

• Test regularly using accessibility tools

Key points from WCAG 2.2:

Guideline

Explanation

Alt texts required

Every meaningful image is given descriptive alt text.

Decorative images

Use empty alt text (alt="") if the image does not add any information.

Context is important

Describe what is relevant to the content of the page.

Test your content

Use a WCAG checker to verify that your alt texts meet the requirements.

Frequently asked questions

1. How do I add alt text to images?

Add the alt attribute in HTML or via your CMS with a short, clear description.

2. How do I make alt text clear for everyone?

Use simple language, avoid unnecessary detail, and describe what users would miss otherwise.

Good alt text:

• Describes what someone misses if the image is not visible.

• Takes into account the WCAG guidelines for digital accessibility.

• Fits within the meaning of the page.

3. What mistakes should I avoid?

Many people leave the alt text blank or write sentences that are too long. This makes the website less accessible.

Avoid these mistakes:

1. Leaving alt text empty

2. Writing generic descriptions

3. Keyword stuffing

4. Adding alt text to purely decorative images

4. How does alt text improve SEO of my website?

Alt text helps search engines understand what is in an image. This can improve your image's ranking in Google Images.

Well-written alt text:

• Improves the findability of your website.

• Provides context to search engines.

• Increases the likelihood that users will visit your site.

5. Does missing alt text affect accessibility?

Yes, without alt text, screen readers cannot describe what is in the image. People with visual impairments then miss out on information.

Alt text ensures that everyone understands the same content, regardless of whether they can see or not. This makes your website more accessible and user-friendly.

6. How can I test my alt text?

Use screen readers like NVDA or VoiceOver, or check your site with the Eye-Able accessibility platform to instantly identify missing or unclear alt texts.

You can also use tools that check accessibility, such as our Eye-Able Platform. We quickly and easily show you whether your alt texts are missing or unclear.