Schlagwort: CSS lernen

CSS lernen leicht gemacht: Strategische Positionierung – Elemente barrierefrei anordnen

Herzlich willkommen zum nächsten Teil meiner Serie „CSS lernen leicht gemacht“. In diesem Artikel geht es um die Positionierung. Wer seine Website professionell gestalten möchte, muss verstehen, wie man Elemente punktgenau platziert, ohne die Barrierefreiheit zu gefährden.

In der Informatik ist das Layout wie ein Schachbrett. Wenn Sie Inhalte online stellen, entscheiden Sie, welche Figur wo steht. Doch Vorsicht: Eine visuelle Verschiebung darf niemals die logische Lesereihenfolge für Screenreader durcheinanderbringen.

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.
„CSS lernen leicht gemacht: Strategische Positionierung – Elemente barrierefrei anordnen“ weiterlesen

CSS lernen leicht gemacht: Best Practices und Fehlersuche

Wir haben nun viel über Schriften, Farben, Layouts und Interaktionen gelernt. In diesem abschließenden Teil meiner CSS-Reihe schauen wir uns an, wie Profis ihren Code schreiben und was zu tun ist, wenn mal etwas nicht so funktioniert, wie es soll. Sauberer Code ist nämlich auch eine Form von Barrierefreiheit – er ist für jeden leichter zu lesen und zu warten.

1. Ordnung halten mit Kommentaren

Wenn dein CSS-Code wächst, verliert man schnell den Überblick. Kommentare helfen dir, deinen Code in Abschnitte zu unterteilen. Sie werden vom Browser ignoriert, dienen aber als wichtige Wegweiser für dich selbst oder andere Entwickler.

In CSS schreibt man Kommentare zwischen /* und */.

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
nav {
  background-color: #f4f4f4;
}

/* Button-Styling */
.btn-primary {
  color: white; /* Weißer Text für hohen Kontrast */
}

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.

„CSS lernen leicht gemacht: Best Practices und Fehlersuche“ weiterlesen

CSS lernen leicht gemacht: Interaktion und Barrierefreiheit

Eine Webseite ist kein gedrucktes Plakat – sie lebt von der Interaktion. Nutzer klicken auf Links, füllen Formulare aus oder navigieren mit der Tastatur. In diesem Teil meiner Kursreihe zeige ich Ihnen, wie Sie mit CSS dafür sorgen, dass diese Interaktionen für alle Menschen barrierefrei sind.

Der Fokus-Zustand: Wegweiser für Tastaturnutzer

Stellen Sie sich vor, Sie bedienen Ihren Computer ohne Maus, nur mit der Tabulator-Taste. Sie springen von Link zu Link. Wenn Sie nicht sehen, wo Sie sich gerade befinden, sind Sie verloren.

Menschen mit motorischen Einschränkungen oder blinde Menschen, die eine Tastatur nutzen, sind auf den sogenannten Fokus-Ring angewiesen. Viele Webdesigner löschen diesen Rahmen leider mit outline: none;, weil sie ihn „hässlich“ finden. Das ist eine der größten Barrieren im Web!

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.
„CSS lernen leicht gemacht: Interaktion und Barrierefreiheit“ weiterlesen