Content-Bilder müssen im Kontext der Webseite relevant sein und sie inhaltlich anreichern.

Relevante Bilder im Contentbereich erhöhen den informativen Wert von Webseiten. Alternativtexte solcher Bilder helfen, den Inhalt des Bildmaterials und seinen Zusammenhang mit dem Inhalt der Webseite zu verstehen und machen Bilder barrierefrei für blinde und sehbehinderte Nutzer*innen.

Beispiele:

• campus.leben-Artikel Unterwegs mit der "Sonne"

  Bilder im Artikel zeigen das Forschungsschiff "Sonne", Mitglieder des Forschungsteams, Messinstrumente und einen Blick über den Pazifik vom Deck. Bilder wurden von Mitgliedern des Forschungsteams während der Fahrt aufgenommen und sind im Kontext des Artikels besonders informativ. Durch passende Bildbeschreibungen und den Text des Artikels versteht man, was genau abgebildet ist.

• campus.leben-Artikel Wissen frei zugänglich machen

  Das Stockfoto eines offenen Vorhängeschlosses ist im Kontext des Artikels über Open Access symbolisch und dekorativ, jedoch nicht informativ. Eine Bildunterschrift, die das eigentliche Bildmotiv beschreiben würde, wäre nicht hilfreich, um den Text besser zu verstehen. Ebenso hilft der Text des Artikels nicht, den Inhalt des Bildes zu interpretieren.

• campus.leben-Artikel Von Bienen lernen

  Die Nahaufnahme einer Honigbiene ist im Kontext des Artikels über Bienenforschung angemessen. Die Honigbiene auf dem Stockfoto repräsentiert ihre Art. Ein Bildtitel sollte auch hier dem eigentlichen Bildmotiv entsprechen.

Content-Bilder brauchen Alternativtexte, die ihren Inhalt im Kontext der Webseite prägnant beschreiben.

Alternativtexte werden durch die assistierende Technik lesbar dargestellt (Vergrößerungssoftware, Brille, Lupe), vorgelesen (Screenreader) oder in Brailleschrift umgewandelt (Braillezeile) und sind das wichtigste Mittel, um den blinden und sehbehinderten Menschen einen Zugang zum Bildinhalt zu ermöglichen. Mit Hilfe von Alternativtexten können Menschen mit eingeschränktem Sehvermögen die visuelle Information ergänzen und besser interpretieren.

Alternativtexte machen Bildinhalte allgemein zugänglicher, helfen zu verstehen, was abgebildet ist, und welche Bedeutung Bilder im Kontext einer Webseite haben. Sie machen Bildinhalte außerdem erschließbar für Suchmaschinen und Online-Übersetzer und werden in Browsern bei deaktivierter Bildanzeige anstelle der Bilder angezeigt.

Alternativtexte für Content-Bilder im CMS kann man als Bildunterschrift (Bildtitel) oder ausführliche Beschreibung im Text der Webseite eingeben.

Ist ein Bild im Kontext der Webseite relevant, lässt sich ein guter Alternativtext leicht formulieren:

• Was genau ist auf dem Bild? Welche neue, interessante, wichtige Information liefert es, und zwar im Kontext der Webseite?
• Wie lässt sich die Bildbeschreibung speziell für blinde, taubblinde, sehbehinderte, farbblinde Menschen verständlicher machen?

Beispiele von barrierefreien Bildern:

• campus.leben-Artikel Post aus...

  Alternativtexte liefern genau die richtige Information, um den Inhalt der Bilder im Kontext des Artikels zu verstehen.

• campus.leben-Artikel „Mit offenem Verstand und Herzen mit Büchern kommunizieren“

  Der Alternativtext des ersten Bildes beschreibt den Bildinhalt mit angemessener Genauigkeit und macht das Bild barrierefrei. Für Screenreader wäre er ohne Abkürzungen noch besser.

• campus.leben-Artikel Keine Angst vor dem Mysterium

  Der Alternativtext des zweiten Bildes beschreibt den Bildinhalt prägnant und macht es barrierefrei. Der Kontext lässt darauf schließen, um welche Wissenschaftlerin es sich handelt, was sie erklärt, und wo sich das Auditorium befindet.

Häufige Fälle von nicht-barrierefreien Bildern:

