Übungsseite für einzelne Module
Zwischenüberschrift (<h2>), wenn gewünscht
Barrierefreie Webseiten
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.
Titelfarbe einstellen
Wenn man im Akkorderon die Titelfarbe beeinflussen will, wählt man im Bearbeitungsmodus Design –> Titel Text–> und wählt dort die entsprechende Farbe. Hier kann auch die Textfarbe für den aufgeklappten Text eingestellt werden. Ob da allerdings das zentrale Stylesheet dominanter ist, bleibt auszutesten.
Ihr Titel
Teaser 1 beschreibt den Inhalt, der nach Aufklappen sichtbar wird.
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.
Das Gelbe in grün
Mit dem „Gelben in Grün“ halten Sie das erste Branchenbuch für Schülerfirmen in den Händen. Dieses Branchenbuch ist etwas Besonderes, denn es bietet Ihnen auf den kommenden Seiten einen Überblick über das, was Schülerfirmen im Land Brandenburg zu bieten haben. Es ermöglicht, wie die Branchenbücher für die reale Wirtschaft, die schnelle Suche innerhalb verschiedener Branchen. Sowohl die Branchen als auch die dort tätigen Schülerfirmen sind alphabetisch geordnet. Wenn Sie zusätzlich nach Schülerfirmen in einem Landkreis, einem bestimmten Ort oder einer konkreten Schule suchen möchten, dann nutzen Sie bitte die aktualisierte Online-Version des Branchenbuchs auf unserer Homepage www.servicestelle-schuelerfirmen.de
Text mit Bild (h2)
Dies ist ein 2-spaltiger Bereich, dem ein „Trenner“ (Linie in der Breite der linken Spalte) vorangestellt wurde. Hier muss aber die Bildgröße noch definiert werden, jeweils für Hoch- und Querformat.
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,
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,

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,
Das hier steht im Textbereich, der im Modul direkt angepasst werden kann. Die Package-ID liegt auf dem Dashboard unter den Downloads.

Excel-Downloads
Die PAB bietet hier diverse downloads an, die als Excel-Dokument verfügbar sind.
Leitfaden_PB (Beisiel Package)
Hier kann eine beschreibender Text eingebaut werden, der nähere Angaben zur Download-Datei enthält. Kann aber auch wegfallen.



Schwarz/Weiß-Modus