Relevante und klar strukturierte Information im Inhaltsbereich ist für barrierefreie Webseiten die wichtigste Voraussetzung.

Im CMS kann man den Inhaltsbereich einer Webseite unterschiedlich gestalten. Einige Webseiten bieten einen Einstieg in ein Thema an und bestehen hauptsächlich aus navigatorischen Elementen wie Teaser, Slideshows, Inhaltsverzeichnisse oder Linklisten (mehr dazu im nächsten Abschnitt "Navigation und Verlinkungen"). Andere liefern direkt die eigentliche Information zu bestimmten Themen und beinhalten Texte, Content-Bilder, Audio- und Videomaterial, ergänzt durch weiterführende Links sowie navigatorische und Informationselemente z.B. Linklisten, News-, Termin- und Text-Boxen.

Die Vielfalt von Informationen und Formaten im Inhaltsbereich ist für die Barrierefreiheit zuweilen problematisch. Für Blinde und Sehbehinderte, die mit Screenreadern arbeiten, kann die Orientierung im Inhaltsbereich einer komplex aufgebauten Webseite recht mühsam werden. Wenn die gesuchte Webseite auch nicht sofort auffindbar ist, lässt sich ihr Inhalt nicht als zugänglich bezeichnen. Inhaltlich überladene Webseiten sind für alle Nutzer*innen unfreundlich, da die wichtige Information nur schwer von der sekundären unterschieden werden kann.

Wie kann man den Inhaltsbereich im Sinne der Barrierefreiheit optimieren?

Prägnanter Titel

Der Titel bzw. die Hauptüberschrift (die sog. Überschrift 1) einer Webseite gibt ihr Thema an und hilft nicht nur, die Webseite mit Suchmaschinen und im Menü der Website zu finden, sondern auch die Relevanz der darauffolgenden Inhalte zu erkennen. Die Überschrift 1 sollte die wichtigste Information markieren.

Der Titel wird im Feld "Titel" in den CMS-Vorlagen eingegeben und im Menü der Website sowie als Überschrift 1 angezeigt. Im Browser-Tab werden der Titel der aktuellen Webseite, der Titel der nächsten darüber liegenden Startseite mit eigener Hauptnavigation z.B. des Arbeitsbereichs oder Instituts und der Titel der Haupteinstiegsseite z.B. des Fachbereichs angezeigt. Diese werden von Screenreadern beim Aufruf der Webseite vorgelesen und auch von Suchmaschinen benutzt.

Im Feld "Titel, Langform" kann man eine abweichende, längere Überschrift 1 eingeben, die den Inhalt genauer beschreibt. Diese wird nicht als Teil der Navigation ausgegeben, erscheint aber als Titel auf der Seite. Suchmaschinen bestimmen mit Hilfe der Überschriften 1 und den darin enthaltenen (Such-)Begriffen die Relevanz der Webseite und ranken sie entsprechend.

Beispiel: Die Überschrift 1 auf der Webseite des Instituts für Deutsche und Niederländische Philologie

• Die Überschrift 1 "Institut für Deutsche und Niederländische Philologie" ist für die Einstiegsseite des Instituts und im Kontext der Fachbereichswebsite genau richtig.
• "Willkommen auf der Webseite unseres Instituts!" wäre als Überschrift 1 nicht aussagekräftig genug.
• "Institut für Deutsche und Niederländische Philologie des Fachbereichs Philosophie und Geisteswissenschaften der Freien Universität Berlin" wäre als Überschrift 1 zu viel Information.
• Die Überschrift 1 "Startseite des Instituts für Deutsche und Niederländische Philologie" würde sich nur auf die Einstiegsseite beziehen, und nicht auf den gesamten Teilbaum.

Einleitender Text

Eine kurze Einleitung nach der Überschrift 1 erläutert in wenigen Sätzen das Thema und den Zweck der Webseite und enthält die wichtigsten (Such-)Begriffe für Suchmaschinen. Den blinden und sehbehinderten Nutzer*innen hilft sie, schnell zu verstehen, ob die Webseite die gesuchte Information enthält. Eine kurze Einleitung ist auf jeder Webseite sinnvoll, auch auf Landing-Pages bzw. Seiten mit einem zeilenbasierten flexiblen Layout.

Eine Einleitung kann man in den Vorlagen Standard-Ordner und -Dokument in den Feldern "Hauptinhalt" oder "Zusammenfassung" und in Spezialvorlagen im Feld "Zusammenfassung" eingeben.

Beispiel:

• Der Einführungstext auf der Startseite des Instituts für Deutsche und Niederländische Philologie mit Links auf Unterseiten ist gut sowohl für Nutzer*innen als auch für Suchmaschinen.

