CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei

In meinem letzten Blogartikel haben wir den Grundstein gelegt: HTML. Wir haben gelernt, wie man einer Webseite Struktur gibt. Doch eine Webseite, die nur aus HTML besteht, sieht meistens sehr funktional und schlicht aus – fast wie ein nacktes Skelett.

Heute gehen wir den nächsten Schritt in unserer inklusiven Kursreihe: CSS (Cascading Style Sheets). In diesem Artikel erkläre ich, was CSS ist, warum es für die Barrierefreiheit so wichtig ist und wie blinde sowie sehende Menschen gemeinsam modernes Webdesign lernen können.

Warum jetzt CSS?

Während HTML für den Inhalt und die Struktur zuständig ist, kümmert sich CSS um das Aussehen. Mit CSS bestimmen wir Farben, Schriftgrößen, Abstände und das Layout.

Man könnte sagen: HTML ist das Haus (Wände, Türen, Fenster), und CSS ist die Inneneinrichtung und der Anstrich (Tapeten, Teppiche, Platzierung der Möbel).

Die inklusive Perspektive: CSS ist mehr als nur Optik

Vielleicht fragen Sie sich: „Warum sollte ein blinder Mensch CSS lernen? Er sieht die Farben doch gar nicht!“

Die Antwort ist einfach: Inklusion funktioniert in beide Richtungen.

• Gleichberechtigung: Wenn blinde Menschen Webseiten entwickeln, sollen sie die volle Kontrolle über das Endprodukt haben.
• Barrierefreiheit für andere: Ein blinder Entwickler kann durch CSS sicherstellen, dass die Kontraste für Menschen mit Sehbehinderung hoch genug sind oder dass die Schriftgröße skalierbar bleibt.
• Struktur und Fokus: CSS steuert auch, wie Elemente hervorgehoben werden, wenn man sich mit der Tastatur durch eine Seite bewegt. Das ist für die Barrierefreiheit essenziell.

Was ist CSS?

CSS steht für Cascading Style Sheets (gestufte Gestaltungsvorlagen). Es ist eine Stylesheet-Sprache, mit der wir dem Browser sagen, wie die HTML-Elemente dargestellt werden sollen.

Ein einfaches Beispiel:

In HTML haben wir eine Überschrift: <h1>Willkommen</h1>.
In CSS sagen wir dem Browser: „Mache alle h1-Überschriften blau und groß.“

h1 {
  color: blue;
  font-size: 24px;
}

Barrierefreiheit in CSS von Anfang an mitdenken

In diesem Kurs werden wir CSS nicht nur nutzen, um Seiten „schön“ zu machen, sondern vor allem, um sie benutzbar zu machen. Hier sind drei wichtige Aspekte, die wir behandeln werden:

1. Kontraste und Farben

Farben dürfen nicht die einzige Art sein, Informationen zu vermitteln. Ein roter Rahmen allein reicht nicht aus, um einen Fehler zu markieren, da farbenblinde Menschen dies eventuell nicht erkennen. Wir lernen, wie man Farben inklusiv einsetzt.

2. Relative Einheiten (rem statt px)

Wir vermeiden starre Pixel-Angaben (px) bei Schriftgrößen. Stattdessen nutzen wir relative Einheiten (rem). Warum? Damit Menschen, die im Browser die Schrift vergrößern (Zoom), ein sauberes Layout behalten, das mitwächst.

3. Der Fokus-Indikator

Viele Webdesigner schalten den Rahmen aus, der erscheint, wenn man mit der Tabulator-Taste durch eine Webseite navigiert (den sogenannten Focus-Ring). Für Menschen, die auf die Tastaturbedienung angewiesen sind, ist das fatal. Wir lernen, wie man den Fokus sichtbar und ansprechend gestaltet.

---

Inhalte des CSS-Kurses

Hier ist ein Ausblick auf die Themen, die wir in dieser Reihe Schritt für Schritt durchgehen werden:

Grundlagen von CSS

• Was ist CSS? (Einbindung in HTML: Inline, Intern, Extern)
• Syntax: Selektoren, Eigenschaften und Werte
• Kaskade und Vererbung: Warum „Cascading“ im Namen steckt
• Modernes CSS: Variablen und :root

Textgestaltung und Typografie

• Schriftarten und Schriftgrößen barrierefrei wählen
• Zeilenabstände für bessere Lesbarkeit
• Relative Einheiten (em, rem, %) vs. absolute Einheiten (px)

Farben und Hintergründe

• Barrierefreiheit: Kontrastverhältnisse prüfen (WCAG-Standard)

Das Box-Modell

• Abstände verstehen: margin, padding, border
• Breite und Höhe von Elementen

Positionierung – Elemente anordnen

• Div-Container horizontal positionieren
• Die Eigenschaft position

Layout-Techniken (Modernes Webdesign)

• Flexbox: Elemente einfach nebeneinander oder untereinander anordnen
• CSS Grid: Komplexe Layouts erstellen
• Responsive Design: Wie sich die Webseite automatisch an Smartphones und Tablets anpasst (Media Queries)

Interaktion und Barrierefreiheit

• Tastaturbedienbarkeit: :focus Styles gestalten
• Zustände sichtbar machen: :hover und :active
• Inhalte für Screenreader verbergen oder sichtbar machen (Klasse visually-hidden)

Best Practices & Fehlersuche

• Saubere Strukturierung von CSS-Dateien
• Browser-Entwicklertools barrierefrei nutzen
• Validierung von CSS-Code

---

Zielgruppe dieses CSS-Kurses

Wie schon beim HTML-Kurs gilt: Dieser Kurs ist speziell so konzipiert, dass er für blinde Menschen hervorragend funktioniert. Alle Erklärungen sind textbasiert und logisch aufgebaut, sodass sie mit dem Screenreader optimal nachvollzogen werden können.

Aber: Auch sehende Menschen sind herzlich willkommen! Wer Barrierefreiheit von Anfang an mit CSS lernt, baut die besseren Webseiten für alle.

Schlussbemerkung

Ich freue mich darauf, mit Ihnen gemeinsam die Welt des Designs zu entdecken. Barrierefreiheit ist kein „Extra“, das man am Ende hinzufügt – es ist das Fundament für ein inklusives Internet.

Wenn Sie Fragen zu den kommenden Themen haben oder Unterstützung bei der Umsetzung barrierefreier Webprojekte benötigen, schreiben Sie mir gerne eine Mail oder rufen Sie mich an.

Kontakt:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463

Ihr Markus Lemcke

Weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle