UX: Wie SEO die Barrierefreiheit unterstützt [Teil 2]

Semantisches HTML dient sowohl der Suchmaschinen-Optimierung als auch der Barrierefreiheit eines Online-Auftritts. Wie hängt die Bedeutungslehre (Semantik) mit der textbasierten Auszeichnungssprache "Hypertext Markup Language" (HTML) zusammen? Die Antwort gibt es in diesem zweiten Teil meines Specials zum Thema barrierefreies Website-Design.

Illustration von Software-Code auf einem Bildschirm

Quelle: Pixabay

Der erste Teil von "UX: Wie SEO die Barrierefreiheit unterstützt" (Link am Beitragsende) fokussierte folgende Punkte:

Sommer 2025: Das Barrierefreiheitsstärkungs-Gesetz tritt in Kraft
UX: Was sind die "Web Content Accessibility Guidelines" (WCAG)?
So unterstützt SEO die Barrierefreiheit

Dieser zweite Teil konzentriert sich auf das Thema semantisches HTML, das sowohl die Barrierefreiheit als auch die Suchmaschinen-Optimierung unterstützt. Vorhang auf:

Was ist semantisches HTML?

Wikipedia, übernehmen Sie:
"Semantik (von altgriechisch [...] sēmaínein, deutsch 'bezeichnen, ein Zeichen geben'), auch Bedeutungslehre genannt, ist die wissenschaftliche Beschäftigung mit Bedeutung [...]."

Heißt für unser Thema: Semantische HTML-Tags benennen die Bedeutung des Inhalts, den sie im Code auszeichnen.

Machen wir es über eine Abgrenzung deutlicher und blicken zunächst auf zwei nicht-semantische HTML-Tags:

Zwei Beispiele für nicht-semantische HTML-Tags

➤ 1. <div> (engl. division, "Bereich"): Dieses HTML-Tag schafft im Webseiten-Quellcode Bereiche ohne semantischen Wert. Es erzeugt einzig einen Raum für die Formatierungssprache CSS, mit der ihr zum Beispiel Farben und Schriftarten auf der Webseite bestimmt. Es geht einzig um Design, nicht um Bedeutung. CSS steht für Cascading Style Sheets ("gestufte Gestaltungsbögen").

➤ 2. <span> (engl. span, ebenfalls "Bereich"): Während sich <div> immer auf einen ganzen HTML-Block bezieht (z. B. einen Absatz), schafft das HTML-Tag <span> innerhalb einer einzelnen Zeile ("inline") einen Gestaltungsraum ohne Bedeutungsbezug.

➤ Ein Beispiel für 1. <div>:

Dieser HTML-Code ...

<div style="background-color:yellow;"> Das ist ein gelber Block. Er zeigt, wie ein div-Tag als nicht-semantisches HTML-Tag funktioniert und sich dabei immer auf einen ganzen Block bezieht.</div>
<div style="background-color:lawngreen;"> Und das ist ein grüner Block. Er zeigt ebenfalls, wie ein div-Tag als nicht-semantisches HTML-Tag funktioniert und sich dabei immer auf einen ganzen Block bezieht.</div>

… erzeugt diese Darstellung (für eine größere Ansicht in das Bild klicken):

Beispiel eines mittels div-Tags erstellten gelben und grünen Textblocks

➤ Und folgend ein Beispiel für 2. <span>:

Dieser HTML-Code ...

Das ist ein <span style="color: blue;">blaues Wort</span> und das ist ein <span style="color: green;">grünes Wort</span>. Das ist ein Beispiel für ein nicht-semantisches span-Tag. Es schafft Raum für nicht-semantische Gestaltungen innerhalb einer einzigen HTML-Zeile – und nicht wie das div-Tag bezogen auf einen ganzen HTML-Block.

… erzeugt diese Darstellung (für eine größere Ansicht in das Bild klicken):

