Entscheidungsschema für Alternativtexte

Grafiken als dekorativen Inhalt

Manche Grafiken enthalten keine Informationen, sondern dienen der Ästethik, werden redundant zu anderen (Text-)Merkmalen der Seite eingesetzt oder sind unsichtbar. In solchen Fällen sollten die Grafiken von Hilfsmitteln wie Screenreadern ignoriert werden können.

Es gibt verschiedene Techniken, um Grafiken vor Screenreadern zu verbergen:

• Mit einem leeren Alternativtext können Grafiken in HTML vor Screenreadern versteckt werden:

  <header>
  <img src="header.png" alt="">
</header>  

• Generell werden Grafiken, die per CSS eingebunden werden, von Screenreadern ignoriert. Dabei sollten Hintergrundgrafiken vermieden werden, weil sie im Kontrastmodus nicht dargestellt werden. Vielmehr sollten die Pseudoattribute :before oder :after mit der Eigenschaft content eingesetzt werden.

Es gibt darüber hinaus zwei ARIA-Techniken, die Grafiken vor Screenreadern verbergen:

• role="presentation" entfernt eine Grafik samt Alternativtext aus dem Accessibility-Tree (außer wenn ein globales ARIA-Attribut auf die Grafik angewandt wird).
• aria-hidden="true" entfernt eine Grafik (einschließlich Alternativtext) ebenfalls aus dem Accessibility-Tree.

Hinweis: Da Grafiken ein alt-Attribut benötigen, um HTML-konform zu sein, empfiehlt sich, auf die ARIA-Techniken zugunsten eines leeren Alternativtextes zu verzichten.

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören:

• Masterarbeit von Sarah Kitza: Gestaltung von Alternativtexten – eine empirische Studie aus Nutzerinnen- und Nutzersicht
• TU Chemnitz: Leitfaden: Alternativtexte für Grafiken