Semantisches HTML für mehr Barrierefreiheit im Web

HTML ist eine Auszeichnungssprache, die bestimmt, wie Inhalte auf einer Webseite dargestellt werden.

Die Qualität Ihres HTML-Codes ist entscheidend dafür, wie zuverlässig er funktioniert und ob die Inhalte wie gewünscht angezeigt werden. Dies gilt insbesondere für semantisches HTML.

In diesem Blogbeitrag werfen wir einen genaueren Blick darauf, was semantisches HTML ist, wie es funktioniert und wie Sie es gezielt einsetzen können, um Web-Accessibility-Richtlinien besser einzuhalten.

Was ist semantisches HTML?

Im Gegensatz zu nicht-semantischem HTML, das keine inhaltliche Bedeutung vermittelt, übermittelt semantisches HTML die Bedeutung – oder die Semantik – des Inhalts, der in den Tags steht.

Semantische HTML-Elemente können sowohl von Entwicklern als auch von Browsern verstanden werden. Durch das Hinzufügen dieser Tags zu Ihren Webseiten definieren Sie die Rollen und die relative Bedeutung verschiedener Elemente auf Ihren Seiten.

Was sind semantische HTML-Elemente?

Semantische HTML-Elemente geben inhaltliche Hinweise auf die Bedeutung und Funktion des umschlossenen Inhalts.

Ein Beispiel für ein nicht-semantisches HTML-Element wäre <div> oder <span>. Diese Tags sagen nichts über die Art des Inhalts aus.

Demgegenüber gibt es semantische Elemente wie <article>, <form> oder <table>, die sofort klar machen, um welche Art von Inhalt es sich handelt.

Warum semantisches HTML wichtig ist

Im Kern dient semantisches HTML dazu, Ihren Code zu vereinfachen und zu übersichtlicher zu gestalten, um ihn für Benutzer und Suchmaschinen zugänglicher zu machen. Hier sind einige der wichtigsten Gründe, warum es sich lohnt, sich auf semantisches HTML zu konzentrieren.

Verbessert die Barrierefreiheit im Web

Viele Website-Besucher sind auf unterstützende Technologien angewiesen, um auf Inhalte zuzugreifen und mit ihnen zu interagieren. Technologien wie Screenreader nutzen semantisches HTML, um Inhalte zu verstehen, zu verarbeiten und weiterzugeben.

Eine Webseite, die ausschließlich aus nicht-semantischen HTML-Elementen besteht, kann die spezifische Bedeutung verschiedener Abschnitte und deren Zusammenhänge nicht erklären. Hier machen semantische HTML-Elemente den Unterschied.

Beispielsweise werden statt einfacher <div>-Tags für Überschriften und Navigation die semantischen Tags <header> und <nav> verwendet. Das bietet Menschen mit Behinderungen mehr Kontext.

Darüber hinaus sind viele semantische Tags mit der Tastaturbedienbarkeit verknüpft. Erkennt ein Screenreader ein <button>-Element, kann ein Nutzer dieses per Eingabetaste aktivieren. 

Dasselbe gilt für <table>-Elemente, die es Nutzenden ermöglichen, mit den Pfeiltasten zwischen Zellen zu navigieren. 

Durch den Einsatz der richtigen semantischen HTML-Elemente rücken Sie einer barrierefreien und gesetzeskonformen Webseite einen Schritt näher.

Unterstützt SEO-Maßnahmen

Semantisches HTML kann nicht nur zur Einhaltung der Barrierefreiheitsstandards beitragen, sondern sich auch positiv auf Ihre SEO-Bemühungen auswirken.

Semantisches Markup erleichtert Suchmaschinen das Crawlen, Navigieren und Verstehen Ihrer Website. Es zeigt den Crawlern genau, welche Inhalte indexiert werden sollen, und verhindert, dass Zeit mit wiederholten Seitenelementen verschwendet wird.

Erhöht die Lesbarkeit

Entwickler schätzen semantisches HTML, weil es den Code übersichtlicher macht und gezieltes Suchen nach bestimmten HTML-Elementen ermöglicht. Dadurch lassen sich Updates und Verbesserungen schneller und einfacher durchführen.

Wird eine Website von Anfang an mit semantischem HTML erstellt, erleichtert das zudem die spätere Zusammenarbeit mit verschiedenen Entwicklern.

Beispiele für semantische HTML-Tags

Tags für die Struktur:

• <header> & <footer>: Enthalten einleitende Informationen einer Seite oder eines Abschnitts, bzw. Kontaktdaten und Urheberrechtshinweise.

• <nav>: Für Navigationslinks, oft innerhalb von <header> oder <footer> verschachtelt.

• <main>: Einmal pro Seite, kennzeichnet den Hauptinhalt.

• <article>: Definiert einen eigenständigen Inhalt, z. B. einen Blogbeitrag, der auch außerhalb des ursprünglichen Kontexts bestehen kann.

• <section>: Gruppiert thematisch zusammenhängende Inhalte.

• <aside>: Hebt nicht-essentielle Inhalte hervor.

Tags für Text:

• <h1> – <h6>: Überschriften in absteigender Wichtigkeit, <h1> ist die wichtigste.

• <p>: Absatz.

• <a>: Hyperlink.

• <ol> & <ul>: Geordnete (nummerierte) und ungeordnete (Aufzählungspunkte) Listen.

• <q>: Für Zitate (im Fließtext).

• <em> & <strong>: Hervorhebungen wichtiger Inhalte.

• <code>: Markiert Programmcode.
  

Jedes dieser Tags liefert Browsern, Entwicklern und assistiven Technologien mehr Kontext, sofern es in der richtigen Reihenfolge und im richtigen Zusammenhang verwendet wird.

So sollten <h1>, <h2> und <h3> stets in der richtigen Reihenfolge erscheinen. Wird versehentlich ein Header-Tag statt eines <p>-Tags verwendet, kann dies die Effektivität des semantischen HTML mindern und die Barrierefreiheit verschlechtern.

Best Practices für die Verwendung semantischer HTML-Tags

• Tags immer zweckgerecht einsetzen – z. B. <q> nicht nur zum Einrücken von Text nutzen, da Screenreader dies als Zitat vorlesen würden.
  
• Vermeiden Sie unnötige geschützte Leerzeichen (&nbsp;), nutzen Sie stattdessen CSS-Abstände (margin, padding).
• Überschriften richtig einsetzen – in der korrekten Reihenfolge und nicht, um reinen Fettdruck zu erzeugen. Dafür ist CSS zuständig.
• Seiten mit HTML statt rein visueller Gestaltung strukturieren – HTML sollte die Inhaltsstruktur und deren Bedeutung widerspiegeln.

Semantisches HTML und Barrierefreiheit

Durch den gezielten Einsatz von semantischem HTML können Sie eine optisch ansprechende Website erstellen, die für alle Nutzenden zugänglich ist und in den Suchergebnissen gut abschneidet.

Semantisches HTML vereinfacht und verbessert den Code, sodass alle Seitenelemente korrekt identifiziert und problemlos aktualisiert werden können. Gleichzeitig erhalten Nutzern mit Behinderungen vollen Zugang zu den Inhalten.

Wenn Sie diese Best Practices befolgen und sich mit den gängigsten semantischen HTML-Tags vertraut machen, können Sie eine Website betreiben, die auf allen Ebenen überzeugt.

FAQs