Haupttext

Bei der Gestaltung des Haupttextes ist vor allem auf seine klare, verständliche Struktur und eine saubere standardisierte Formatierung von Überschriften, Listen, Tabellen und Verlinkungen zu achten: Verwenden Sie die im CMS vorhandenen Formatierungen (Absatz, Überschriften 2 und 3, Markierungen, Listen). Durch die standardisierte Formatierung wird im CMS das Markup erzeugt, das die assistierende Technik für Blinde und Sehbehinderte sowie Suchmaschinen korrekt interpretieren können (s. Punkte 3-5 und den Abschnitt "Navigation und Verlinkungen").

Farben können von farbfehlsichtigen und blinden Menschen nicht wahrgenommen werden und sollten deshalb nicht als Informationsträger eingesetzt werden.

Ergänzende Texte und navigatorische Elemente

Ergänzende Texte, navigatorische Elemente und insbesondere Verlinkungen sollten sparsam eingesetzt werden und für das Thema der Webseite relevant sein, denn jeder Kontextwechsel ist für blinde und sehbehinderte Menschen, die mit assistierender Technik arbeiten, schwierig. Im CMS können ergänzende Inhalte in der rechten Spalte oder in unteren Zeilen der Webseiten mit zeilenbasiertem Layout platziert werden.

Sprache der Webseite

Die richtige Auszeichnung der Sprache im Markup der Webseite ist die Voraussetzung dafür, dass der Text mit assistierender Technik (Screenreader, Sprachausgabe) korrekt vorgelesen wird.

Das CMS bietet pro Sprachversion nur eine Sprachauszeichnung an (z.B. Deutsch für /fu-berlin und Englisch für /fu-berlin/en).

So bekommt z.B. eine im deutschen Sprachbaum gepflegte englischsprachige Webseite einer Arbeitsgruppe nicht nur deutsche Begriffe in CMS-Vorlagen, sondern wird auch von Screenreadern mit deutscher Aussprache vorgelesen.

Die wichtigste redaktionelle Maßnahme wäre, Webseiten in die richtigen Sprachbäume einzusortieren. Das CMS-Team unterstützt Sie bei der Umstrukturierung der Webseiten und der Einrichtung von Umleitungen.

Begriffe und Abkürzungen

Spezial- und Fachbegriffe sowie Abkürzungen können für Screenreader ein Problem darstellen und nicht verständlich ausgesprochen werden. Definitionen und Verzicht auf ungewöhnliche Abkürzungen oder unnötig komplizierte Begriffe machen Texte verständlicher für alle und zugänglicher für Blinde und Sehbehinderte.

Eine Textgliederung mit standardisierten hierarchischen Überschriften verbessert die Zugänglichkeit des Webinhalts deutlich und optimiert ihn für Suchmaschinen.

Überschriften werden von Screenreadern explizit vorgelesen (z.B. "Überschrift zwei ...") und für die schnelle Navigation im Text benutzt.

Jede Webseite braucht eine und nur eine Überschrift 1.
In den meisten Vorlagen ist sie belegt mit dem obligatorischen Titel der Webseite (bzw. durch den "Titel, Langform").
Bei Webseiten mit einer optionalen Überschrift 1 (die aus Inhaltselementen bestehenden zeilenbasierten Seiten) muss diese unbedingt gesetzt werden. Man kann sie entweder im Feld "Titel, Langform" der zeilenbasierten Startseite eintragen, oder im Hauptinhalt ihres ersten Textelements über dem Text.

Alle anderen im CMS-Editor formatierten Überschriften beginnen mit einer Überschrift 2. Die nächste Ebene ist Überschrift 3, also:

Überschrift 1

Überschrift 2

Überschrift 3

Überschriften brauchen keine zusätzliche Fettmarkierung.

---

Nicht barrierefrei ist eine Textgliederung mit nicht hierarchisch angeordneten Überschriften 1-3 sowie mit Überschriften, die kein Standard-Markup (H1, H2, H3) erzeugen, wie z.B.

Überschrift (Standard fett)

Überschrift (Standard fett kursiv)

Überschrift (Markierung 2 fett)

Überschrift (Einrücken fett)

• Überschrift (Liste, Überschrift 3 fett)
  

Die standardisierte Formatierung für nummerierte, nicht nummerierte und verschachtelte Listen hilft den blinden und sehbehinderten Menschen, den Inhalt wahrzunehmen und den Zusammenhang zu verstehen.