• Inhaltlich relevante Bilder ohne Alternativtext oder mit einem ungenügenden Alternativtext. Content-Bilder sind i.d.R. nicht selbstklärend und benötigen eine Beschreibung.

• Inhaltlich relevante Bilder mit Alternativtexten, die das Bildmotiv ohne Bezug auf den Kontext beschreiben, z.B. "Eine lächelnde Frau am Rednerpult" statt "Prof. X hält den Festvortrag bei der feierlichen Eröffnung des Excellenzclusters."

• Bilder, die komplexe Inhalte oder Prozesse darstellen, ohne eine adäquate Textalternative. 

• Eingescannte Dokumente ohne einen äquivalenten digitalen Text.

• Dekorative Bilder z.B. Stockfotos mit Bildunterschriften, die über den eigentlichen Inhalt der Bilder hinausgehen.

• Grundsätzlich alle Bilder mit Alternativtexten, die dem Bildinhalt nicht entsprechen. Man muss sich anhand der Beschreibung das Bildmotiv vorstellen können.

• Redundante ausführliche Alternativtexte in der Bildunterschrift und im Text

Eingabe des Alternativtextes im CMS

• In der Vorlage "Bild":
  Der im Feld "Titel" der Vorlage "Bild" eingepflegte Alternativtext wird in den meisten Vorlagen, die das Bild einbinden, als sichtbare Bildunterschrift ausgegeben (z.B. in Standard-, Institutions-, Content-, Artikel-Ordnern, News oder Publikationen). In Spezialvorlagen, die keine Bildunterschrift anzeigen, werden Bildtitel als unsichtbare Alternativtexte im Markup der Seite und evtl. zusätzlich als sichtbarer Text bei Bildvergrößerung oder in Layern ausgegeben (z.B. auf Mitarbeiter*innen-Seiten, in Text-Boxen, Teaserlisten, Karussells).

• Bei der Einbindung von Bildern in Vorlagen:
  Der Titel des Bildes lässt sich bei der Einbindung des Bildes in die Webseite anpassen. Damit kann man ein Bild, das in verschiedenen Kontexten verwendet wird, für den jeweiligen Kontext genau beschreiben. Z.B. wenn ein und dasselbe Bild in verschiedenen Sprachversionen einer Webseite benutzt wird.
  Bilder werden i.d.R. im Feld "Bilder" der jeweiligen Vorlage verlinkt. Bei Verlinkung des Bildes kann man im Dialogfenster "Bild bearbeiten" das Feld "Titel" ausfüllen.

• Ausführliche Beschreibung:
  Ausführlicher Alternativtext kann im Hauptinhalt der Webseite oder auf einer extra Seite eingepflegt werden.
  In Bildergalerien mit Miniaturbildern untereinander kann man längere Alternativtexte im Feld "Zusammenfassung" der Vorlage "Bild" eingeben.

• Im CMS-Editor eingepflegte Bilder:
  Es ist nicht empfehlenswert, Bilder über den CMS-Editor in den Hauptinhalt oder die Zusammenfassung einzubinden. Solche Bilder sind nicht responsiv, nicht textumflossen, problematisch für CMS-Updates, haben keine Lizenzangaben, und die assistierende Technik erkennt keinen Zusammenhang zwischen dem Bild und der Bildunterschrift. Bitte nutzen Sie für die Einbindung von Bildern das Feld "Bilder" in den CMS-Vorlagen.

Verlinkte Bilder brauchen Alternativtexte, die ihre Funktion bzw. das Linkziel prägnant beschreiben.

Im Alternativtext eines verlinkten Bildes wird das Linkziel möglichst genau angegeben. Der Alternativtext ist wichtig für die Bedienung der Webseite mit assistierender Technik für Blinde und Sehbehinderte und wird anstelle des Bildes als Linktitel vorgelesen. Der eigentliche Inhalt des Bildes braucht keine Beschreibung und ist überflüssig. Der Kontext des Bildes kann eine Rolle spielen.

Beispiel:

