Alt-tekst: Sådan gør du billeder tilgængelige for alle

Why alt text matters

Alt text, short for alternative text, describes what an image shows or does. Screen readers read it aloud, and Braille displays output it as Braille. This gives blind and visually impaired people the same information that sighted people get from the image. Alt text also appears when an image fails to load, for example on a slow connection.

Search engines use alt text too, to understand what an image shows. Good alt text therefore helps your images appear in image search and supports the findability of your website.

Text alternatives are also a legal requirement. WCAG success criterion 1.1.1 (Non-text Content) requires a text alternative for every image that conveys information. It is one of the most basic rules of digital accessibility, and missing alt text is one of the most common errors found in accessibility audits.

In short:

• Every informative image needs alt text that describes its content.

• Every functional image needs alt text that describes its function.

• Decorative images get an empty alt attribute, so screen readers skip them.

How to add alt text

In most content management systems, you will find a field called "Alt text" or "Alternative text" when you upload or edit an image. In HTML, alt text goes in the alt attribute of the img element:

<img src="tulip.jpg" alt="Yellow tulip in a glass vase">

You do not need to repeat the alt text in the title attribute. Some screen readers would then read the same text twice, and title appears as a tooltip when the mouse hovers over the image. If you want visible information about an image, use a caption instead.

Buttons, links and form fields without visible text need an accessible name as well. Use the aria-label or aria-labelledby attribute for these. You can find out more in our article on aria-label.

<button type="submit" aria-label="Send form">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

The different types of images

What good alt text looks like depends on the role an image plays on the page. Before writing, ask yourself: what would someone miss if they could not see this image?

Informative images

Informative images convey content, for example photos, illustrations or logos. Describe what is relevant to the message of the page, not every detail.

<img src="logo.svg" alt="Eye-Able logo">

Some examples of weak and better alt text:

• Instead of "Photo", write "Employee working on a laptop in a bright office".

• Instead of "Logo", write "Eye-Able logo".

• Instead of "Image of a chart", write "Bar chart showing sales figures for 2025".

If an image contains text, such as a banner or a quote graphic, the alt text must include that text.

Charts and diagrams

For simple charts, put the key statement into the alt text, for example: "Bar chart: party A won 34.0% of the vote, party B 28.0%."

Complex charts contain too much information for a short alt text. In this case, name the chart type and topic in the alt text and describe the data in the text below the chart or in a table. Point to it in the alt text:

<img src="population-chart.png" alt="Bar chart of the population of German federal states. The figures follow in the text below.">

Important figures should always appear in the text as well, so that everyone can find them.

Functional images

Functional images trigger an action or lead somewhere: icons in buttons, linked logos or arrows in a slider. Their alt text describes the function, not the appearance.

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

Some examples:

• A magnifying glass icon: "Start search", not "Magnifying glass".

• A floppy disk icon: "Save", not "Floppy disk".

• An arrow in a slider: "Next page", not "Arrow pointing right".

• A linked logo: "Homepage" or "Eye-Able homepage", not "Logo".

Decorative images

Decorative images add no information, for example background patterns, dividing lines or mood images that only repeat what the text already says. They get an empty alt attribute:

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

Keep the attribute, but leave it empty. If the alt attribute is missing completely, many screen readers read the file name instead.

Checklist: does an image need alt text?

Go through these questions in order and stop at the first "yes":

1. Does the image contain text that is not repeated elsewhere? Then the alt text contains that text.

2. Is the image part of a link or button? Then the alt text describes the function.

3. Does the image add information that is not in the surrounding text? Then the alt text describes that information.

4. Is the image purely decorative or already fully described in the text? Then use an empty alt attribute: alt="".

How to write good alt text

1. Do not start with "Image of" or "Photo of". Screen readers already announce that an image follows. Only mention the image type if it matters, for example "Illustration" or "Screenshot".

2. Keep it short. One or two sentences are enough. Aim for around 80 characters and stay below about 120. Many Braille displays show 40 to 80 characters at a time, so longer texts are tiring to read.

3. Think about the context. The same photo can need different alt text on different pages. On a team page, the name of the person matters. In an article about remote work, the home office setting matters.

