Barrierefreiheit (a) Regeln – 3

Bilder

Es geht nicht nur darum, Alt-Text zu einem Bild hinzuzufügen; es ist viel mehr als das.

Dekorative Bilder

• Wenn ein Bild keinen zusätzlichen Kontext oder zusätzliche Informationen hinzufügt (dekoratives Bild), die es dem Benutzer ermöglichen, den Kontext besser zu verstehen, sollte es vor unterstützenden Technologien (AT), wie z. B. einem Bildschirmlesegerät, verborgen bleiben.

• Verwenden Sie eine dieser Methoden, um Bilder vor AT: auszublenden

  • Eine leere oder Nulltextalternative (alt)
  • ARIA anwenden
  • Fügen Sie das Bild als CSS-Hintergrund hinzu

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

• Im Zweifelsfall fügen Sie den Bildern Beschreibungen hinzu.

Leer oder null alt

• Setzen Sie das Bild-Alt-Attribut nicht auf „“, es sei denn, das Bild ist rein dekorativ.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

Informative Bilder

• Wenn ein Bild ein Konzept, eine Idee oder ein Gefühl vermittelt, sollten Sie programmatischen Alternativtext hinzufügen, der den Zweck des Bildes beschreibt.

• Fügen Sie nach Möglichkeit eine sehr detaillierte Beschreibung des Bildes hinzu.

z.B.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• Wenn es sich bei dem Bild um ein (Inline-)Bild handelt, fügen Sie „role="img"“ hinzu.

• Da Elemente das Alt-Attribut nicht unterstützen, verwenden Sie alternative Codierungsmethoden, um eine Beschreibung bereitzustellen.

Method	Use Case	Pros	Cons