Accessible Images: Alt-Text, ARIA, WCAG Best Practices

Was sind Accessible Images?

Accessible Images sind Images auf einer Website, die ihre Bedeutung an alle User vermitteln — inklusive die, die sie nicht sehen können (Screen-Reader-User, blinde User, User mit deaktivierten Images, Search-Engines). Das primäre Tool: das alt-Attribut.

Image-Accessibility ist von WCAG required.

Die Basic-Regel: jedes Image braucht alt

<img src="chart-q4.png" alt="Q4 Revenue grew 23%">
<img src="divider.png" alt="">  <!-- decorative -->

Drei Kategorien von Images

Wie man guten Alt-Text schreibt

• Purpose beschreiben, nicht Appearance.
• Concise sein.
• Nicht "Image von" sagen.
• Context matchen.
• Filename-as-Alt skippen.
• Mit Screen-Reader testen.

Dekorative Images: Empty-Alt nutzen

<img src="ornament.png" alt="">

Komplexe Images: Charts, Infographics

1. Long-Description im Body-Text

<img src="sales.png" alt="Quarterly Sales, see below">
<p>Q1: $1M; Q2: $1.2M; Q3: $1.5M; Q4: $4.2M</p>

2. Hidden Description mit aria-describedby

<img alt="Sales Chart" aria-describedby="chart-desc">
<p id="chart-desc" class="visually-hidden">...</p>

3. Link zur detaillierten Description

<a href="/diagram-details">Detailed Text Description</a>

SVG-Accessibility

<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Chart showing growth</title>
</svg>

Image-Accessibility Best Practices

• Jedes <img> hat alt.
• Purpose, nicht Pixels.
• Keine Images von Text.
• Captions für komplexe Media.
• Mit Screen-Readers testen.
• Color ist nicht das einzige Signal.
• CAPTCHA-Images vermeiden.
• Sufficient Contrast für Image-Overlays.

Häufige Image-Accessibility-Fallstricke

• Alt komplett fehlend.
• Filename als Alt.
• Redundanter Alt.
• "Image von..." Prefix.
• Alt auf dekorativen Images.
• Langer Alt für komplexe.
• Image-only Buttons ohne Alt.
• Background-Images mit Content.

Tools zum Testen

FAQ: Accessible Images

Brauche ich alt auf dekorativen Images?

Ja — Empty-Alt.

Sollte alt "Image von" inkludieren?

Nein.

Wie lang sollte Alt-Text sein?

Concise — typisch < 125 Zeichen.

Was über Background-Images in CSS?

Wenn dekorativ: fine. Wenn Content: <img> mit alt nutzen.

Brauche ich alt auf Logo-Images?

Ja — typisch der Company-Name.

Was ist die WCAG-Requirement?

WCAG 2.1 Success-Criterion 1.1.1.

Wie hilft AI-generated Alt-Text?

Nützlich als Start-Point, aber verifizieren.

Image-Performance + Accessibility mit LoadFocus testen

LoadFocus läuft Lighthouse-Audits aus 25+ Regionen, flaggt missing alt + oversized Images. Registrieren bei loadfocus.com/signup.