• Partnerlogos in der Fußzeile der Website www.bcp.fu-berlin.de

  Jedes Logo verweist auf die Startseite der jeweiligen Institution. Als Alternativtext ist der vollständige Name der Institution einzugeben, z.B. "Helmholtz-Zentrum Berlin für Materialien und Energie".
  Nicht angemessen wären Alternativtexte wie "Das Logo des Helmholtz-Zentrums Berlin" (beschreibt nicht das Linkziel) oder "http://www.hmi.de/" (keine verständliche Angabe des Linkziels). Überflüssig wäre z.B. "Zur Startseite des Helmholtz-Zentrums Berlin für Materialien und Energie".

Eingabe des Alternativtextes im CMS

• In der Vorlage Banner-Bild:

  • Wenn das Banner-Bild auf eine Webseite im CMS verweist (z.B. /fu-berlin/studium), wird der Titel der verlinkten Webseite automatisch als Alternativtext ausgegeben.

  • Wenn das Banner-Bild auf eine externe Webseite verweist (z.B. https://www.fu-berlin.de/studium), wird der Titel des Banner-Bildes als Alternativtext ausgegeben.

  Einen abweichenden Alternativtext kann man in den beiden Fällen in der Vorlage "Banne-Bild" im Feld "Link für Banner" als "Titel" im Dialogfenster "Link für Banner bearbeiten" einpflegen.

• Im CMS-Editor:
  Es ist nicht empfehlenswert, Bilder über den CMS-Editor einzubinden und zu verlinken. Solche Bilder sind nicht responsiv und problematisch für CMS-Updates. Bitte verlinken Sie stattdessen Banner-Bilder im Feld "Bilder" der CMS-Vorlagen.

Alternativtexte beschreiben den Inhalt der Bilder im Kontext der Webseite bzw. ihre Funktion und machen Bilder nicht nur barrierefrei für Menschen mit Sehbehinderungen, sondern auch allgemein zugänglich für Menschen und Technik.

Rein dekorative Bilder, die weder informativ sind, noch eine Funktion haben, sind allerdings dann barrierefrei, wenn sie keinen Alternativtext haben und somit von der assistierenden Technik für Blinde und Sehbehinderte ausgelassen werden können.

Im CMS sind Schmuckbilder problematisch. CMS unterscheidet sie nicht von Content-Bildern und gibt ihren Titel als Alternativtext aus.

Auch Teaserbilder in Aufmacherlisten, Karussells, Textboxen haben einen Titel, der als Alternativtext dient. Teaserbilder können sowohl informativ als auch rein dekorativ sein. Anders als Content-Bilder haben sie nur wenig Kontext und ihr Bezug auf den Kontext ist abstrakter. Anders als verlinkte Bilder können Teaser gleich auf mehrere Webseiten verweisen. Welche Bildtitel wären für Teaserbilder angemessen? In jedem Fall kurze. Für informative Bilder: wer oder was ist abgebildet. Für dekorative Bilder: mit einem Hinweis, dass es sich um ein Symbolbild handelt. Da Teaserbilder oft eine visuelle und thematische Reihe bilden, können ihre Alternativtexte auch zueinander passend formuliert werden.

Bilder in Aufmacherboxen sind Teil einer Schaltfläche, deren Alternativtext der Titel der verlinkten Webseite ist.

Gute Bildqualität ermöglicht es, Menschen mit Sehbehinderungen und nachlassendem Sehvermögen, Bilder wahrzunehmen.

Das CMS unterstützt Bilder bis zu 8 MB und berechnet die passende Bildgröße abhängig von

• der Vorlage, die das Bild einbindet, und
• dem Endgerät, auf dem das Bild angezeigt wird. Einige Displays (Retina, 4K, ...) zeigen Bilder in vielfach höherer Auflösung an.

Die Vorschau der Content-Bilder im CMS bietet eine bessere Unterstützung für große, detailreiche Bilder auf allen Endgeräten.

Mit assistierender Software z.B. einer Bildschirm-Lupe kann man Bilder weiter vergrößern.

Information darf nicht allein durch Farben vermittelt werden.

Denn farbblinden Menschen würde eine solche Information entgehen. Falls Farben bedeutungstragend sind, brauchen sie eine Textalternative. Die Textalternative für Farben verhindert den Informationsverlust auf verschiedenen Monitoren oder z.B. bei schwarzweißem Druck und ist hilfreich für alle Nutzer*innen.

Beispiel:

• Ein Kreisdiagramm muss auch ohne Farben verständlich sein.