Rund um Texte

Formatvorlage und CSS

Struktur durch Überschriften, Absätze, Listen und Tabellen

Überschriften

Allein durch die hierarchische Strukturierung von Überschriften (H1 - H6) wird der Text in seinem Aufbau sichtbar. Ein gut strukturierter Text ist einfacher lesbar als ein langer hintereinander weggeschriebener Text ohne jegliche Struktur und Überschriften. Überschriftensprünge sollen möglichst vermieden werden.
Zudem werden die Überschriften vom Screenreader erkannt und können so über die Tastatur entsprechend angesprungen werden.

Fett gesetzte Schrift ist keine Überschrift und hat keinen strukturierenden Effekt.

Infos zur Überschriftenreihenfolge

Absätze

Keine leeren Absätze verwenden um Abstände zu erzeugen!
Absätze sind immer innerhalb der Syntax <p> … </p> eingebettet.

Infos zu Absätzen

Listen

Durch die Formatierung von Listen oder nummerierten Listen wird die Aufzählung sofort als solche erkannt. Bei mehreren Punkten empfiehlt sich die Anwendung einer Liste. Beim Vorlesen mit dem Screenreader wird sofort deutlich, wieviel Punkte die Liste hat. Eine zusätzliche Strukturierung innerhalb einer Liste ist durch die eingerückte Liste möglich. Dies wird in der Regel durch Betätigen der Tab-Taste erreicht.

Beispiele zu Listen aufklappen

Tabellen

Der Einsatz von Tabellen ist dann sinnvoll, wenn diese die Daten entsprechend zuordnet. Tabellen sollten nicht als Layouthilfsmittel dienen.

Weitere Infos und Beispiele zu Tabellen

Gestaltung von Text

• Serifenlose Schrift

  Vorzugsweise ist eine serifenlose Schriftart zur besseren Lesbarkeit auswählen. Für Menschen mit Sehbehinderungen, denen eine erhöhte Konzentration beim Lesen von Texten abverlangt wird, ist dies von zentraler Bedeutung. Schriften mit Serifen haben den Nachteil, dass diese bei eng gestellten Buchstaben zusammenfließen und somit schlechter zu lesen sind.

  Mehr Infos unter: Leserlich.info - Schriftart

• Zeilenabstand

  Der Zeilenabstand sollte mindestens 120 Prozent betragen, damit sich Ober- und Unterlängen der Schrift nicht berühren.

  Mehr Infos unter: Leserlich.info - Zeilenabstand

• Linksbündiger Flattersatz

  • Linksbündiger Flattersatz eignet sich besser als Blocksatz. Flattersatz ist besser lesbar und schlägt keine großen Lücken, besonders bei langen Wörtern oder auch vergrößertem Text. Die gleichbleibenden Abstände zwischen Wörtern verbessern so den Lesefluss.
  • Ebenfalls problematisch ist zentrierter und rechtsbündig gesetzter Text, da der Anfang der Zeile schlechter gefunden wird.

• Leerzeilen und Leerzeichen

  Ein Abstand ist nicht weit genug?

  Schnell eine Return- oder eine Leertaste gedrückt und schon scheint das Problem behoben?!
  Dieses Verfahren ist leider nicht geeignet zur Umsetzung von barrierefreien Texten.

  • Ein Screenreader würde so Zeile für Zeile als leere Zeile vorlesen.
  • Zudem können überflüssige Leerzeilen und -zeichen die Architektur des Textes bei Vergrößerungen im Web ungünstig verändern.

  So geht es richtig!

  • Abstände müssen in Dokumenten über die Absatz-Formatvorlage erfolgen.
  • Entsprechende Einträge für das Web können im Stylesheet festgelegt werden und ermöglichen so Absätze ohne Leerzeilen.

• GROßSCHREIBUNG

  Mehrere Wörter oder Sätze ausschließlich in Großbuchstaben darzustellen, erschwert die Lesbarkeit.

  ZUM BEISPIEL MEHRERE SÄTZE HINTEREINANDER IN GROSSBUCHSTABEN ZU SCHREIBEN

