Korrekte semantische Struktur in Texten

Bei meiner Arbeit als Lehrbeauftragte bzw. Gastdozentin an der Beuth-Hochschule habe ich mehrfach die korrekte semantische Struktur in Texten vermisst. Wobei die Wahl des Programme an sich irrelevant ist, der Inhalt in diesem Dokument zielt auch ganz eindeutig auf Google Docs und alle anderen Texteditoren, die dazu geeignet sind, Texte semantisch zu strukturieren.

Zunächst einmal: ich bin keine Linguistin. Als solche würde ich den Begriff erst mal grundsätzlich sezieren. Als Designerin verlinke ich dafür lieber auf die entsprechende Seite in der Wikipedia.

Was bedeutet korrekte semantische Struktur in Texten für die Barrierefreiheit von Webseiten?

Ich bin Web-Designerin und als solche immer wieder damit konfrontiert Texte visuell zu strukturieren.

Gerade – aber nicht nur – im Webdesign reicht es nicht, einzelne Wörter größer oder bold zu machen. Damit meine visuelle Struktur auch für Menschen mit visuellen Beeinträchtigungen erkennbar sind muss die Struktur des Textes sauber ausgezeichnet werden. Nur dann können Screenreader das was sonst visuell übertragen wird auch inhaltlich übertragen.

Für die Auszeichnung habe ich im HTML verschiedene Optionen:

• Überschriften in verschiedenen Hierarchiestufen <h1>, <h2> … <h6>
• Paragraphen mit den einzelnen Text-Absätzen ¹
• Listen – hier gilt es strukturierte (aka nummerierte) und unstrukturierte (unnummerierte) zu unterscheiden. Listen können als Listeneinträge auch weitere, darin verschachtelte Listen enthalten. Diese kommen insbesondere bei Navigationen mit mehreren Hierarchieebenen zum Einsatz.
• Abbildungen bzw. Medien (Grafiken, Fotos, Videos) mit Bildunterschriften.
• Links (intern und extern) und Querverweise innerhalb einer Seite
• …

Hervorhebungen von Text-Stellen

In der obenstehenden Liste habe ich etwas gemacht, das schnell mal erledigt ist, im Web aber zusätzliche Beachtung braucht: Spezielle Passagen und Wörter können optisch hervorgehoben werden. Das ist in einigen Fällen ausreichend, jedoch wie gesagt nur optisch.

• Der Bold-Tag <b> zeichnet Text in fetter Schrift aus.
• Der Italic-Tag <i> zeichnet Text in kursiver Schrift aus.

Oder sie werden semantisch hervorgehoben, was für Screenreader (und Suchmaschinen) besser ist:

• Der Strong-Tag <strong> hebt die (Ge-)Wichtigkeit des Textes hervor.
• Der Emphasise-Tag <em> betont Text. Screenreader lesen ihn entsprechend mit anderer Betonung vor.

Generell möchte ich alle Autoren ermutigen, Bold als Auszeichnung zu nutzen, um das Auge des Lesers zu lenken und die wichtigen Stichpunkte hervorzuheben – wenn es zum Text generell passt. Zu viel Text in Bold ist natürlich schon wieder kontraproduktiv.

Korrekte semantische Struktur in Texten – Möglichkeiten und Grenzen in WordPress

Jedes Content-Management-System bringt eigene Besonderheiten und Restriktionen mit.

Strong statt bold

In WordPress ist z.B. zu beobachten, dass <b> nicht vorgesehen ist, auch wenn die Schaltfläche mit dem „B“ und dem Tooltipp „Fett ⌘B“ dies vermuten lässt. Statt dass hier differenziert werden kann ob ein Text nur visuell, oder auch semantisch stark ausgezeichnet werden soll hat WordPress entschieden, alles mit <strong> (bzw. <em>) auszuzeichnen. Dieses Vorgehen ist sicherlich sinnvoll, besser als alles nur visuell auszuzeichnen.

Verschachtelte Listen

1. Listen können verschiedene Ebenen
   • mit mehreren Unterpunkten
     • enthalten.
       • Vier Ebenen sind hier möglich!
   • Es geht auch, nach einer eingeschobenen Zusatzliste wieder auf der nächsthöheren Ebene weiter zu schreiben.
2. mit verschiedene Bedeutungstiefen enthalten.
3. Nachträgliche Änderungen an der Hierarchie sind allerdings
   1. herausfordernd,
      • weil dabei Punkte hin und her springen
   2. nervig
      • weil dabei Punkte hin und her springen.

Alternativ-Texte bei Bildern und Links

