Medien
Bilder, Audio, Video und Grafiken holen andere Inhalte in deine Seite. Entscheidend sind Alternativen, klare Beschriftungen und passende Formate.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Bilder und Beschriftungen
img bindet Bilder ein und braucht immer ein hilfreiches alt-Attribut.
figure und figcaption verbinden Bild und sichtbare Bildunterschrift.
<figure>
<img src="team.jpg" alt="Vier Personen planen am Whiteboard" width="800" height="533">
<figcaption>Das Team beim Planen der nächsten Lektion.</figcaption>
</figure>Audio, Video und Grafik
video und audio sollten controls bekommen, damit Nutzer die Wiedergabe steuern können.
svg eignet sich für skalierbare Grafiken. canvas ist eine Zeichenfläche für JavaScript.
<video controls width="640">
<source src="kurs.mp4" type="video/mp4">
<track kind="captions" src="kurs-de.vtt" srclang="de" label="Deutsch" default>
Dein Browser kann dieses Video nicht abspielen.
</video>Medien barrierefrei einbinden
Alternativtexte, Untertitel und Steuerelemente machen Medien nutzbar.
Ein Video ohne Untertitel schließt Menschen mit Hörbeeinträchtigung aus.
Bei dekorativen Bildern ist alt="" richtig. Eingebettete Seiten brauchen im iframe einen title, der den Inhalt beschreibt.
<iframe src="https://example.com/vortrag"
title="Videovortrag zu HTML-Grundlagen"
loading="lazy"></iframe>Vertiefung
Medien brauchen Kontext und Fallbacks
Ein Bild ohne sinnvolles alt ist für Screenreader unsichtbar oder nutzlos. Dekorative Bilder bekommen ein leeres alt=""; informative Bilder beschreiben den Inhalt, nicht das Dateiformat.
figure und figcaption verbinden Medien mit einer sichtbaren Erklärung. Für unterschiedliche Bildgrößen nutzt du picture und source; Videos brauchen controls und möglichst Untertitel.
<figure>
<picture>
<source media="(min-width: 800px)" srcset="gross.avif">
<img src="klein.avif" alt="Sonnenaufgang über den Bergen" loading="lazy">
</picture>
<figcaption>Blick vom Gipfel am Morgen.</figcaption>
</figure>Merksatz: Alt-Text beschreibt den Zweck des Bildes. figure, figcaption und loading machen Medien verständlicher und schneller.
Übungsaufgabe
Bildergalerie mit Fallback
Erstelle eine Galerie mit einem responsiven Bild, einer Bildunterschrift und einem Video mit Steuerung und Untertitelspur.
Das soll dein Programm können
- figure mit img und figcaption
- Aussagekräftiges alt-Attribut
- loading="lazy"
- video mit controls und track
- Ein dekoratives Element mit alt=""
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die track braucht kind="subtitles", src, srclang="de" und label. Ein Video ohne controls ist für viele Nutzer nicht bedienbar.
Lösung anzeigen
<section aria-labelledby="galerie">
<h2 id="galerie">Galerie</h2>
<figure>
<img src="berge.avif" alt="Sonnenaufgang über den Bergen" loading="lazy" width="800" height="450">
<figcaption>Blick vom Gipfel am Morgen.</figcaption>
</figure>
<video controls width="640" poster="video-cover.avif">
<source src="rundgang.webm" type="video/webm">
<track kind="subtitles" src="untertitel-de.vtt" srclang="de" label="Deutsch" default>
Dein Browser kann dieses Video nicht abspielen.
</video>
<img src="trenner.svg" alt="" role="presentation">
</section>Warum funktioniert das?
width und height reservieren Platz und verhindern Layout-Sprünge. Die track macht das Video zugänglicher; der Fallback-Text erscheint nur, wenn das Video nicht unterstützt wird.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Barrierefreie Rezeptseite
Baue eine Rezeptseite mit Navigation, Bild, Zutatenliste und Formular für Kommentare. Prüfe die Seite anschließend nur mit Tastatur und einem Screenreader.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.