Barrierefreie Bilder können auf den ersten Blick wie ein einfaches Thema wirken: Sie fügen einem Bild etwas „Alt-Text“ hinzu und schon sind Sie fertig. Aber das Thema ist differenzierter, als manche glauben. In diesem Abschnitt geht es um folgende Themen:
- So aktualisieren Sie den Code, um den Zugriff auf Images zu ermöglichen.
- Welche Informationen mit Nutzern geteilt werden sollten und wo sie geteilt werden sollten
- Weitere Möglichkeiten, Ihre Bilder zu verbessern, um Menschen mit Beeinträchtigungen zu unterstützen.
Zweck und Kontext des Bildes
Bevor auch nur eine einzige Codezeile geschrieben wird, müssen Sie sich zuerst Gedanken über den Sinn des Bildes und seine Verwendung machen. Wenn Sie sich Fragen zum Zweck und Kontext des Bildes stellen, können Sie ermitteln, wie die Informationen einer Person mithilfe von Hilfstechnologien (AT) wie Screenreadern am besten vermittelt werden können.
Sie können sich folgende Fragen stellen:
- Ist das Bild unerlässlich, um den Kontext der Funktion oder Seite zu verstehen?
- Welche Art von Information soll das Bild vermitteln?
- Ist das Bild einfach oder komplex?
- Weckt das Bild Emotionen oder fordert es den Nutzer zum Handeln auf?
- Oder ist das Bild nur optisch ansprechend und sinnlos?
Anhand eines visuellen Flussdiagramms wie zum Beispiel eines Entscheidungsbaums für Bilder können Sie besser entscheiden, zu welcher Kategorie Ihr Bild gehört.
Sie können die Bilder auf Ihrer Website oder in Ihrer Webanwendung mithilfe einer Browsererweiterung oder anderer Methoden ausblenden. Fragen Sie sich dann: „Verstehen Sie den verbleibenden Inhalt?“ Wenn die Antwort „Ja“ lautet, handelt es sich höchstwahrscheinlich um ein dekoratives Bild. Falls nicht, ist das Bild stattdessen in irgendeiner Weise informativ und kontextabhängig. Nachdem Sie den Zweck des Bildes ermittelt haben, können Sie die genaueste Codierungsmethode dafür ermitteln.
Dekorative Bilder
Ein dekoratives Bild ist ein visuelles Element, das keinen zusätzlichen Kontext oder keine zusätzlichen Informationen bietet, die es dem Nutzer ermöglichen, den Kontext besser zu verstehen. Dekorative Bilder sind eine Ergänzung und können Stil statt Substanz zur Verfügung stellen.
Wenn ein Bild dekorativ ist, muss es programmatisch vor ATs verborgen werden. Wenn Sie ein Bild so programmieren, dass es ausgeblendet wird, signalisiert dies dem AT, dass das Bild nicht erforderlich ist, um den Inhalt, den Kontext oder die Aktion der Seite zu verstehen. Es gibt viele Möglichkeiten, Bilder auszublenden. Sie können z. B. eine Alternative für leeren Text bzw. Nulltext verwenden, ARIA anwenden oder das Bild als CSS-Hintergrund hinzufügen. Unten findest du einige Beispiele dafür, wie du ein dekoratives Bild vor Nutzern verbergen kannst.
Leer oder null alt
Ein leeres alternatives Textattribut unterscheidet sich von einem fehlenden alternativen Textattribut. Wenn das alternative Textattribut fehlt, liest der AT möglicherweise den Dateinamen oder den umgebenden Inhalt vor, um dem Nutzer weitere Informationen zum Bild zu liefern.
Rolle auf presentation oder none festgelegt
Ist die Rolle auf presentation oder none festgelegt, wird die Semantik eines Elements nicht mehr in der Barrierefreiheitsstruktur angezeigt. Mit aria-hidden= "true" werden dagegen das gesamte Element und alle untergeordneten Elemente aus der Accessibility API entfernt.
<!-- 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">
Verwenden Sie aria-hidden mit Vorsicht, da dadurch Elemente ausgeblendet werden können, die nicht ausgeblendet werden sollen.
Bilder in CSS
Wenn Sie ein Hintergrundbild mit CSS hinzufügen, erkennt ein Screenreader die Bilddatei nicht. Stellen Sie sicher, dass das Bild ausgeblendet sein soll, bevor Sie diese Methode anwenden.
Informative Bilder
Ein informatives Bild ist ein Bild, das ein einfaches Konzept, eine Idee oder eine Emotion vermittelt. Dazu gehören Fotos von Objekten aus der realen Welt, wichtige Symbole, einfache Zeichnungen und Bilder von Text.
Wenn Ihr Bild informativ ist, sollten Sie einen programmatischen alternativen Text hinzufügen, der den Zweck des Bildes beschreibt. Alternative Bildbeschreibungen – oft abgekürzt als „Alt-Text“ – bieten AT-Nutzenden mehr Kontext zu einem Bild und helfen ihnen, die Botschaft oder den Zweck eines Bildes besser zu verstehen.
Für einfache alternative Beschreibungen mit <img>-Elementen wird das Attribut alt unabhängig vom Dateityp verwendet, auf den es verweist, z. B. .jpg, .png, .svg und andere.
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Wenn Sie <svg>-Elemente inline verwenden, müssen Sie jedoch auf die Barrierefreiheit achten.
Da SVGs semantisch codiert sind, werden sie von AT standardmäßig übersprungen.
Wenn Sie ein dekoratives Bild haben, ist das kein Problem – der AT ignoriert es wie beabsichtigt. Wenn Sie jedoch ein informatives Bild haben, muss dem Muster ein ARIA-role="img" hinzugefügt werden, damit das AT es als Bild erkennt.
Zweitens wird für <svg>-Elemente das alt-Attribut nicht verwendet. Daher müssen Sie stattdessen andere Codierungsmethoden verwenden, um den informativen Bildern alternative Beschreibungen hinzuzufügen.
<svg role="img"...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Funktionale Bilder
Ein funktionales Image ist mit einer Aktion verbunden. Ein Beispiel für ein funktionales Bild ist ein Logo, das mit der Startseite verknüpft ist, eine Lupe, die als Suchschaltfläche verwendet wird, oder ein Social-Media-Symbol, das Sie zu einer anderen Website oder App leitet.
Wie informative Bilder müssen auch funktionale Bilder eine alternative Beschreibung enthalten, die alle Nutzer über ihren Zweck informiert. Im Gegensatz zu einem informativen Bild muss jedes funktionale Bild die Aktion des Bildes beschreiben, nicht die visuellen Aspekte.
Im Logobeispiel ist das Bild sowohl informativ als auch handlungsorientiert, da es ein Bild ist, das Informationen vermittelt und als Link fungiert. In solchen Fällen können Sie jedem Element alternative Beschreibungen hinzufügen. Dies ist jedoch nicht erforderlich.
Eine Möglichkeit, alternativen Beschreibungen zu Bildern hinzuzufügen, sind visuell ausgeblendeten Text. Wenn Sie diese Methode verwenden, wird der Text von Screenreadern gelesen, da er sich im DOM befindet, aber mithilfe von benutzerdefiniertem CSS-Code visuell ausgeblendet wird.
Anhand des Code-Snippets sehen Sie, dass „Navigiere zur Startseite“ der Wrapper-Titel und der alternative Bildtext „Lovely Ladybugs for your Lawn“ ist. Wenn Sie sich den Logocode mit einem Screenreader anhören, hören Sie sowohl das visuelle Element als auch die Aktion in einem Bild.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
</a>
</div>
Komplexe Bilder
Ein komplexes Bild erfordert oft mehr Erklärungen als ein dekoratives, informatives oder funktionales Bild. Es erfordert sowohl eine kurze als auch eine lange alternative Beschreibung, um die vollständige Botschaft zu vermitteln. Komplexe Bilder umfassen Infografiken, Karten, Grafiken/Diagramme und komplexe Illustrationen. Wie bei den anderen Bildtypen gibt es verschiedene Methoden, mit denen Sie Ihren komplexen Bildern alternative Beschreibungen hinzufügen können.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Eine Möglichkeit, einem Bild eine zusätzliche Erklärung hinzuzufügen, besteht darin, auf eine Ressource zu verlinken oder einen Sprunglink zu einer längeren Erläuterung weiter unten auf der Seite bereitzustellen. Diese Methode ist nicht nur für AT-Nutzer eine gute Wahl, sondern hilft auch Menschen mit Beeinträchtigungen – wie kognitiven, Lern- und Leseschwächen –, die davon profitieren könnten, dass diese zusätzlichen Bildinformationen sofort auf dem Bildschirm verfügbar sind, anstatt im Code verborgen zu sein.
Sie können auch das Attribut aria-describedby an das Element <img> anhängen. Sie können das Bild programmatisch mit einer ID verknüpfen, die eine längere Beschreibung enthält. Diese Methode stellt eine starke Verknüpfung zwischen dem Bild und der vollständigen Beschreibung her. Die erweiterte Beschreibung kann auf dem Bildschirm angezeigt oder visuell ausgeblendet werden. Es empfiehlt sich jedoch, sie sichtbar zu lassen, um noch mehr Nutzer zu unterstützen.
Eine weitere Möglichkeit, kurze alternative Beschreibungen mit einer längeren zu gruppieren, besteht darin, die HTML5-Elemente <figure> und <figcaption> zu verwenden. Diese Elemente verhalten sich ähnlich wie aria-describedby, da sie Elemente semantisch gruppieren und so eine stärkere Assoziation zwischen dem Bild und seiner Beschreibung herstellen. Durch Hinzufügen von ARIA role="group" wird die Abwärtskompatibilität mit älteren Webbrowsern sichergestellt, die die native Semantik des <figure>-Elements nicht unterstützen.
Best Practices für Alternativtexte
Natürlich reicht es nicht aus, alternativen Text einzufügen. Der Text sollte auch aussagekräftig sein. Wenn auf Ihrem Bild beispielsweise ein Schwarm Marienkäfer zu sehen ist, die die Blätter Ihres Preisrosenstrauchs kauen, würden Sie mit dem alternativen Text „Käfer“ die volle Botschaft und den Zweck des Bildes vermitteln? Definitiv nicht.
Alternative Beschreibungen sollten so viele relevante visuelle Informationen wie möglich erfassen und prägnant sein. Die Anzahl der Zeichen, die ein Screenreader lesen kann, ist nicht begrenzt. Es wird jedoch empfohlen, den alternativen Text auf 150 Zeichen oder weniger zu begrenzen, damit der Leser nicht ermüdet. Wenn Sie dem Bild zusätzlichen Kontext hinzufügen möchten, können Sie eines der komplexen Bildmuster verwenden, Untertiteltext hinzufügen oder das Bild im Haupttext weiter beschreiben.
Weitere Best Practices für alternative Texte:
- Vermeiden Sie in der Beschreibung Wörter wie „Bild von“ oder „Foto von“, da der Screenreader diese Dateitypen für Sie erkennt.
- Die Benennung Ihrer Bilder sollte so einheitlich und genau wie möglich sein. Image-Namen sind ein Fallback, wenn der alternative Text fehlt oder ignoriert wird.
- Vermeiden Sie die Verwendung von nicht alphanumerischen Zeichen (z. B. #, 9 und &) und verwenden Sie Bindestriche zwischen Wörtern anstelle von Unterstrichen in den Bildnamen oder im alternativen Text.
- Verwenden Sie nach Möglichkeit die richtige Zeichensetzung. Andernfalls klingen die Bildbeschreibungen wie ein langer, endloser Satz.
- Alternativtexte wie ein Mensch und kein Roboter verfassen Von überflüssigen Keywords profitiert niemand. Personen, die Screenreader verwenden, sind genervt und Suchmaschinen-Algorithmen werden Sie benachteiligen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über ARIA und HTML
Wie können Sie komplexe Bilder zugänglich machen?
aria-describedby hinzu.