Gut gestaltet und für alle nutzbar

IT 11.7 – Webdesign · Einheit 6 · Café-Projekt Schritt 6

Lernziele

Du kannst Designgrundsätze nennen und eine Seite danach beurteilen.
Du kannst Merkmale von Benutzungsfreundlichkeit beschreiben.
Du kannst erklären, was Barrierefreiheit bedeutet, wer davon profitiert, und Maßnahmen den vier Prinzipien zuordnen.
Du kannst Kontraste prüfen und eine Seite mit der Tastatur testen.

Rückblick

1. Wie zentriert man einen Bereich mit begrenzter Breite?

Mit max-width und margin: 0 auto.

2. Woran schreibt man display: flex, damit Listeneinträge nebeneinander stehen?

An den Behälter, also die ul, nicht an die li oder die Links.

3. Was gehört in einen guten Alternativtext?

Kurz, was auf dem Bild an dieser Stelle wichtig ist. Reine Verzierung bekommt alt="".

„Sieht doch gut aus!“

Ein Mitschüler hat eine Seite für den Schulflohmarkt gebaut und ist stolz darauf: hellgraue Schrift, alles mittig, viele Farben, ein Link „hier“ und ein Formular ganz ohne Beschriftungen, „weil man ja sieht, was reingehört“.

Seine Oma kann die graue Schrift kaum lesen. Ein Mitschüler, der blind ist und sich Seiten vorlesen lässt, findet das Anmeldeformular nicht. Und wer am Handy in der Sonne steht, sieht gar nichts.

Für wen ist eine Webseite eigentlich gemacht? Und was macht eine Seite gut?

Erkunden: Was stört hier?

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Eine schwierige Seite mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Notiere mindestens sechs Dinge, die das Lesen oder Bedienen erschweren. Gib jeweils an, für wen sie ein Problem sind.

b) Verbessere die Seite im Spielplatz so, dass möglichst viele Probleme behoben sind.

Tipp 1

Achte auf: Farben und Kontraste, Schriftgröße, Überschriften, Linktext, Beschriftungen, Informationen, die nur über Farbe gegeben werden, und darauf, was passiert, wenn du mit Tab durch die Seite gehst.

Lösung (mögliche Ergebnisse)

Erkundung 2: Ohne Maus leicht

Lege die Maus zur Seite. Öffne deine Café-Seite und bediene sie nur mit der Tastatur: Tab springt weiter, Umschalt + Tab zurück, Enter folgt einem Link, Leertaste kreuzt an, Pfeiltasten wählen in Listen und Radio-Knöpfen.

a) Beschreibe, wie du erkennst, wo du gerade bist.

b) Kommst du zur Speisekarte und kannst du eine Bestellung ausfüllen und abschicken? Notiere, wo es hakt.

c) Stelle eine Vermutung auf, für welche Menschen diese Art der Bedienung wichtig ist.

Lösung (mögliche Beobachtungen)

Designgrundsätze

Vergleicht eure Ergebnisse. Gute Gestaltung folgt einigen Grundsätzen, die man in fast jeder gelungenen Seite wiederfindet:

Grundsatz	Bedeutung	Beispiel
Nähe	Was zusammengehört, steht nah beieinander.	Beschriftung direkt über ihrem Feld
Ausrichtung	Elemente stehen an gemeinsamen Linien.	Fließtext linksbündig, nicht alles mittig
Kontrast	Wichtiges hebt sich deutlich ab, Text ist gut lesbar.	dunkle Schrift auf hellem Grund
Wiederholung (Einheitlichkeit)	Gleiches sieht überall gleich aus.	alle Knöpfe in derselben Farbe und Form, Navigation auf jeder Seite an derselben Stelle
Weißraum	Freie Flächen geben Ruhe und Ordnung.	Abstände zwischen Abschnitten
Hierarchie	Die Bedeutung ist an der Größe erkennbar.	Überschriften größer als Text, Wichtiges zuerst