• Farben und Kontraste

  • Zwischen Schriftfarbe und Hintergrund muss ausreichender Farbkontrast bestehen.
    Das Kontrastverhältnis muss für Texte/Überschriften ab 18 Pt. - und fette Texte ab 14 Pt. mindestens 3:1 betragen! Für Texte mit kleinerer Schriftgröße mind. 4,5:1.
  • Kontraste lassen sich online mit Kontrastmesswerkzeugen prüfen.
    Mehr Infos unter: Beurteilung von hinreichendem Kontrast
  • Ausschließlich Farbe als einzigen Informationsträger, zum Beispiel bei der Kennzeichnung von Links, ist ungeeignet da sie von Menschen mit Farberblindung nicht wahrnehmbar wäre. Die Information sollte auch noch über Form, wie Bei Links durch eine Unterstreichung wahrnehmbar sein.

• Gestaltung von Links

  • Links sollten einen sprechenden Namen erhalten, der dem "Was drauf steht ist auch drin Prinzip" folgt, wie zum Beispiel: Startseite des Barrierefreiwebs
  • Üblicherweise sind diese andersfarbig und unterstrichen, können aber auch durch eine andere Form, zum Beispiel durch ein voran gestelltes Icon, hervorgehoben sein.
  • Bei Links in Navigationsblöcken werden keine einzelnen Unterstreichungen benötigt. Da die Form durch die Position außerhalb des Fließtextes bereits besonders gekennzeichnet ist.
  • Bitte verwenden Sie kein "Finden Sie hier", oder andere sehr allgemeine Begriffe, da diese keine Information über das Linkziel enthalten.
  • Links bitte nicht als Hyperlink ausschreiben, da diese oft viel zu lang, schlecht zu handhaben und womöglich noch kryptisch, vorgelesen werden.
  • Links zu externen Webseiten (Externer Link) und Links zu Dokumenten (PDF, DOC, PPT) sollten ergänzend mit entsprechendem Text oder einem entsprechenden Icon veran­schaulicht werden. So wird vor der Aktvierung deutlich welche Gestalt das Linkziel hat.

  Mehr dazu unter: Links

• Hervorhebungen im Text

  Verwenden Sie im Fließtext für Hervorhebungen vor allem fette Schrift.
  Unterstrichene Wörter könnten auch als Link interpretiert werden, da diese üblicherweise unterstrichen sein sollten. Für farbblinde Menschen kann so ein Link nicht von unterstrichenem Text unterschieden werden.

Titel, Sprachangabe, Abkürzung und Silbentrennung

• Titel und Title als Seitenbeschreibung

  Der Seitentitel eines Dokuments oder einer Webseite <title> hat die wichtige Rolle ein Dokument eindeutig zu identifizieren.

  Beispiel:

   <title>Texte barrierefrei umsetzen - FernUniversität in Hagen</title>

  Grundsätzliches

  • Der Titel sollte kurz und aussagekräftig sein.
  • Der Titel wird oben in der Titelleiste von Dokumenten oder Webseiten angezeigt und vom Screenreader vorgelesen.
  • Ein Titel mit „sprechendem“ Namen wirkt sich für Suchmaschinen positiv aus. Dies setzt voraus, dass der Titel den Inhalt der Webseite oder des Dokuments wiedergibt.

  Title in der Webseite

  • Bitte beachten, wo der Title eingegeben wird, damit er als solcher interpretiert und entsprechend angezeigt wird. In Content Management Systemen könnte z.B. der Titel mit der Vergabe der Überschrift 1 gleichgesetzt sein.
  • Der Title wird in den Reitern des Webbrowsers angezeigt und bietet so bei mehreren geöffneten Webseiten eine Orientierungshilfe.
  • Beim Title sollte zuerst der individuelle Teil vergeben werden. Erst dann der allgemeine Teil (Dieser wird beim CMS der FernUni automatisch ergänzt).

  Der Titel im Dokument (Word/PDF)

  • Der Titel im Dokument, muss über die Dateiinformationen angeben werden. (In Word Reiter: Datei > Informationen)
  • Bei der PDF-Erstellung wird der Titel der Word Datei mit übertragen. Falls nicht vorhandenist muss dieser nachträglich unter den Eigenschaften des PDF´s Datei >Eigenschaften > Beschreibung eingeben werden.
  • Hinweis: Die Formatvorlage in Word „Titel“ wird nur als Absatz interpretiert und hat somit keinen strukturierenden Charakter.

  Mehr Infos unter: Die wichtigsten Vorbereitungen in Word

