Barrierefreie Grafiken

Was Sie tun müssen

1. Klappen Sie die erweiterten Bildinformationen einer Grafik auf, indem Sie auf den Bildnamen oder das Pfeil-Icon klicken.

   • Die Bild-Metadaten der Grafik werden eingeblendet. (Standardmäßig werden die Eingabefelder "Titel", "Alternativer Text" und "Beschreibung" leer und deaktiviert dargestellt)

2. Entscheiden Sie, ob es sich bei Ihrem Bild um eine Darstellung handelt, die zum Verständnis des Textes beiträgt, oder ob es sich um eine reine Schmuckgrafik handelt.

   • Entscheidungshilfe:

     Inhaltlich relevante Bilder nehmen Bezug auf den erklärenden Text und verdeutlichen die dort getroffenen Aussagen. Es handelt sich auch um keine Schmuckgrafiken, wenn die Bilder  neue Informationen, die im Text nicht erwähnt werden, beinhalten. 
     Schmuckgrafiken besitzen keine inhaltliche Relevanz, sie dienen zur Verschönerung, oder Auflockerung des Gesamteindrucks. Sie liefern keinerlei weiterführende Informationen für sehbehinderte Menschen und benötigen aus diesem Grund keinen Alternativtext.

   • Besitzt Ihre Grafik inhaltliche Relevanz, so müssen Sie einen Alternativtext hinterlegen.

   • Handelt es sich um eine Schmuckgrafik, so sollten Sie sie als solche kennzeichnen, indem Sie den Alternativtext unterdrücken.

3. Aktivieren Sie das Eingabefeld "Alternativer Text", in dem Sie die Checkbox "Elementspezifischen Wert setzen" aktivieren und schreiben Sie dann in das freigegebene Eingabefeld einen kurzen bildbeschreibenden Text.

   • Der Alternativtext beschreibt kurz den inhaltlichen Konsens, also die Kernaussage, die mit der Grafik vermittelt werden soll. 

   • Die maximale Länge des alternativen Texts beträgt 80 Zeichen.

   • Hinweis: Der Alternativtext sollte am besten den inhaltlichen Zweck einer verwendeten Grafik erläutern. Wenn die maximale Zeichenanzahl dadurch aber überschritten und der Alternativtext nicht ausreichend gekürzt werden kann, so sollten die Inhalte im umstehenden Text aufgegriffen und genauer erläutert werden. In diesem Fall wird dann in dem Alternativtext nur kurz die Inhalte auf der Grafik optisch beschrieben.

   • Beispiele (betrachten Sie dazu Abb. 3.2):

     Beschreibender Alternativtext (besitzt weniger Aussagekraft): "Zwei Studierende schauen in einen Monitor, hinter ihnen stehen Bücherregale"

     Alternativtext mit inhaltlichem Zusammenhang (besitzt mehr Aussagekraft): "Zwei Studierende betreiben Literaturrecherche in der Schwenninger HFU Bibliothek."

   • 3.1

     

   • 3.2

     

4. Hintergrundinformation Bild-Metadaten

   *_{Wichtig im Zusammenhang mit dem Thema "Barrierefreiheit"}

   • Eingabefeld "Titel": wird im Frontend bei Mausover der Grafik ausgegeben. (Der Titel ist im Frontend nur sichtbar, wenn er in Kombination mit der Beschreibung aktiviert wurde)

   • Eingabefeld "Alternativer Text": wird im Quelltext der Grafik hinterlegt und kann von Screenreadern und Suchmaschinen ausgelesen werden.*

   • Eingabefeld "Link": kann dazu benutzt werden die Grafik zu verlinken.

   • Eingabefeld "Beschreibung (Bildunterschrift)": wird im Frontend bei Mausover der Grafik ausgegeben. (Die Beschreibung wird nur sichtbar, wenn sie in Kombination mit dem Titel aktiviert wurde)

   • "Bildbearbeitung": mit Klick auf die Schaltfläche "Editor öffnen" kann ein Ausschnitt des Bildmaterials ausgewählt werden, die dann später im Frontend ausgegeben wird.

   • "Alternativtext dieses Bildes ausblenden": mit Aktivierung wird die Ausgabe des Alternativtextes unterdrückt.*

   • 4.1

     

Probleme oder Fragen?