Farben und Schrift: Wenige Farben genügen: eine Grundfarbe für Text und Hintergrund, eine Akzentfarbe für Wichtiges (Links, Knöpfe). Höchstens zwei Schriftarten. Für Fließtext mindestens etwa 16 Pixel (1rem), ein Zeilenabstand von etwa 1,5 und nicht zu lange Zeilen (grob 60 bis 80 Zeichen).

Informationen professionell vermitteln: kurze Sätze, das Wichtigste zuerst, aussagekräftige Überschriften, Listen statt langer Absätze. Viele Menschen überfliegen Webseiten nur.

Benutzungsfreundlichkeit

Eine Seite ist benutzungsfreundlich (englisch usability), wenn man sein Ziel schnell, sicher und ohne Ärger erreicht:

klare Navigation: Man weiß immer, wo man ist und wie man zurückkommt.
erwartungsgemäß: Dinge funktionieren wie gewohnt. Das Logo führt zur Startseite, unterstrichener Text ist ein Link.
verständlich: aussagekräftige Linktexte und Beschriftungen, keine unnötigen Fachwörter.
Rückmeldung: Nach dem Absenden erfährt man, ob es geklappt hat. Fehler werden erklärt.
fehlerverzeihend: Falsche Eingaben lassen sich leicht korrigieren, nichts geht verloren.

Barrierefreiheit

Barrierefrei ist eine Seite, wenn alle Menschen sie nutzen können, auch mit einer Einschränkung. Davon profitieren zum Beispiel:

blinde Menschen, die sich Seiten von einem Screenreader (Vorleseprogramm) vorlesen lassen,
Menschen mit Sehschwäche oder Farbfehlsichtigkeit (etwa jeder zwölfte Mann hat eine Rot-Grün-Schwäche),
Menschen, die keine Maus bedienen können,
gehörlose Menschen, die Videos nur mit Untertiteln verstehen,
Menschen, die Deutsch lernen oder komplizierte Texte schwer verstehen,
und alle in schwierigen Situationen: Handy in der Sonne, gebrochener Arm, laute Umgebung.

Maßgeblich sind die Web Content Accessibility Guidelines (WCAG) des W3C. Sie ordnen alles vier Prinzipien zu:

Prinzip	Frage	Beispiele
wahrnehmbar	Kann man alle Inhalte wahrnehmen, egal ob man sieht oder hört?	Alternativtexte, genug Kontrast, Informationen nicht nur über Farbe, Untertitel
bedienbar	Kann man alles bedienen, auch ohne Maus?	Tastaturbedienung, sichtbarer Fokus, genug Zeit, keine blinkenden Inhalte
verständlich	Versteht man Inhalte und Bedienung?	klare Sprache, `lang="de"`, Beschriftungen, verständliche Fehlermeldungen
robust	Funktioniert die Seite mit verschiedenen Browsern und Hilfsprogrammen?	sauberes HTML, passende Elemente (`button` statt `div` als Knopf)

Rechtlicher Rahmen (Stand: Oktober 2026): Öffentliche Stellen in Deutschland müssen ihre Webseiten barrierefrei gestalten (Barrierefreie-Informationstechnik-Verordnung, BITV 2.0). Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) außerdem für viele Angebote von Unternehmen, zum Beispiel Online-Shops. Kleinstunternehmen sind teilweise ausgenommen.

Kontrast prüfen

Das Kontrastverhältnis vergleicht die Helligkeit von Text und Hintergrund. Es reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß). Nach WCAG (Stufe AA) braucht

normaler Text mindestens 4,5 : 1,
großer Text (ab etwa 24 Pixel, fett ab etwa 19 Pixel) mindestens 3 : 1.

Probiere es aus:

TextfarbeHintergrund

Großer Text: Speisekarte

Normaler Text: Kakao 1,50 €, Brezel 0,90 €

Kontrastverhältnis:

Auch die Entwicklerwerkzeuge zeigen den Kontrast an: Element anklicken, unter „Stile“ auf das Farbkästchen bei color klicken.

Sichtbarer Fokus

Wer mit der Tastatur arbeitet, muss sehen, wo er ist. Den Fokusrahmen darf man deshalb nie einfach mit outline: none entfernen. Man kann ihn aber passend gestalten:

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1d6b3a;
  outline-offset: 2px;
}

