Eine barrierefreie Fotogalerie erstellen ist ein Praxisprojekt für Lernende mit HTML-, CSS- und JavaScript-Grundkenntnissen, die daraus ein vollständiges Nutzungserlebnis entwickeln möchten. Du erstellst eine lokale Fotoausstellung, in der Vorschaubilder, große Bilder, Titel und Beschreibungen beim Durchblättern richtig zugeordnet bleiben.
Die Guided Labs entwickeln das Galerielayout und die Detailansicht Schritt für Schritt. In einer eigenständigen Challenge überträgst du dieselben Techniken auf eine andere Ausstellung mit gleichnamigen Fotos, langen Titeln und unterschiedlichen Bildformaten. Jedes Lab beginnt mit eigenen vorbereiteten Dateien.
Was du lernen wirst
Nach Abschluss des Kurses kannst du:
- jede stabile Foto-ID mit dem richtigen Vorschaubild, großen Bild, Alternativtext und der passenden Bildunterschrift verknüpfen;
- eine responsive Galerie mit semantischem HTML und sichtbarem Tastaturfokus erstellen;
- das native Element
dialogzum Anzeigen eines Fotos verwenden und Bild, Titel und Beschreibung beim Navigieren gemeinsam aktualisieren; - die Navigationsgrenzen beim ersten und letzten Foto deutlich machen, die Detailansicht mit
Escschließen und den Fokus an die ursprüngliche Karte zurückgeben; - einen verständlichen Hinweis bei einem Ladefehler anzeigen, ohne heimlich ein anderes Foto einzusetzen, und einen falschen Dateipfad korrigieren.
Für wen dieser Kurs geeignet ist
Der Kurs richtet sich an Lernende, die einzelne Webübungen zu einer nutzbaren Fotoausstellung verbinden möchten.
Voraussetzungen: Du kennst HTML-Elemente, einfache CSS-Layouts sowie JavaScript-Objekte, Funktionen, DOM-Manipulation und Ereignisse. Du kannst Projektdateien öffnen und speichern. Die Guided Labs erklären die galeriebespezifische Semantik, das Verhalten nativer Dialoge und die Fokussteuerung. React wird nicht vorausgesetzt.
Lernumgebung: LabEx stellt die vorbereiteten Einträge WebIDE, Terminal und Gallery sowie lokale Bilder bereit. In WebIDE liest du vorhandenes HTML, CSS und JavaScript, sagst das Verhalten voraus und speicherst gezielte Änderungen. In Gallery beobachtest du die echte Website und testest die Tastaturbedienung. Die Beschriftungen der Galerie bleiben auf Englisch.
Häufig gestellte Fragen
Schreibe ich den Galeriecode selbst?
Ja. Du vervollständigst Layout und Browserverhalten im vorbereiteten Projekt und nutzt die fertige Galerie anschließend mit Maus und Tastatur.
Muss ich Fotos hochladen oder ein Framework installieren?
Nein. Die lokalen Bilder und die Lernumgebung sind vorbereitet. Das Projekt verwendet HTML, CSS und JavaScript im Browser, ohne React oder einen Dienst zum Hochladen von Bildern.
Bescheinigt der Kurs die Barrierefreiheit?
Nein. Du übst bestimmte Verhaltensweisen für Bilder, Tastatur und Fokus. Eine vollständige Prüfung der Barrierefreiheit umfasst mehr als diese Übungen.
