Schlagwort: Barrierefreiheit in CSS

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: Das Box-Modell (Abstände und Rahmen)

Willkommen zum nächsten Teil meiner Kursreihe! Bisher haben wir gelernt, wie wir Texte gestalten und Farben setzen. Heute schauen wir uns an, wie viel Platz die einzelnen Elemente auf einer Webseite eigentlich einnehmen.

In CSS ist jedes Element – egal ob es ein Text, ein Bild oder ein Button ist – im Grunde eine rechteckige Box. Das zu verstehen ist der Schlüssel, um Layouts zu bauen, die nicht nur gut aussehen, sondern auch barrierefrei und übersichtlich sind.

Das Box-Modell anschaulich erklärt: Das „Bild an der Wand“

Stellen Sie sich vor, Sie hängen ein gerahmtes Foto an eine Wand. Das Box-Modell besteht aus vier Schichten, genau wie dieses Bild:

  1. Der Inhalt (Content): Das ist das eigentliche Foto selbst. In CSS ist das dein Text oder dein Bild.
  2. Der Innenabstand (Padding): Das ist wie ein Passepartout (der weiße Papprahmen) innerhalb des Bilderrahmens. Er sorgt dafür, dass das Foto nicht direkt am Holzrahmen klebt.
  3. Der Rahmen (Border): Das ist der hölzerne Bilderrahmen selbst. Er umschließt das Foto und das Passepartout.
  4. Der Außenabstand (Margin): Das ist der leere Platz an der Wand zwischen deinem Bild und dem nächsten Möbelstück oder dem nächsten Bild.

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.
„CSS lernen leicht gemacht: Das Box-Modell (Abstände und Rahmen)“ weiterlesen

CSS lernen leicht gemacht: Farben, Hintergründe und Kontraste

Nachdem wir uns im letzten Teil mit der Typografie beschäftigt haben, bringen wir heute Farbe ins Spiel. Doch Vorsicht: Farbe im Webdesign ist weit mehr als nur eine Frage des persönlichen Geschmacks. Für ein inklusives Internet müssen wir sicherstellen, dass Farben so gewählt werden, dass jeder die Inhalte mühelos erkennen kann.

Was ist Farbfehlsichtigkeit?

Um zu verstehen, warum Barrierefreiheit bei Farben so wichtig ist, müssen wir uns mit der Farbfehlsichtigkeit beschäftigen. Viele Menschen nehmen Farben anders wahr, als man es vielleicht erwartet.

Die bekannteste Form ist die Rot-Grün-Schwäche, die allein in Deutschland etwa 8 % aller Männer betrifft. Für diese Menschen sind Rot- und Grüntöne schwer voneinander zu unterscheiden. Es gibt aber auch Menschen, die gar keine Farben sehen können (Achromatopsie) oder eine Blau-Gelb-Schwäche haben.

Die goldene Regel lautet daher: Verlasse dich niemals allein auf die Farbe, um eine Information zu vermitteln. Ein Fehler sollte nicht nur durch roten Text markiert werden, sondern zusätzlich durch ein Icon oder einen erklärenden Text.

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

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).

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