Übungsseite für einzelne Module

Zwischenüberschrift (<h2>), wenn gewünscht

Hinweis: Der Projektname in der Hauptüberschrift kann /soll hier entfallen, da die Breadcrums, also die kleine Navigationszeile oberhalb vom Textbereich den Projektnamen bereits enthält. Dieser ist verlinkt mit der Projekt-Einstiegssteite und mit der kobra.net-Startseite.

Unterüberschrift (<h2> mit gepunkteter Linie)

Diese Seite ist einspaltig aufgebaut und die eingesetzten Module sind „Textmodule“. Wenn andere Elemente auf der Seite gewünscht sind, können diese als Module eingebaut werden, z.B. Text mit Video, Text mit Bild usw. Bestimmte Bereiche der Seiten können auch mehrspaltig erstellt werden. Das sollte mit den zuständigen Redakteuren abgestimmt werden Issmaail, Marcel, Ole, Dagmar. Diese Gruppe bereitet die entsprechenden Module vor und hinterlegt sie in der Bibliothek.

Abschnittsüberschrift (<h3> in Projektfarbe)

Mit Hilfe der (Abschnitts-)Überschriften kann der Text strukturiert werden. Alternativ können andere Seitenelemente verwendet werden, siehe oben.

Barrierefreie Webseiten gestalten (<h2> mit gepunkteter Linie)

• Struktur
  Eine Webseite besteht aus verschiedenen Strukturelementen. Klassischerweise gibt es einen Block für die Navigation und einen weiteren Block mit dem Inhalt und dem Text der Seite. Diese Blöcke sind ihrerseits mit Überschriften, Listen und Fließtexten versehen. Barrierefreie Websites haben semantische Auszeichnungen für diese Zusammensetzung. Die Struktur gibt Menschen mit Sehbehinderung Orientierung. Text sollte hierarchisch richtig strukturieren mit Überschriften (H1 – H6), Aufzählungen, Fettschrift, optisch hervor gehobenen Links etc.

• Schrift und Kontraste
  Beim Erstellen einer barrierefreien Website ist die gute Lesbarkeit der Texte das A und O. Ein ausreichender Kontrast zwischen der Vorder- und Hintergrundfarbe bildet die Basis und ist besonders für Texte in kleinen Schriftgrößen entscheidend. Dieser Effekt kann durch den Kontrastmodus verstärkt werden. Für die mobile Nutzung kann dies auch Vorteile mit sich bringen, da hohe Kontraste helfen, dass Inhalte trotz Sonneneinstrahlung auch im Freien erkennbar sind.

• Leichte Sprache
  Um den Inhalt der Website noch inklusiver zu gestalten, sollte auch leichte Sprache angeboten werden. Konkret bedeutet das, kurze Sätze zu bilden, einen einfachen Satzbau an den Tag zu legen und weitgehend auf Fremdwörter zu verzichten.

• Bildtext
  Um blinden Menschen die Nutzung der Website zu ermöglichen und ihnen alle Informationen zugänglich zu machen, sollten Bilder mit sogenannten Alternativtexten versehen werden. So können sich Nutzer Inhalte von Bildbeschreibungen zum Beispiel von einem Screenreader, einer Vorlese-Anwendung für den Text im Browser, vorlesen lassen. Alternativtexte helfen nicht nur Menschen, sondern auch Suchmaschinen, deine Bilder zu verstehen.
  –> Beim Einfügen eines Bildes öffnet sich auf der rechten Seite ein Fenster mit mehreren Bearbeitungsmöglichkeiten – darunter ist auch ein Eingabefeld für den Alternativtext. Schreibe deinen Text hinein, bearbeite die übrigen Felder und klicke auf In den Beitrag einfügen.

• Formulare
  Auch Formulare auf einer Website sollten barrierefrei sein, sodass ein potenzieller Kunde seinen Einkauf oder seine Kontaktaufnahme erfolgreich erledigen kann.

Lorem ipsum (h3)

dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren,(h3)

no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,