Skip to content

Semantische Struktur

Die semantische Struktur hilft Nutzern von Screenreadern und anderen Assistenztechnologien, zu erkennen, was ein Ding ist. Den Zugänglichkeitsbaum habe ich bereits früher in diesem Kurs erwähnt. Elemente mit Bedeutung kommen in den Zugänglichkeitsbaum.

Dinge, die nicht im Zugänglichkeitsbaum sind, sind zum Beispiel:

  • <div>

  • <span>

  • <p>

  • CSS-Hintergrundbilder

  • Farben

  • Und Stile

Semantische Elemente bestehen aus drei Teilen.

  • Name

  • Rolle

  • Wert

Ein Element hat einen Namen. Dieser Name steht in Verbindung mit Text. Beispiele sind Überschriften oder Bildunterschriften.

Die Rolle ist eine Art Element, z. B. Link, Tabelle, Überschrift.

Der Wert kann eine Eigenschaft oder ein Zustand sein. Wir erklären ARIA und benutzerdefinierte Komponenten später genauer. Es ist wichtig, dass die Struktur von Programmen auch für Screenreader verständlich ist. Wenn etwas wie eine Überschrift aussieht, aber keine ist, oder wie eine Tabelle, aber keine ist, sind es Fälschungen. Sie haben keine Bedeutung und Screenreader-Benutzer wissen nicht, was sie sind.