1.3.1 Info und Beziehungen

WCAG - Definition

Informationen, Struktur und Beziehungen, die visuell vermittelt werden (z. B. durch Position, Farbe, Größe), müssen programmatisch verfügbar sein oder durch Text vermittelt werden.

Bedeutung

Ein blinder oder sehbehinderter Nutzer sieht nicht, ob etwas:

  • eine Überschrift ist (weil größer und fett)
  • zu einer Gruppe gehört (weil gruppiert dargestellt)
  • ein Pflichtfeld ist (weil Sternchen steht)
  • als Fehler markiert ist (nur rote Farbe)

Diese Bedeutungen müssen für Screenreader, Sprachausgabe und andere Assistive Technologien erkennbar im Code sein.

Ausreichende Techniken

H42 – Verwendung von Überschriftenelementen <h1> bis <h6>

<h1>Willkommen</h1>
<h2>Unsere Produkte</h2>
<h3>Produktkategorie: Möbel</h3>
  • Überschriftenstruktur muss logisch und hierarchisch sein.
  • Nicht einfach <div class="headline"> verwenden – das sieht aus wie Überschrift, ist aber keine.

H44 – Beschriftung von Formularfeldern mit <label>

<fieldset>
<legend>Lieferoptionen</legend>
<label><input type="radio" name="lieferung" value="standard"> Standard</label>
<label><input type="radio" name="lieferung" value="express"> Express</label>
</fieldset>

Screenreader liest: „Gruppe: Lieferoptionen. Standard. Express.“

H65 – Verwenden von aria-labelledby oder aria-describedby, um Beziehungen herzustellen

<div id="titel">Produktdetails</div>
<div id="beschreibung" aria-labelledby="titel">
  <p>Maße: 50x50 cm, Material: Holz</p>
</div>

Beratungstechniken

G115 - Verwendung von semantischen HTML-Elementen (<article>, <nav>, <section>, <aside>)

G117 - Listen visuell und semantisch kennzeichnen (<ul>, <ol>, <dl>)

G131 - Tabellen mit korrekten scope, th, caption

G141 - Pflichtfelder zusätzlich mit Text oder aria-required="true" kennzeichnen

G166 - Beschreibung komplexer Beziehungsstrukturen zusätzlich im Text (z. B. bei Diagrammen)

Typische Fehler

  • Verwendung von visuellen Hinweisen (z. B. Farbe, Position), ohne semantische Kennzeichnung
  • Gruppierte Felder nicht mit <fieldset> versehen
  • Pflichtfelder nur durch * oder Farbe gekennzeichnet, aber nicht programmatisch
  • Formularelement ohne Label oder aria-label
  • Verwendung von Tabellen für Layout-Zwecke, ohne Strukturangabe