Beispiel mittels span-Tags erstellter blauer und grüner Schriftfarbe

➤ Soweit zwei Beispiele für nicht-semantische HTML-Tags: <div> und <span> haben keinen Bezug zur Bedeutungsebene des Inhalts. Sie schaffen nur Bereiche für das Design.

Kommen wir jetzt zu Beispielen für semantisches HTML – zum einen bezogen auf Struktur, zum andern auf Text:

Beispiele für semantische HTML-Tags (Struktur)

1. <header>: Dieses HTML-Tag definiert die Bedeutung eines Webseiten-Inhalts als Meta-Daten des HTML-Dokuments (z. B. Title-Tag und Meta-Description).

2. <nav>: Dieses HTML-Tag definiert die Bedeutung eines Webseiten-Inhalts als Navigationsleiste bzw. Menü.

3. <main> definiert den Hauptinhalt ("body") einer Webseite.

4. <aside> definiert Inhalte einer Webseite als Randinformationen (z. B. in der Seitenleiste).

5. <footer> definiert die Bedeutung eines Inhalts als Information am Seitenende (z. B. Impressum, Datenschutzhinweise).

Beispiele für semantische HTML-Elemente (Text)

1. <h1> (heading) definiert den Inhalt einer Headline als Hauptüberschrift einer Seite.

2. <h2> bis <h6> (subheadings) definieren hierarchisch abgestuft Zwischenüberschriften einer Webseite.

3. <p> (paragraph) definiert einen Inhalt als Absatz auf einer Webseite.

4. <a> (anchor) definiert eine Verlinkung innerhalb eines Webseiten-Textes.

5. <ol> (ordered list) definiert eine nummerierte Aufzählungsliste innerhalb eines Webseiten-Textes. <li> (list item) definiert dabei die einzelnen Aufzählungspunkte.

6. <ul> (unordered list) definiert eine Aufzählungsliste ohne Nummerierung (Bullet Points). Auch hier definiert <li> (list item) die einzelnen Aufzählungspunkte.

7. <q> / <blockquote> definieren Zitate innerhalb eines Webseiten-Textes. Ersteres gilt für einzeilige Zitate (inline), letzteres gilt für mehrzeilige Zitate.

8. <strong> (strong emphasis) betont die Bedeutung eines Textes auf einer Webseite sehr stark.

➤ Eine komplette Übersicht zu allen semantischen HTML-Tags findet ihr unten als Link-Tipp.

So unterstützt semantisches HTML die Barrierefreiheit und die Suchmaschinen-Optimierung

Ein Screenreader ist ein Programm, das sehbehinderten User*innen die Inhalte einer Webseite vorliest. Je detaillierter ihr semantisches HTML nutzt, desto genauer kann der Screenreader darüber informieren, um welche Webseiten-Inhaltsbereiche es sich handelt.

Semantisches HTML erleichtert es auch Google zu verstehen, welcher Bereich der Seite wofür steht (Kopfbereich, Haupttext, Fußzeile, etc.). Heading-Tags sind zudem Rankingfaktoren (vor allem <h1>).

SEO & UX: Ein starkes Duo

Google betont immer wieder, dass Website-Betreiber*innen bestmögliche Inhalte für Nutzer*innen erstellen sollen. Daraus ergibt sich eine große Schnittmenge zwischen SEO und der User Experience (UX) im Allgemeinen – sowie der Barrierefreiheit im Speziellen.

Nicht nur vor dem Hintergrund des 2025 in Kraft tretenden Barrierefreiheitsstärkungs-Gesetzes sind barrierefreie Online-Auftritte erstrebenswert: Es profitieren ausnahmslos alle User*innen davon – genauso wie die Optimierung für Suchmaschinen.

Ich wünsche euch viel Erfolg beim Abbauen von Barrieren auf eurer Website. ;-)

Link-Tipps:

Diesen Blog durchsuchen

Der Onliner – Marketing & Wirtschaft 4.0