• Sprachangabe und Sprachwechsel

  Eine Webseite, wie auch ein Dokument benötigt eine Angabe zur Sprache des Inhalts. Nur so kann die Sprachausgabe den Text entsprechend der richtigen Aussprache vorlesen. Die Sprache ist in der Regel voreingestellt.

  Sprache in der Webseite

   <html lang="de">

  • Sollten sich innerhalb des Inhalts andersspachige Wörter oder Absätze befinden, müssen diese entsprechend gekennzeichnet werden.

  Beispiel: Screenreader

   <span lang="en">Screenreader</span>

  Mehr Infos dazu unter: Barrierefreies Webdesign - Sprachangabe

  Sprache im Dokument

  • In einem Dokument, wie bei Word kann die Sprache ebenfalls unter "Datei > Optionen > Sprache" festgelegt werden.
  • Bei Sprachwechsel wird durch Markierung des Textabschnitts die Kennzeichnung der Sprache in der unteren Leiste des Programms entsprechend geändert.

• Abkürzungen

  Grundsätzlich gilt es Abkürzungen zu vermeiden!

  • Wenn diese in einem Text häufiger auftauchen gilt es, diese wenigstens einmal komplett sichtbar (zum Beispiel in Klammern dahinter) zu übersetzen.
  • Für den Screenreader kann es zudem hilfreich sein, die Abkürzung im HTML zu hinterlegen, allerdings können diese nicht auf allen Endgeräten mit dem Mouseover sichtbar dargestellt werden. Dies wäre beispielsweise bei einem Smartphone der Fall.

  Beispiel: Zentrum für Medien und IT als ZDI

   <abbr title="Zentrum für Digitalisierung und IT">ZDI</abbr>

  Mehr Infos zum Thema unter: BIK- Schreibschule

• Silbentrennung

  Gerade die deutsche Sprache verfügt über sehr lange Wörter, die große Lücken im Text reißen können. Durch gezielte Silbentrennung lassen sich unschöne Umbrüche zu steuern. Dies erleichtert den Lesefluss und unnötiges Scrollen kann so verhindert werden. Besonders in mobilen Anwendungen, die eine kürzere Zeilenlänge haben passen sich die Zeilen besser an.

  Silbentrennung im Dokument

  In Dokumenten ist eine weiche Silbentrennung (bedingter Trennstrich), die in Word mit Tastenkürzel Strg - erreicht wird, von Vorteil. So werden Trennungen je nach Bedarf möglich. Die Trenn­striche sind nicht mehr sichtbar, wenn sie nicht mehr benötigt werden.

  Silbentrennung im Web

  Der HTML-Code &shy; löst die bedingte Silbentrennung in Wörtern auf Webseiten aus. Besonders eignet sich die Silbentrennung im Web bei schmalen Spalten, wie sie beispielsweise bei bei Tabellen auftauchen können.

  ---

  Beispiel für Silbentrennung in einer Tabelle

  Die Silbentrennung, wie sie in diesem Satz verwendet wird, kann bei langen Begriffen wie "Grund­stücks­ver­kehrs­ge­neh­mi­gungs­zu­stän­dig­keits­über­tra­gungs­ver­ord­nung" etc. mitten im Text, aber auch in Tabellen sehr nützlich sein. Je nach Bildschirmgröße passt sich der Text an und wird an gewünschten Stellen automatisch umbrochen. Der gesamte Platz wird vom Text genutzt.

  Anwendungsbeispiel mit Silbentrennung

  Verordnung	Heideweg	Pflasterstraße	Hofweg	Baumweg
  Grund­stücks­ver­kehrs­ge­neh­mi­gungs­zu­stän­dig­keits­über­tra­gungs­ver­ord­nung	erfüllt	nicht erfüllt	erfüllt	erfüllt

  Ohne Silbentrennung

  Verordnung	Heideweg	Pflasterstraße	Hofweg	Baumweg
  Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung	erfüllt	nicht erfüllt	erfüllt	erfüllt