Bei Bildern ist der Einsatz von Alternativ-Texten und Beschreibungen für Suchmaschinen, vor allem aber auch für Menschen mit Seheinschränkungen wichtig. Beide Informationen können in WordPress problemlos angelegt werden. Es bleibt aber zu beachten, dass es darauf ankommt, wo diese Informationen eingegeben werden:

1. Werden die Meta-Informationen vor dem Einfügen des Bildes in der Mediathek hinterlegt, so sind sie auf allen Seiten vorhanden, auf denen das Bild danach eingebunden wird.
2. Werden die Meta-Informationen nach dem Einfügen des Bildes in den Settings des Bildes im Beitrag oder auf der Seite erst editiert, so sind sie in dieser Form nur in dieser Instanz vorhanden.

Außerdem sollten Bilder natürlich einen deskriptiven Namen (außerdem alles in Kleinbuchstaben, ohne Leerzeichen, nicht zu lang) erhalten bevor sie hochgeladen werden. Ohne Spezial-Plugins ist der Bildname später in WordPress nicht mehr korrigierbar.

Alternativ-Texte bei Links

Alternativ-Texte, die das Ziel von Links beschreiben sind in WordPress nicht vorgesehen. Hier kommt es vor allem darauf an, dass der verlinkte Text selbst aussagekräftig getextet wird, damit ein Rückschluss auf das Link-Ziel gezogen werden kann!

Weitere semantische Struktur-Auszeichnungen, die vom Web-Entwickler gesteuert werden

Die oben genannten Auszeichnungen sind nur für reinen Text. Als Webentwicklerin kann ich außerdem verschiedenen Bereichen der Webseite generell verschiedene Funktionen zuordnen:

• Head – Enthält zumeist die Seitenkennung, oft auch die Nav.
• Nav – Eine Liste von Navigationspunkten.
• Main – Der Bereich in dem der eigentliche Hauptinhalt steht.
• Aside – Zusatzinformationen.
• Footer – Der Bereich für Rechtliche Informationen.

Was bedeutet Semantische Struktur in Texten für wissenschaftliche Arbeiten?

Arbeitserleichterung.

Ja richtig! Natürlich müssen die Stile korrekt vergeben werden. Aber wenn sie es erst mal sind, dann kann ein vernünftiges Textverarbeitungssystem mit den semantischen Daten was anfangen:

• Inhaltsverzeichnis erstellen.
• Text-Stile für semantisch gleiche Elemente zentral ändern.
• Querverweise z.B. zu Glossareinträgen werden leichter handelbar.
• Der Anzeigeort von Fußnoten kann zentral umgestellt werden²

Überschriften und Satzzeichen

Eine Überschrift kommt in der Regel ohne schließendes Satzzeichen aus, aber wie immer kommt es auch hier drauf an:

• Fragezeichen und Ausrufezeichen sind natürlich erlaubt und je nach Aussage auch sinnvoll.
• Punkte hingegen sind eher überflüssig.
• Semikolons ergeben in einer Überschrift keinen Sinn.
• Doppelpunkte sind sogar kontraproduktiv – wenn sie Teil einer Überschrift sind werden sie auch für das Inhaltsverzeichnis übernommen, wo sie fehl am Platz sind.

Von Word zu WordPress

Die gute Nachricht: die korrekte semantische Struktur in Texten wird weitgehend übernommen!

Word-Kommentare in WordPress

Allerdings sollten Kommentare in Word zunächst gelöscht werden, sofern es nicht gewünscht ist, dass sie am Ende der Seite als Fußnoten verlinkt werden. Wenn genau das Ziel ist, ist es hingegen eine einfache Möglichkeit, sie zu erstellen.

Bold und Kursiv: im Fließtext unproblematisch

Bold und Kursiv werden übernommen und auch korrekt in <strong> und <em> umgewandelt. Dies gilt allerdings nicht für die H1-Überschrift. Da werden stattdessen die Tags als Text angezeigt:

Empfehlung

Ganz davon abgesehen, dass Quellenangaben und weitere rechtliche Rahmenbedingungen zu beachten sind empfehle ich, bereits im Studium bei jedem Dokument den Einsatz von Semantik zu trainieren.

Wenn es nicht bei Bachelor oder Master bleiben soll, sondern eher in Richtung hochwissenschaftlicher Doktor-Arbeit geht sollte rechtzeitig die Arbeit mit LaTex trainiert werden. Aber das ist ein ganz anderes Kaliber um korrekte semantische Struktur in Texten zu setzen…

Fußnoten

1. die Verwendung von weichen Umbrüchen und Leerzeichen entspricht keiner klaren Semantik▲
2. hier sind Textverarbeitungsprogramme HTML gegenüber im Vorteil, mangels eigener Spezifikation wird hier dazu geraten, eine Kombination von <sup> und händischer Verlinkung zu nehmen. ▲