Bilder/Grafiken in der Website

1. Geben Sie einen Alternativtext an: Alternativtext ist eine Beschreibung eines Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder wenn der Benutzer einen Screenreader verwendet. Er sollte den Inhalt und den Zweck des Bildes genau beschreiben.

                               
                                   <img src="image.jpg" alt="Description of the image">
                               
                           

2. Vermeiden Sie die Verwendung von Text in Bildern: Vermeiden Sie nach Möglichkeit die Verwendung von Text in Bildern, da dieser Text möglicherweise nicht von Screenreadern gelesen werden kann. Wenn Sie Text in einem Bild verwenden müssen, stellen Sie sicher, dass Sie diese Informationen in den Alt-Text aufnehmen.
3. Geeignete Bildformate verwenden: Die Wahl des richtigen Bildformats kann die Leistung und Zugänglichkeit Ihrer Website verbessern. Verwenden Sie zum Beispiel JPEG für komplexe Bilder wie Fotos und PNG oder SVG für einfache Bilder und Symbole.
4. Achten Sie auf einen ausreichenden Farbkontrast: Wenn ein Bild Text oder wichtige Informationen enthält, muss es einen ausreichenden Farbkontrast aufweisen, damit es auch von farbenblinden oder sehbehinderten Benutzern gesehen werden kann.

Weitere Informationen finden Sie unter BITV 9.1.1.1c, BITV 9.1.1.1a, BITV 9.1.1.1b.

Hier sind Links für Einführungen in Bilder in HTML und HTML-Image-Element.

Erstellung barrierefreier Inhalte in Opal.

Speichern Sie alternativen Text im Tiny MCE-Texteditor

Dateigröße

• Für Fotos ist das JPEG-Format zu bevorzugen und je nach Bildinhalt sollte eine mittlere bis hohe Qualität gewählt werden.
• Die Bilder sollten eine Dateigröße von 100-200kB nicht überschreiten.
• Speichern Sie die Bilder direkt in der gewünschten Bildgröße (Breite x Höhe) mit einer Auflösung von 72 dpi.
• Für sehr große Dateien, z.B. Videos, empfehlen wir die Nutzung eines externen Tools (z.B. Videocampus Sachsen, YouTube, Vimeo, etc.).

Hier ist ein Link für eine Einführung in Erstellung barrierefreier Inhalte in Opal.

Lernmodul HTML in Ilias

Hier ist ein Link für eine Einführung in Lernmodul HTML in Ilias.

Alternativtext zu Bildern hinzufügen

Alt-Text hilft Menschen, die den Bildschirm nicht sehen können, zu verstehen, was in visuellen Inhalten von Bedeutung ist. Zu den visuellen Inhalten gehören Bilder, SmartArt-Grafiken, Formen, Gruppen, Diagramme, eingebettete Objekte, Tinte und Videos. Beschreiben Sie im Alt-Text kurz das Bild und erwähnen Sie seinen Zweck. Screenreader lesen den Text, um das Bild für Benutzer zu beschreiben, die das Bild nicht sehen können.

Vermeiden Sie es, Text in Bildern als einzige Methode zur Vermittlung wichtiger Informationen zu verwenden. Wenn Sie ein Bild mit Text verwenden müssen, wiederholen Sie diesen Text im Dokument. Beschreiben Sie im Alt-Text kurz das Bild und erwähnen Sie das Vorhandensein des Textes und dessen Zweck.

1. Führen Sie einen der folgenden Schritte aus:
   - Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie Alt-Text bearbeiten.
   
   - Wählen Sie das Objekt aus und wählen Sie dann das Formatmenü für das Objekt, z. B. Bildformat. Wählen Sie Alt-Text.
   
2. Geben Sie im Bereich Alt-Text 1-2 Sätze in das Textfeld ein, um das Objekt und seinen Kontext für jemanden zu beschreiben, der es nicht sehen kann.
   

Hier ist ein Link für eine Einführung in Hinzufügen von Alternativtext zu einer Form, einem Bild, einem Diagramm, einer SmartArt-Grafik oder einem anderen Objekt

Hier ist der Referenzstandard: WCAG 1.1.1