How to Fix WCAG 1.1.1: Alt Text for Images (BFSG Compliance)
If an image communicates meaning, that meaning must also be available as text so assistive technologies can present it in another form. For companies improving websites for BFSG-related accessibility expectations in Germany, alt text is one of the clearest and fastest issues to fix.
WebAIM's 2025 homepage study found that missing alternative text was present on 55.5% of pages, which makes this one of the most common accessibility failures on the web today. That is exactly why WCAG 1.1.1 is a smart first rule to cover in a technical content hub.
The Problem in Plain English
WCAG 1.1.1 says that non-text content needs a text alternative so the same information can be presented through speech, braille, or other assistive formats. In simple terms: if an image is important, describe it; if it is only decorative, hide it from screen readers with an empty alt attribute.
A product photo, a chart, an icon-only button, or a banner image may all need different treatment depending on whether they carry meaning. Good alt text does not describe every pixel; it communicates the purpose of the image in the page context.
Who This Affects
This rule matters most for blind users and many low-vision users who rely on screen readers or other assistive technology to understand what is on a page. When meaningful images have no text alternative, those users can miss instructions, product details, navigation cues, or form actions.
It also affects teams internally. When alt text is missing, content editors, developers, and marketing teams usually need to revisit pages later instead of getting it right during publishing.
The Code: How to Fix It
A missing alt attribute means the image has no reliable text alternative for assistive technology.
❌ Bad example:
<img src="submit-button.jpg">
If the image acts like a button or communicates an action, the alternative text should communicate that action.
✅ Good example:
<img src="submit-button.jpg" alt="Submit your contact form">
Decorative images should usually use an empty alt="" so screen readers can ignore them.
✅ Good decorative example:
<img src="divider-line.jpg" alt="">
If the same decorative image is added in a context where it might still be exposed to assistive technology, teams sometimes also pair the empty alt text with additional hiding logic. The important principle is that decorative content should not create noise for screen reader users.
✅ Common decorative pattern:
<img src="divider-line.jpg" alt="" aria-hidden="true">
If the image already sits next to visible text that says the same thing, keep the alt text short. If the image is complex, such as a chart or infographic, provide a concise alt text and place the fuller explanation in surrounding text.
Special Case: Linked Images
When an image is also a link, the alt text should communicate the destination or function of the link rather than just describing the image. A logo linking to the homepage is one of the most common templates in the wild and exactly where teams tend to write weak alt text.
❌ Bad example:
<a href="/">
<img src="logo.png" alt="Logo">
</a>
✅ Better:
<a href="/">
<img src="logo.png" alt="Go to the Navable homepage">
</a>
How to Test It
Turn on a screen reader and move through the page image by image. Meaningful images should be announced with useful text, and decorative ones should be skipped.
Inspect the HTML and check whether each meaningful image has an alt attribute with a purpose-driven description.
Review templates, CMS components, and image upload flows so editors are prompted to add alt text before publishing.
Common Mistakes
- Writing no alt text at all for informative images, which is a direct failure of WCAG 1.1.1.
- Writing file names like
team-final-v2.pnginstead of useful descriptions. - Repeating nearby heading text word for word when the image adds no extra meaning.
- Describing decorative dividers, background flourishes, or spacer graphics instead of marking them as decorative.
- Using custom image-based controls without giving users the action name they need.