4. Avoid keyword stuffing. Alt text is written for people. A natural description also helps search engines most.

5. Leave out copyright notices and photo credits. They belong in a caption or in the imprint, not in the alt text.

6. Check spelling, grammar and punctuation. Screen readers read mistakes aloud and use punctuation for pauses.

7. Ask for feedback. Have blind or visually impaired people check your alt texts. Alternatively, ask someone who has not seen the image whether the description gives them the right idea.

What happens if alt text is missing?

If an informative image has no alt text, screen readers often read out the file name instead, for example "img123.jpg" or "IMG_4711_final.png". This tells users nothing. In the worst case, they cannot use a link or button at all because they do not know where it leads.

The consequences at a glance:

• Blind and visually impaired users miss information or get stuck.

• The website fails WCAG success criterion 1.1.1.

• The website may not meet accessibility laws, which can lead to complaints or fines.

• Search engines understand the images less well.

Alt text and accessibility laws

Since 28 June 2025, the European Accessibility Act (EAA) has applied to many digital products and services in the EU, such as online shops, banking services and e-books. Public sector websites in the EU have had to be accessible for several years already. In the UK, the Equality Act 2010 requires reasonable adjustments.

The technical basis in the EU is the European standard EN 301 549, which refers to WCAG level AA. Text alternatives for images are a core requirement. Many organisations must also publish an accessibility statement that names known barriers, including missing alt text.

Since new images are added all the time, a single check is not enough. Regular monitoring helps you find missing or empty alt texts before they become a problem.

WCAG and alt text

These WCAG success criteria are the most important for images:

• 1.1.1 Non-text Content (level A): Every informative and functional image needs a text alternative. Decorative images must be hidden from assistive technologies.

• 1.4.5 Images of Text (level AA): Use real text instead of images of text wherever possible. If an image of text is unavoidable, its alt text must contain the text.

• 2.4.4 Link Purpose (level A): If an image is the only content of a link, its alt text must make clear where the link leads.

Conclusion

Good alt text is short, fits the context and describes what someone would miss without the image. Informative images get a description, functional images a description of their function, and decorative images an empty alt attribute. With these three rules, you make your images accessible to everyone and support your SEO at the same time.

Want to know how many images on your website are missing alt text? Start a free accessibility check with Eye-Able and get your results in less than 2 minutes.

FAQ: Alt text

What is alt text?

Alt text is a short text alternative for an image. Screen readers read it aloud, so blind and visually impaired people get the information the image conveys. It is added in the alt attribute in HTML or in the alt text field of a CMS.

How long should alt text be?

Around 80 characters is a good guideline, and it should not be much longer than about 120. If an image needs a longer description, such as a complex chart, describe it in the surrounding text and refer to it in the alt text.

Do decorative images need alt text?

No. Decorative images get an empty alt attribute (alt=""), so screen readers skip them. Do not leave out the attribute completely, as many screen readers then read the file name.

What are the most common alt text mistakes?

Missing alt text, generic descriptions such as "image" or "photo", file names as alt text, keyword stuffing and descriptions on purely decorative images. Another common mistake is describing what a button looks like instead of what it does.

Does alt text help SEO?

Yes. Search engines use alt text to understand what an image shows. This can improve visibility in image search. The best alt text for SEO is a natural, accurate description, not a list of keywords.

Can AI write alt text?

AI tools can suggest alt text and help with large numbers of images. However, they do not know the context of your page or the purpose of an image. Always check and adjust automatically generated alt text before you publish it.

Can Eye-Able check whether my alt texts are correct?

Yes. The AI Tests, an add-on module for Eye-Able Report, go beyond checking whether alt text exists. The AI looks at the image itself and checks whether the alt text is a suitable description of it. For every faulty alt text, you get an explanation of the problem and a suggested correction that you can review and apply.

How can I test alt text?

Use a screen reader such as NVDA on Windows or VoiceOver on macOS and iOS and listen to how your images are announced. An automated accessibility check, such as the Eye-Able platform, finds missing and empty alt texts across your whole website. The final decision on whether alt text really helps in its context should always be made by a person.