Schlagwort: 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

Webentwicklung barrierefrei lernen: Der inklusive Kurs für HTML und CSS – Grundlagen

Das Internet ist für viele Menschen der Zugang zur Welt. Doch dieser Zugang ist oft durch digitale Barrieren versperrt. In meinem umfassenden Webentwickler-Kurs „Lernen leicht gemacht“ zeige ich Ihnen, wie Sie diese Barrieren einreißen. Dieser Kurs ist so konzipiert, dass Sie ihn Schritt für Schritt durcharbeiten können, um ein tiefes Verständnis für inklusives Design zu entwickeln. Es ist für die gesellschaftliche Teilhabe entscheidend, dass Menschen mit einer Behinderung digitale Informationen jederzeit ohne fremde Hilfe konsumieren können. In meinem Kurs lernen Sie im Rahmen eines praxisnahen Training-Konzepts, wie Sie die digitale Barrierefreiheit durch gezieltes testen Ihrer Projekte von Anfang an sicherstellen. Wer heute eine neue Website plant, sollte von der ersten Zeile Code an an alle Nutzergruppen denken. In einer Welt, in der fast alles über das Internet läuft, ist die digitale Barrierefreiheit kein Luxus mehr, sondern eine Pflicht.

In der heutigen Zeit findet das gesellschaftliche Leben größtenteils online statt, weshalb der Zugang zu Informationen kein Privileg sein darf. Barrierefreie Webseiten bieten eine bessere Nutzererfahrung für absolut jeden Besucher, unabhängig von seinen körperlichen Voraussetzungen. Inklusive Webentwicklung ist zudem eine Fähigkeit, die auf dem Arbeitsmarkt aufgrund gesetzlicher Änderungen immer gefragter wird.

Barrierefreie Informatik ist kein Nischenthema – es ist die Voraussetzung für eine gleichberechtigte digitale Teilhabe. In diesem Artikel erhalten Sie einen Überblick über die Anforderungen verschiedener Nutzergruppen, die rechtlichen Grundlagen und den Zugang zu den einzelnen Kurs-Modulen für HTML und CSS.

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

„Webentwicklung barrierefrei lernen: Der inklusive Kurs für HTML und CSS – Grundlagen“ 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

CSS lernen leicht gemacht: Layout-Techniken (Modernes Webdesign)

Nachdem wir das Box-Modell verstanden haben, stellt sich die spannende Frage: Wie ordnen wir diese Boxen auf dem Bildschirm an? In diesem Teil schauen wir uns die drei wichtigsten Werkzeuge für modernes, barrierefreies Webdesign an: Flexbox, CSS Grid und Responsive Design.

1. Flexbox: Ordnung in einer Dimension

Flexbox ist ideal, wenn Sie Elemente in einer Reihe (nebeneinander) oder in einer Spalte (untereinander) anordnen möchten. Stellen Sie sich Flexbox wie ein elastisches Gummiband vor, das die Boxen automatisch verteilt.

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.
„CSS lernen leicht gemacht: Layout-Techniken (Modernes Webdesign)“ 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: Grundlagen von CSS

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.

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.
„CSS lernen leicht gemacht: Grundlagen von CSS“ 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

Barrierefreie Quiz App programmieren – Anleitung

Ich in diesem Blogartikel erkläre ich wie Sie mit HTML, CSS und Javascript eine barrierefreie progressive Quiz App programmieren können.

Multiple Choice Quiz – Was ist das?

Kennen Sie die Fernsehsendungen „Wer wird Millionär?“, „Gefragt – Gejagt“ oder „Quizduell – Der Olymp“. In diesen Fernsehsendungen wird eine Frage gestellt und es gibt 3 oder 4 Antwortmöglichkeiten. Diese Art von Quiz nennt sich Multiple Choice Quiz. In diesem Blogartikel erkläre ich Ihnen wie Sie einen barrierefreien Multiple Choice Quiz mit HTML, CSS und Javascript programmieren können. Für Entwickler die Grundkenntnisse in der Programmiersprache Javascript besitzen, ist es sehr einfach mehrere Quiz-Apps mit unterschiedlichen Themen zu programmieren.

Was ist ein barrierefreies Quiz?

Ein barrierefreies Quiz ist ein Quiz dass auch von Menschen mit unterschiedlichen körperlichen Einschränkungen und Behinderung genutzt werden kann. In diesem Blogartikel wird gezeigt wie ein barrierefreies Quiz mit HTML, CSS und JavaScript programmiert wird.

Ziel des Blogartikels

Das Ziel des Blogartikels ist es, Ihnen eine Anleitung zu geben, mit der Sie sehr schnell barrierefreie progressive Quiz Apps selbst programmieren können mit unterschiedlichen Themen und unterschiedlichen Aussehen. Los geht es! So sieht die App aus die wir jetzt gemeinsam programmieren:

Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android
Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Quiz App programmieren – Anleitung“ weiterlesen