Entscheidungsschema für Alternativtexte
veröffentlicht in 2017zuletzt bearbeitet in
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 Eigenschaftcontent
eingesetzt werden.
Es gibt darüber hinaus zwei ARIA-Techniken, die Grafiken vor Screenreadern verbergen:
role="presentation"
entfernt eine Grafik samt Alternativtext aus demAccessibility-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
Der Beitrag Entscheidungsschema für Alternativtexte besteht aus folgenden einzelnen Webseiten:
Grafiken als Teil eines aktiven Elements
Wenn Grafiken Teil eines Links oder eines Buttons sind, dann kommt es darauf an, dass der Zweck der Komponente im Namen der Komponente steht.
Grafiken als illustrierende Bilder
Illustrierende Bilder weisen einen geringen Informationsgehalt auf oder werden im Kontext des Bilds bereits erläutert; sie benötigen identifizierende Textalternativen.
Grafiken als informative Bilder
Informative Bilder enthalten wesentliche Inhalte der Seite und benötigen beschreibende Textalternativen.
Grafiken als dekorativen Inhalt
(Aktuelle Seite)