Struktur einer Webseite

Feli

Lektion Fortschritt

0% Beendet

Logische Hierarchien aufbauen

Überlege dir: Was ist das Wichtigste auf der Seite?
Ordne hierbei deine Inhalte am besten von allgemeinen zu spezifischen Informationen.
Nutze Überschriften in richtiger Reihenfolge.

<h1> = Hauptüberschrift, welche einmal pro Seite auftaucht

<h2> = Hauptabschnitte

<h3> = Unterpunkte darunter
Wichtig: Lass keine Ebenen aus. Das heißt kein Sprung von <h1> zu <h4>.

Screenshot zur Umwandlung eines normalen Textblocks in eine Überschrift — Umwandlung eines Textblocks in eine Überschrift

Screenshot zur Auswahl der richtigen Größe der Überschrift — Auswahl der gewünschten Überschriftengröße

💡 Tipp: Screenreader-Nutzer springen oft gezielt zu Überschriften – die Reihenfolge muss Sinn ergeben!

Strukturiere Inhalte in klar erkennbaren Bereiche

Trenne Inhalte visuell und technisch:

Kopfbereich (Header, Logo, Navigation)
Hauptinhalt (z. B. Text, Kurs, Blog)
Seitenleiste (optional)
Fußbereich (Kontakt, Impressum, Social Media)

Hinweis: Das Design eurer Spreadmind Plattform ist bereits so aufgesetzt, dass sich der Header und Footer Bereich visuell vom Inhalt abgrenzt. Auch die Sidebar, sollte eine vorhanden sein, ist bereits ein erkennbar eigener Bereich. Diese Bereiche sind bereits mit der Tastatur bedienbar.

Navigation klar und einheitlich gestalten

Das Menü sollte auf allen Seiten gleich aufgebaut sein.
Position, Bezeichnung und Reihenfolge der Menüpunkte beibehalten.
Verwende sprechende Linktexte, z. B.:
– “Mehr erfahren über barrierefreies Design”
statt
– “Hier klicken”

Hinweis: Für Buttontexte gilt übrigens dasselbe!

Denke in Abschnitten

Lange Texte in übersichtliche Absätze gliedern
Nutze auch gerne:

Zwischenüberschriften
Aufzählungen
Trennlinien
Icons oder visuelle Marker (diese aber sparsam & sinnvoll)

Rechne mit der Notwendigkeit der Tastaturverwendung

Teste: Kann ich die Seite nur mit der Tab-Taste bedienen?
Fokus-Reihenfolge muss der visuellen Struktur folgen.
Aktive Elemente (Links, Buttons, Formulare) sollten klar erkennbar und erreichbar sein.

💡 Tipp: Kennst du das Tool wave? Nutze es! Es wird dir so vieles auf einen Blick aufzeigen.

Screenshot: Beispielbild wie das Tool wave auf der eigenen Plattform verwendet werden kann — Beispielbild wie das Tool “wave” auf der eigenen Plattform verwendet werden kann

📌 Fazit:

Eine klare Seitenstruktur ist die Basis für Barrierefreiheit.
Sie hilft nicht nur Menschen mit Behinderung – sondern sorgt dafür, dass deine Inhalte einfacher, schneller und besser verstanden werden.

Themenkurs: Barrierefreiheit