Was ist der Unterschied zwischen Semantik und…

Semantik hilft Maschinen (Browser, Parser, Suchroboter), die Struktur und den Sinn des Inhalts zu verstehen. Barrierefreiheit (a11y) zielt darauf ab, dass Inhalte für Menschen mit unterschiedlichen physischen oder kognitiven Einschränkungen, die unterstützende Technologien verwenden, verständlich und nutzbar sind.

Semantische Tags

Die Verwendung semantischer HTML-Tags wie <article>, <nav>, <aside>, <footer>, <h1>-<h6> verleiht den Elementen der Seite eine sinnvolle Bedeutung. Zum Beispiel:

<article>
  <h2>Artikelüberschrift</h2>
  <p>Artikeltext...</p>
</article>

Dies hilft Browsern, die Struktur des Dokuments korrekt zu interpretieren.

Barrierefreiheit (a11y)

Barrierefreiheit umfasst viele Aspekte:

Semantik: Die richtige Verwendung semantischer Tags ist bereits Teil der Barrierefreiheit, da sie assistiven Technologien (Screenreadern) helfen, die Struktur und Funktion der Elemente zu verstehen.
ARIA-Attribute: Zusätzliche Attribute wie aria-label, aria-describedby, aria-hidden, role liefern zusätzliche Informationen für assistive Technologien, wenn HTML-Semantik nicht ausreicht.
```
<button aria-label="Dialog schließen">
  <img src="close.svg" alt="">
</button>
```
Kontrast: Ausreichender Kontrast zwischen Text und Hintergrund für sehbehinderte Menschen.
Tastaturnavigation: Möglichkeit, die Seite mit der Tastatur zu navigieren und mit Elementen zu interagieren.
Alternativtext für Bilder (alt): Beschreibung des Bildinhalts für Nutzer, die es nicht sehen.
```
<img src="cat.jpg" alt="Schwarze Katze schläft auf der Fensterbank.">
```
Struktur der Überschriften: Logische Hierarchie der Überschriften (<h1> - <h6>) für eine einfache Navigation mit Screenreadern.

Beziehung

Semantik ist eine wichtige Grundlage für Barrierefreiheit. Eine gut strukturierte Seite mit semantischen Elementen ist deutlich einfacher barrierefrei zu gestalten. Allerdings reicht Semantik allein nicht aus – oft sind zusätzliche Maßnahmen erforderlich, wie ARIA-Attribute, Fokusmanagement und ausreichender Kontrast.

Aspekt	Semantik	Barrierefreiheit (a11y)
Ziel	Sinnvolle Bedeutung für Elemente schaffen	Verständnis und Nutzung des Inhalts für alle
Werkzeuge	HTML-Tags (`<nav>`, `<article>`, `<h1>`...)	Semantik, ARIA, Kontrast, Fokus, `alt`-Text u.a.
Benutzer	Browser, Parser, Suchmaschinen	Menschen mit unterschiedlichen Bedürfnissen, unterstützende Technologien

Was ist der Unterschied zwischen Semantik und Barrierefreiheit (a11y)?