:focus-visible gilt, wenn ein Element mit der Tastatur ausgewählt wurde. Bei einem Mausklick erscheint der Rahmen meist nicht.

Café-Projekt: Schritt 6

Café-Projekt, Schritt 6: Der Barrierefreiheits-Check mittel

Prüfe alle drei Seiten deines Cafés mit dieser Liste. Notiere, was du gefunden und verbessert hast.

Hat jede Seite lang="de" und einen eigenen, passenden title?
Gibt es auf jeder Seite genau eine h1, und sind die Überschriften lückenlos geordnet?
Haben alle Bilder einen passenden Alternativtext?
Sagen alle Linktexte, wohin sie führen?
Hat jedes Formularfeld ein label, und sind die Radio-Knöpfe in einem fieldset mit legend?
Prüfe mit dem Kontrastprüfer alle Farbpaare deiner Seite: Text auf Hintergrund, Überschriften, Navigation, Hinweis „vegan“.
Wird nirgends nur über Farbe informiert?
Tastaturtest: Kommst du ohne Maus durch alle Seiten und durch das Formular? Ist der Fokus überall gut sichtbar? Ergänze in style.css einen gut sichtbaren Fokusrahmen.
Ist der Fließtext linksbündig und mindestens 1rem groß?

Tipp 1

Die Café-Farben aus Schritt 4 haben gute Kontraste. Wenn du eigene Farben gewählt hast, prüfe sie besonders genau.

Stand nach Schritt 6

Aufgaben

Aufgabe 1: Reicht der Kontrast? leicht

Ermittle mit dem Kontrastprüfer das Kontrastverhältnis und gib an, ob es für normalen Text und für großen Text reicht.

Text #767676 auf #ffffff
Text #999999 auf #ffffff
Text #ffcc00 auf #ffffff
Text #0055aa auf #ffffff
Text #aaaaaa auf #f0f0f0

Lösung

Aufgabe 2: Code lesen – Barrieren finden mittel

<h1>Jugendzentrum</h1>
<h4>Programm</h4>
<img src="logo.png">
<p>Infos zum Ferienprogramm gibt es <a href="ferien.html">hier</a>.</p>
<input type="email" placeholder="E-Mail">
<div class="knopf" onclick="anmelden()">Anmelden</div>
<p style="color: red">Pflichtfelder sind rot markiert.</p>

Erläutere fünf Barrieren in diesem Ausschnitt. Ordne jede einem der vier Prinzipien zu und gib eine Verbesserung an.

Tipp 1

Ein placeholder verschwindet, sobald man tippt. Ist er ein Ersatz für ein label?

Lösung

Aufgabe 3: Nach Designgrundsätzen beurteilen mittel

Die Seite eines Tanzvereins hat:

fünf verschiedene Schriftarten und acht Farben,
alle Texte zentriert, Absätze über die ganze Bildschirmbreite,
auf jeder Seite sitzt die Navigation an einer anderen Stelle,
die Knöpfe sind mal rund und rot, mal eckig und blau,
keine Abstände zwischen den Abschnitten,
die Überschrift „Kurse“ ist kleiner als der Text darunter.

Beurteile die Seite anhand der Designgrundsätze und schlage zu jedem Punkt eine Verbesserung vor.

Lösung

Aufgabe 4: Wem hilft es? mittel

Ordne jeder Maßnahme mindestens eine Personengruppe zu, der sie besonders hilft, und begründe kurz.

Videos haben Untertitel.
Bilder haben Alternativtexte.
Man kann die Schrift im Browser vergrößern, ohne dass das Layout zerbricht.
Alles lässt sich mit der Tastatur bedienen.
Fehler im Formular werden als Text erklärt, nicht nur rot markiert.
Texte sind kurz und in einfacher Sprache.

Lösung (Beispiel)

Aufgabe 5: „Lohnt sich nicht“ schwer

Bei der Planung der Café-Seite sagt jemand aus der Schülervertretung:

„Barrierefreiheit lohnt sich für unser kleines Schülercafé nicht. Das betrifft doch kaum jemanden, und es ist viel zu aufwendig.“

