Barrierefreie Bilder scheinen auf den ersten Blick ein schnell abgehandeltes Thema zu sein: Sie fügen einem Bild einfach etwas Alt-Text hinzu und fertig. Das Thema ist jedoch komplexer, als manche denken. In diesem Abschnitt gehen wir auf Folgendes ein:
- Wie Sie den Code aktualisieren, um Bilder barrierefrei zu gestalten
- Welche Informationen Sie für Nutzer bereitstellen sollten und wo
- Weitere Möglichkeiten, Ihre Bilder zu verbessern, um Menschen mit Behinderungen zu unterstützen
Zweck und Kontext von Bildern
Bevor Sie auch nur eine Zeile Code schreiben, sollten Sie sich über den Zweck des Bildes, seinen Speicherort und seine Verwendung Gedanken machen. Wenn Sie sich diese Fragen stellen, können Sie besser entscheiden, wie Sie die Informationen am besten an eine Person weitergeben, die Hilfstechnologie (AT) verwendet, wie einen Screenreader.
Fragen, die Sie sich stellen können:
- Ist das Bild wichtig, um den Kontext der Funktion oder Seite zu verstehen?
- Welche Art von Informationen soll das Bild vermitteln?
- Ist das Bild einfach oder komplex?
- Löst das Bild Emotionen aus oder fordert es den Nutzer auf, etwas zu tun?
- Oder ist das Bild nur ein visueller Blickfang ohne wirklichen Zweck?
Ein visuelles Flussdiagramm wie ein Entscheidungsbaum für Bilder, kann Ihnen helfen, zu entscheiden, zu welcher Kategorie Ihr Bild gehört.
Sie können die Bilder auf Ihrer Website oder in Ihrer Webanwendung mit einer Browsererweiterung oder anderen Methoden ausblenden. Fragen Sie sich dann: „Verstehe ich den verbleibenden Inhalt?“ Wenn die Antwort „Ja“ lautet, handelt es sich höchstwahrscheinlich um ein dekoratives Bild. Andernfalls ist das Bild informativ und kontextuell notwendig. Sobald Sie den Zweck des Bildes ermittelt haben, können Sie die genaueste Methode zum Codieren dafür festlegen.
Dekorative Bilder
Ein dekoratives Bild ist ein visuelles Element, das keinen zusätzlichen Kontext oder keine zusätzlichen Informationen liefert, mit denen der Nutzer den Kontext besser verstehen kann. Dekorative Bilder sind ergänzend und dienen eher dem Stil als dem Inhalt.
Wenn Sie festlegen, dass ein Bild dekorativ ist, muss es für Hilfstechnologien programmatisch ausgeblendet werden. Wenn Sie ein Bild so programmieren, dass es ausgeblendet wird, signalisiert dies der Hilfstechnologie, 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, z. B. durch Verwendung einer leeren oder Null-Textalternative, Anwendung von ARIA oder Hinzufügen des Bildes als CSS-Hintergrund. Hier sind einige Beispiele dafür, wie Sie ein dekoratives Bild für Nutzer ausblenden.
Leeres oder Null-alt
Ein leeres oder Null-Alternativtextattribut unterscheidet sich von einem fehlenden Alternativtextattribut. Wenn das Alternativtextattribut fehlt, liest die Hilfstechnologie möglicherweise den Dateinamen oder den umgebenden Inhalt vor, um dem Nutzer weitere Informationen zum Bild zu geben.
Rolle auf presentation oder none festgelegt
Wenn die Rolle auf
presentation oder none
festgelegt ist, werden die semantischen Informationen eines Elements aus dem Barrierefreiheitsbaum entfernt.
Mit aria-hidden= "true"
wird das gesamte Element und alle seine untergeordneten Elemente aus der
Barrierefreiheits-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 Sie nicht ausblenden möchten.
Bilder in CSS
Wenn Sie mit CSS ein Hintergrundbild hinzufügen, kann ein Screenreader die Bilddatei nicht erkennen. Überlegen Sie sich gut, ob Sie das Bild ausblenden möchten, bevor Sie diese Methode anwenden.
Informative Bilder
Ein informatives Bild vermittelt ein Konzept, eine Idee oder eine Emotion. Zu den informativen Bildern gehören Fotos von realen Objekten, wichtige Symbole, einfache Zeichnungen und Bilder von Text.
Wenn Ihr Bild informativ ist, sollten Sie programmatischen Alternativtext hinzufügen, der den Zweck des Bildes beschreibt. Alternative Bildbeschreibungen, oft als „Alt-Text“ bezeichnet, geben Nutzern von Hilfstechnologien mehr Kontext zu einem Bild und helfen ihnen, die Botschaft oder Absicht eines Bildes besser zu verstehen.
Sie können alternativen Beschreibungen zu
<img> Elementen
hinzufügen, indem Sie das Attribut alt einfügen. Dies gilt für alle Dateitypen, einschließlich JPG, PNG oder SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Wenn Sie jedoch <svg> Elemente inline verwenden, müssen Sie besonders auf die Barrierefreiheit achten. SVGs sind semantisch codiert, daher werden sie von Hilfstechnologien standardmäßig übersprungen.
Wenn das SVG ein dekoratives Bild ist, ist das in Ordnung. Die Hilfstechnologie ignoriert es wie vorgesehen. Wenn Ihr SVG jedoch ein informatives Bild ist, fügen Sie dem Element die ARIA
role="img" hinzu, damit es von Hilfstechnologien als Bild erkannt wird.
Zweitens verwenden <svg>-Elemente nicht das Attribut alt. Daher müssen stattdessen
andere Codierungsmethoden verwendet werden, um Ihren 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 Bild ist mit einer Aktion verbunden. Ein Beispiel für ein funktionales Bild ist ein Logo, das mit der Startseite verlinkt ist, eine Lupe, die als Suchschaltfläche verwendet wird, oder ein Social-Media-Symbol, das Sie zu einer anderen Website oder App weiterleitet.
Wie informative Bilder müssen auch funktionale Bilder eine alternative Beschreibung enthalten, um alle Nutzer über ihren Zweck zu informieren. Im Gegensatz zu einem informativen Bild muss bei jedem funktionalen Bild die Bildaktion beschrieben werden, nicht die visuellen Aspekte.
Im Logo-Beispiel ist das Bild sowohl informativ als auch interaktiv, da es sowohl Informationen vermittelt als auch als Link fungiert. In solchen Fällen können Sie jedem Element alternative Beschreibungen hinzufügen. Das ist aber nicht erforderlich.
Eine Möglichkeit, Bildern alternative Beschreibungen hinzuzufügen, ist visuell ausgeblendeter Text. Bei dieser Methode wird der Text von Screenreadern gelesen, da er sich im DOM befindet. Er wird jedoch mit benutzerdefiniertem CSS visuell ausgeblendet.
Im Code-Snippet sehen Sie, dass „Zur Startseite navigieren“ der Titel des Wrappers ist und der alternative Text des Bildes „Lovely Ladybugs for your Lawn“ lautet. Wenn Sie sich den Logo-Code mit einem Screenreader anhören, hören Sie sowohl das visuelle Element als auch die Aktion, die in einem Bild vermittelt werden.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Komplexe Bilder
Ein komplexes Bild erfordert oft mehr Erklärung als ein dekoratives, informatives oder funktionales Bild. Es sind sowohl eine kurze als auch eine lange alternative Beschreibung erforderlich, um die vollständige Botschaft zu vermitteln. Zu den komplexen Bildern gehören 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 zusätzliche Erläuterungen hinzuzufügen, besteht darin, auf eine Ressource zu verlinken oder einen Sprunglink zu einer längeren Erklärung weiter unten auf der Seite zu erstellen. Diese Methode ist nicht nur für Nutzer von Hilfstechnologien eine gute Wahl, sondern hilft auch Menschen mit Behinderungen wie kognitiven, Lern- und Leseschwierigkeiten, die davon profitieren können, wenn diese zusätzlichen Bildinformationen auf dem Bildschirm verfügbar sind, anstatt im Code versteckt zu sein.
Eine weitere Methode besteht darin, dem
<img> Element das aria-describedby Attribut anzuhängen. Sie können das Bild programmatisch mit einer ID verknüpfen, die eine längere Beschreibung enthält. Mit dieser Methode wird eine starke Verbindung zwischen dem Bild und der vollständigen Beschreibung hergestellt. Die erweiterte Beschreibung kann auf dem Bildschirm angezeigt oder visuell ausgeblendet werden. Sie sollten sie jedoch sichtbar lassen, um noch mehr Nutzer zu unterstützen.
Eine weitere Möglichkeit, kurze alternative Beschreibungen mit einer längeren zu gruppieren, ist die
Verwendung der<figure> und <figcaption> Elemente. Diese Elemente funktionieren ähnlich wie aria-describedby, da sie Elemente semantisch gruppieren und so eine stärkere Verbindung zwischen dem Bild und seiner Beschreibung herstellen.
Durch Hinzufügen von ARIA role="group" wird die Abwärtskompatibilität mit älteren Web
browsern gewährleistet, die die Semantik des <figure> Elements nicht unterstützen.
Best Practices für Alternativtext
Natürlich reicht es nicht aus, alternativen Text hinzuzufügen. Der Text sollte auch aussagekräftig sein. Wenn Ihr Bild beispielsweise einen Schwarm Marienkäfer zeigt, die die Blätter Ihres Rosenbuschs fressen, aber Ihr Alternativtext „Käfer“ lautet, wird dann die vollständige Botschaft und Absicht des Bildes vermittelt? Definitiv nicht.
Alternative Beschreibungen müssen so viele relevante visuelle Informationen wie möglich enthalten und prägnant sein. Es gibt zwar keine Begrenzung für die Anzahl der Zeichen, die ein Screenreader lesen kann, aber es wird in der Regel empfohlen, den Alternativtext auf maximal 150 Zeichen zu beschränken, um die Nutzer nicht zu überfordern. Wenn Sie dem Bild zusätzlichen Kontext hinzufügen müssen, können Sie eines der komplexen Bildmuster verwenden, einen Bildunterschrifttext hinzufügen oder das Bild im Haupttext weiter beschreiben.
Einige weitere Best Practices für Alternativtext beinhalten:
- Verwenden Sie in der Beschreibung keine Wörter wie „Bild von“ oder „Foto von“, da der Screenreader diese Dateitypen für Sie identifiziert.
- Achten Sie beim Benennen Ihrer Bilder auf Konsistenz und Genauigkeit. Bildnamen sind ein Fallback, wenn der Alternativtext fehlt oder ignoriert wird.
- Verwenden Sie in Ihren Bildnamen oder im Alternativtext keine Zeichen, die keine Buchstaben sind (z. B. #, 9, &), und verwenden Sie zwischen Wörtern Bindestriche anstelle von Unterstrichen.
- Verwenden Sie nach Möglichkeit die richtige Interpunktion. Andernfalls klingen die Bildbeschreibungen wie ein langer, endloser Satz.
- Schreiben Sie Alternativtext wie ein Mensch und nicht wie ein Roboter. Überflüssige Keywords bringen niemandem etwas. Nutzer von Screenreadern werden sich ärgern und Suchmaschinenalgorithmen werden Sie abstrafen.