Screenreader lesen Listen und Aufzählungszeichen explizit vor, vorausgesetzt die Listen haben das richtige Markup (UL, OL, LI), also:

Nicht nummerierte Liste:

• Text
• Text

Verschachtelte nicht nummerierte Liste:

• Text
  • Text
  • Text
• Text

Nummerierte Liste:

1. Text
2. Text

Verschachtelte nummerierte Liste:

1. Text
   1. Text
   2. Text
2. Text

---

Nicht standardisierte Formatierung von Listen ist nicht barrierefrei, z.B.

- Text (Bindestrich, Zeilenumbruch)
- Text

1. Text (Zahl, Zeilenumbruch)
2. Text

- Text (Einrücken, Bindestrich, Zeilenumbruch)
- Text

• Text (Einrücken, nicht nummerierte Liste)
• Text

Für sehbehinderte und blinde Nutzer*innen sind Inhalte von Tabellen, die mit dem CMS-Editor erzeugt oder in den Editor hineinkopiert wurden, nur sehr eingeschränkt zugänglich. Der vereinfachte Quellcode der CMS-Tabellen ermöglicht es den Screenreadern nicht, einen Zusammenhang zwischen Zellen und Überschriften zu erkennen. Es werden bloß Spalten- und Zeilennummern vor dem jeweiligen Inhalt vorgelesen.

Datentabellen

Beispiel:

Kontaktdaten

Name	Telefon	E-Mail	Raum
Mustermann, Ralf	-10101	rmuster@xxx.de	109
Mustermann, Max	-01010	maxm@xxx.de	110

Die Tabelle hat eine klare Struktur, korrekt formatierte Überschriften der Spalten sowie eine im Quellcode eingegebene Beschriftung "Kontaktdaten" und eine Zusammenfassung für Screenreader "Ihre Ansprechpartnerinnen und Ansprechpartner im Prüfungsbüro". Mit dem CMS-Editor kann man jedoch keine für Screenreader notwendige Zuordnung von Zellen zu den Überschriften herstellen.

Eine barrierefreie Tabelle würde ein Screenreader wie folgt vorlesen (Doppelpunkt und Komma markieren dabei eine Pause):

Name: Mustermann, Ralf, Telefon: +49 8xx 10101, E-Mail: rmuster@xxx.de, Raum: 109
Name: Mustermann, Max, Telefon: +49 8xx 01010, E-Mail: maxm@xxx.de, Raum: 110

Eine mit dem CMS-Editor erstellte Tabelle würde ein Screenreader so darstellen:

Spalte 1, Zeile 1, Überschrift: Name, Spalte 2, Zeile 1, Überschrift: Telefon...
Spalte 1, Zeile 2: Mustermann, Ralf, Spalte 2, Zeie 2: Minus 10101, ...

Je umfangreicher und komplexer eine Datentabelle ist, desto schwieriger ist es, ihren Inhalt mit einem Screenreader wahrzunehmen. Als Alternative kommen Word-Tabellen in Frage.

Layouttabellen

Layouttabellen werden leider immer noch benutzt, um Inhalte auf einer Webseite zu positionieren.

Beispiel:

Ansprechpartner:	Ralf Mustermann
Tel.:	-10101

Die im CMS erstellten Layouttabellen werden von Screenreadern genauso in Spalten und Zeilen zerlegt wie Datentabellen, was die Wahrnehmung der vorgelesenen Information sehr und unnötig erschwert.

Auf Layouttabellen sollte man verzichten und entweder mit Überschriften und Textmarkierung arbeiten oder ggf. spezielle CMS-Vorlagen nutzen, wie z.B. Institutions-Ordner, Mitarbeiter/innen-Ordner, Publikations-Ordner usw.

In diesem Beispiel wäre eine einfache Textformatierung optimal:

Ansprechpartner: Ralf Mustermann
Telefon: +49 xxx 10101

Information darf nicht allein durch Farben vermittelt werden.

Blinden Menschen, die mit einem Screenreader oder einer Braillezeile arbeiten, und farbblinden Menschen würden Informationen, die nur durch Farbe vermittelt werden, entgehen. Werden Farben für die Textmarkierung eingesetzt, brauchen sie eine Textalternative.

Beispiel:

nicht barrierefrei:	besser:
Antwort 1	Antwort 1 (richtig)
Antwort 2	Antwort 2 (falsch)

Im Corporate Design ist die Verwendung von Farben auf Webseiten reglementiert, weshalb die redaktionelle Textformatierung mit Farben im CMS sehr eingeschränkt ist. Allerdings kann die Textformatierung mit Farben in eingebetteten und verlinkten Inhalten vorkommen.