Die meisten Texte haben eine Struktur: Sie bestehen aus Kopfzeilen, Untertiteln, Abschnitten, Aufzählungen, Zitaten, Wörtern oder Wortgruppen, die hervorgehoben werden. Besucher, welche die Webseite sehen können, wissen direkt, wo die Titel sind, wo sich die Aufzählungen befinden und wann es sich um ein Zitat handelt. Die visuellen Effekte zeigen dies deutlich. Besucher, die eine Assistenztechnologie verwenden, benötigen andere Anhaltspunkte, um die Bedeutung von Textelementen zu verstehen.

Durch Angabe der Struktur von Texten mit den richtigen HTML-Elementen wird die Bedeutung der Teile nicht nur in der visuellen Gestaltung übertragen. Dies macht es für Browser und Hilfstechnologien wesentlich einfacher, den Text den Besuchern auf eine andere Art und Weise anzubieten, ohne die Struktur zu verändern. Zum Beispiel in hohem Kontrast, in Blindenschrift oder als gesprochener Text.

Darüber hinaus verwenden Suchmaschinen diesen HTML-Code auch, um festzustellen, welche Teile eines Textes wichtig sind. Schlagzeilen zum Beispiel enthalten oft wichtige Schlüsselwörter. Dies erleichtert das Auffinden von Webseiten in Suchmaschinen.

Wie wendet man das an?

Die Assistenztechnologie analysiert die zugrunde liegende Struktur und die HTML-Elemente, die zur Angabe der Bedeutung von Textelementen verwendet werden. Diese HTML-Struktur ermöglicht es der Assistenztechnologie, dem Benutzer die Bedeutung der Elemente zu vermitteln. Um die richtigen HTML-Elemente in Texten zu verwenden, wird am besten mit der Editor-Symbolleiste für die folgenden Elemente gearbeitet:

  • Header (Kopfzeilen, Überschriften)
  • Absätze
  • Zitate
  • Aufzählungen, nummerierte Listen und Definitionslisten
  • Fokus: fett gedruckt oder kursiv

Fall 1: Header (Kopfzeile, Überschrift)

In den meisten Editoren können Sie einen Text auswählen und angeben, dass es sich um eine Überschrift handelt. Sie können auch die Ebene des Headers (der Kopfzeile/ Überschrift) angeben. Achten Sie darauf, dass Sie die Ebenen in der richtigen hierarchischen Reihenfolge verwenden.

Der Titel der Seite ist in der Regel ein Header der ersten Ebene (das <h1> Element). Normalerweise wird es vom CMS automatisch in das <h1> Element oben auf der Seite platziert. Das bedeutet, dass die Überschriften im Text auf der zweiten Ebene (dem Element <h2>) liegen müssen. Die darunter liegenden Kopfzeilen werden auf der dritten Ebene platziert, usw.

Als HTML-Code sieht das dann so aus:

<h2>Dies ist ein Zwischentitel auf zweiter Ebene</h2>
<h3>Dies ist ein Zwischentitel der dritten Ebene</h3>
 

Hinweis

Es ist daher unerlässlich, Überschriften immer mit einem HTML-Element (<h1> oder <h2>,…) und nicht nur mit einem Design zu markieren, damit die Unterstützungstechnologien den Titel, den Untertitel usw. Erkennen ... und lesen können. Umgekehrt sollten Sie einen Text, der keine Überschrift ist, nicht nur aus Designgründen als Überschrift markieren.

Fall 2: Abschnitte

Häufig macht der Editor automatisch einen Absatz aus Ihrem Text, wenn Sie mit der Eingabe beginnen. Dazu muss das Element <p> verwendet werden. Stellen Sie sicher, dass dies geschieht. Wenn nicht, müssen Sie die Absätze im Editor mit der rechten Maustaste markieren. Auch nach der Markierung einer Überschrift müssen Sie oft angeben, dass der folgende Text ein anderer Absatz ist.

Im HTML-Code sieht ein Absatz so aus:

<p>Dies ist ein Absatz...</p>

Fall 3: Keine Leerzeilen

Visuell können Sie einen Text in Absätze unterteilen, indem Sie Leerzeilen dazwischensetzen. Wenn Sie das Element <p> verwenden, geschieht dies in der Regel automatisch, über den Browser oder über die Styles (Stile) in der CSS-Datei der Webseite.

Sie können auch Leerzeilen mit dem Element <br> erzeugen, ohne dabei unbedingt Absätze zu kennzeichnen.

  • Beispiele: eine Adresszeile oder Gedichte

Fall 4: Zitate und Quellangaben