Nimm Stellung zu dieser Aussage.

Tipp 1

Wie viele Menschen betrifft es wirklich, wenn man auch vorübergehende Einschränkungen und schwierige Situationen mitzählt? Und wie viel Aufwand war es beim Café bisher?

Tipp 2

Denk auch daran, wer alles auf die Seite einer Schule zugreift.

Lösung (Beispiel)

Zusatzaufgabe: Automatisch prüfen und Sprunglink schwer Zusatz

a) In Chromium-Browsern (zum Beispiel Edge) gibt es in den Entwicklerwerkzeugen den Bereich Lighthouse. Lass damit deine Café-Startseite auf Barrierefreiheit prüfen. Beschreibe, was gefunden wird, und erläutere, was eine automatische Prüfung nicht feststellen kann.

b) Baue einen Sprunglink „Zum Inhalt springen“ ein, der als erstes Element im body steht, nur beim Fokus mit der Tastatur sichtbar wird und auf main springt.

Lösung (Beispiel)

Zusammenfassung

Designgrundsätze: Nähe, Ausrichtung, Kontrast, Wiederholung, Weißraum, Hierarchie. Wenige Farben, höchstens zwei Schriften, Fließtext etwa 1rem und linksbündig.
Benutzungsfreundlich ist eine Seite mit klarer Navigation, erwartungsgemäßem Verhalten, verständlichen Texten, Rückmeldungen und Fehlertoleranz.
Barrierefrei ist eine Seite, die alle nutzen können. Die WCAG ordnen alles den Prinzipien wahrnehmbar, bedienbar, verständlich, robust zu.
Kontrast nach WCAG AA: normaler Text mindestens 4,5 : 1, großer Text mindestens 3 : 1. Informationen nie nur über Farbe.
Tastatur: Alles muss ohne Maus bedienbar sein, der Fokus muss sichtbar sein. Für Aktionen button, für Ziele a href.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Designgrundsätze nennen und eine Seite danach beurteilen? → Erkundung 1, Designgrundsätze, Aufgabe 3
Kannst du Benutzungsfreundlichkeit beschreiben? → Benutzungsfreundlichkeit, Aufgabe 2
Kannst du Barrierefreiheit erklären und Maßnahmen den Prinzipien zuordnen? → Barrierefreiheit, Aufgabe 2, Aufgabe 4, Aufgabe 5
Kannst du Kontraste prüfen und mit der Tastatur testen? → Erkundung 2, Kontrast prüfen, Café-Projekt, Aufgabe 1

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Designgrundsätze	Regeln guter Gestaltung: Nähe, Ausrichtung, Kontrast, Wiederholung, Weißraum, Hierarchie
Weißraum	freie Fläche, die Ruhe und Ordnung schafft
Benutzungsfreundlichkeit	man erreicht sein Ziel schnell, sicher und ohne Ärger
Barrierefreiheit	alle Menschen können eine Seite nutzen, auch mit Einschränkung
Screenreader	Programm, das den Inhalt einer Seite vorliest
WCAG	internationale Richtlinien für barrierefreie Webinhalte
wahrnehmbar, bedienbar, verständlich, robust	die vier Prinzipien der WCAG
Kontrastverhältnis	Helligkeitsunterschied zwischen Text und Hintergrund, von 1 : 1 bis 21 : 1
Fokus	das Element, das gerade mit der Tastatur ausgewählt ist
Farbfehlsichtigkeit	bestimmte Farben, oft Rot und Grün, werden schlecht unterschieden

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
W3C: Web Content Accessibility Guidelines (WCAG) 2.2, Prinzipien und Kontrastanforderungen der Stufe AA.
Barrierefreie-Informationstechnik-Verordnung (BITV 2.0); Barrierefreiheitsstärkungsgesetz (BFSG), anzuwenden seit dem 28.06.2025. Rechtsstand bitte vor dem Unterricht prüfen.
Kontrastwerte selbst berechnet nach der Formel der WCAG.
Texte, Beispiele, Aufgaben, Kontrastprüfer und Code-Beispiele sind selbst erstellt.