Zitate werden oft als separate Blöcke in einem laufenden Text dargestellt. Mit dem Element <blockquote> können Sie angeben, dass es sich um ein Zitat handelt. Es gibt auch ein HTML-Element für die Quellangabe, nämlich das <cite> Element.

Ein Zitat mit der Quelle kann daher im HTML-Code so aussehen:

<blockquote>
<p>Die Lebenskunst besteht darin, zu Hause zu sein, als ob man auf Reisen wäre.</p>
<cite>Godfried Bomans</cite>
</blockquote>

Fall 5: Aufzählungen und nummerierte Listen

Aufzählungen und nummerierte Listen können mit den Schaltflächen des Editors erstellt werden. Je nach Wahl werden Aufzählungszeichen oder Zahlen für die Punkte in der Liste angezeigt.

Für Aufzählungen wird das Element <ul> verwendet. Dies steht für „ungeordnete Liste“. Wenn Sie eine Aufzählung auf diese Weise erstellen, wird jedem Element ein Gliederungspunkt vorangestellt. So sieht es im HTML-Code aus:

<ul>
<li>Erster Teil der Aufzählung.</li>
<li>Zweiter Teil der Aufzählung.</li>
<li>...</li>
</ul>

Bei nummerierten Listen wird das Element <ol> verwendet: Dies steht für „geordnete Liste“. Wenn Sie auf diese Weise eine nummerierte Liste erstellen, wird jedem Element eine Nummer vorangestellt. Im HTML-Code sieht eine nummerierte Liste so aus:

<ol>
<li>Erster Teil der nummerierten Liste.</li>
<li>Zweiter Teil der nummerierten Liste.</li>
<li>...</li>
</ol>
 

Hinweis: Erstellen Sie stets eine echte Liste

Wenn man jedes Wort einfach auf eine neue Zeile setzt, der ein Bindestrich vorangestellt ist (oder ein Sternchen, oder...), ergibt sich keine echte Liste. Für Besucher, die assistierende Technologien verwenden, ist es nicht mehr als eine Mischung aus Bindestrichen und Wörtern. Nur mit dem richtigen HTML-Code (oder der Schaltfläche im Editor) können Sie eine echte Liste erstellen.

Fall 6: Definitionslisten und andere Namenswertlisten

Bei einem Lexikon oder Glossars wird jeder Name, jedes Wort bzw. jeder Begriff seinem eigenen Html-Element zugewiesen .

  • <dl> (Definitionszeile) zeigt an, dass eine Reihe von Definitionen gestartet wird. Diese Reihe wird mit </dl> beendet.
  • <dt> (Definitionsbegriff) zeigt den zu definierenden Begriff an. Der Begriff wird mit </dt> beendet.
  • <dd> (Definitionsbeschreibung) zeigt an, dass mit der Definition des Begriffs begonnen wurde. Die Beschreibung wird mit </dd> beendet.
<dl>
<dt>Browser</dt>
<dd>Ein Computerprogramm zum Anzeigen von Webseiten.</dd>
<dt>Weblog</dt>
<dd>Eine Webseite, die regelmäßig aktualisiert wird, ähnlich wie ein Tagebuch.</dd>
</dl>

Nicht alle Editoren haben eine Schaltfläche, um diese Art von Liste einzufügen. Häufig wird vom CMS automatisch ein Glossar erstellt. In diesem Fall muss der Ersteller die HTML-Elemente für eine Definitionsliste verwenden.

Fall 7: Hervorhebung

Wenn Sie Wörter oder Phrasen hervorheben wollen, tun Sie dies oft, indem Sie sie fett, oder kursiv setzen. Wenn der Editor korrekt eingerichtet ist, gibt es dafür Schaltflächen, damit die richtigen HTML-Elemente verwendet werden.

Ein hervorgehobenes Wort kann so aussehen:

Rufen Sie <em>sofort</em> einen Arzt!

Ein wichtiges Wort kann auch so aussehen:

<strong>Bitte beachten Sie</strong>: Dies ist kein Trinkwasser.

Die Lese-Software kann Wörter anders aussprechen, wenn die Betonung mit den richtigen HTML-Elementen angegeben wird. Auf diese Weise kann die durch das Design sichtbare Bedeutung (fett oder kursiv) auch von Besuchern wahrgenommen werden, die assistierende Technologien einsetzen.

Für Redakteure

Der Redakteur muss sicherstellen, dass die Schaltflächen korrekt verwendet werden, damit die Struktur des Textes korrekt ist.

Für Entwickler

Im CMS ist der Entwickler für die Einrichtung des Editors verantwortlich, im Idealfall gibt es Schaltflächen zur Kennzeichnung aller oben genannten Textabschnitte, soweit sie für die jeweilige Webseite gelten.