WCAG & BFSG · WCAG-Referenz: Wahrnehmbar

WCAG 1.3.3: Sensorische Eigenschaften

WCAG 1.3.3 verlangt, dass Anweisungen zum Verstehen und Bedienen von Inhalten nicht allein auf sensorische Merkmale zeigen – also nicht nur auf Form, Größe, visuelle Position, Ausrichtung, Farbe oder Klang. Solche Hinweise bleiben erlaubt, brauchen aber immer zusätzlich ein Merkmal, das ohne Sehen und Hören funktioniert, in aller Regel die Beschriftung des Elements.

(Englisch: Sensory Characteristics. Der BIK-BITV-Test nennt den Prüfschritt „Ohne Bezug auf sensorische Merkmale nutzbar“.)

Stufe Prinzip Teil der WCAG seit Rechtlich verbindlich?
A Wahrnehmbar 2.0 (2008) Ja – über EN 301 549 in BFSG & BITV

Das Wichtigste in Kürze

  • Sechs Merkmale nennt der Normtext: Form, Größe, visuelle Position, Ausrichtung, Farbe und Klang.
  • Verboten ist nicht der Hinweis, sondern seine Alleinstellung. „Der Knopf ‚Weiter‘ unten rechts“ ist einwandfrei – „der Knopf unten rechts“ nicht.
  • Der Anker ist fast immer die Beschriftung. Wenn ein Element keine hat, ist das der eigentliche Befund.
  • Der Prüfschritt ist immer anwendbar – es gibt keine Seite, für die er entfällt.
  • Kein Werkzeug findet das. 1.3.3 ist ein redaktioneller Prüfschritt, der über eine Textsuche nach Signalwörtern läuft.
  • Der BITV-Test bezieht Alternativtexte ein: Auch eine Grafik darf nicht nur über Farbe oder Position erklärt werden.
  • Responsives Layout verschärft das Problem: „rechts“ ist auf dem Telefon „unten“, und „nebenan“ ist dann „darunter“.
  • 1.3.3 und 1.4.1 überschneiden sich: Farbe in einer Anweisung fällt unter beide Kriterien.

Was verlangt das Kriterium?

Anweisungen sind alle Texte, die erklären, wie etwas funktioniert: Hilfetexte, Formularhinweise, Onboarding-Schritte, Bildunterschriften, Fehlermeldungen, Tooltips, das Kleingedruckte unter einem Feld. Sie dürfen sich auf Aussehen und Klang beziehen – aber nie ausschließlich.

Der Grund ist einfach: Ein sensorisches Merkmal ist eine Eigenschaft der Darstellung, keine Eigenschaft des Inhalts. Es verschwindet, sobald sich die Darstellung ändert. Ein blinder Nutzer bekommt die Farbe nicht, ein Vergrößerungs-Nutzer sieht die Position nicht, ein gehörloser Nutzer hört den Signalton nicht – und auf dem Telefon ist „rechts“ ohnehin meist „unten“.

Der Prüfschritt des BITV-Tests nennt als typische Verstöße wörtlich: „Klicken Sie auf den grünen Knopf“, „über die runde Taste“, „der rot eingerahmte Kasten“, „Menü rechts“, „breite Spalte“ und „rechtsbündige Absätze“. Man merkt an der Liste, wie alltäglich die Formulierungen sind – sie entstehen nicht aus Nachlässigkeit, sondern weil die Autorin beim Schreiben auf den Bildschirm schaut.

Die Reparatur ist immer dieselbe Bewegung: Merkmal ergänzen, nicht ersetzen.

Statt … … besser
„Klicken Sie rechts.“ „Klicken Sie auf ‚Weiter‘ (rechts unten).“
„Füllen Sie die roten Felder aus.“ „Füllen Sie die mit ‚Pflichtfeld‘ markierten Felder aus.“
„Wählen Sie im Kasten unten links …“ „Wählen Sie im Abschnitt ‚Zahlungsart‘ …“
„Nach dem Signalton fortfahren.“ „Nach dem Signalton und der Meldung ‚Aufnahme läuft‘ fortfahren.“
„Siehe Grafik oben.“ „Siehe Abbildung 2: Aufbau eines Prüfberichts.“

Der vollständige Wortlaut steht im Understanding-Dokument des W3C zu 1.3.3; das deutsche Prüfvorgehen beschreibt der Prüfschritt 1.3.3 des BIK BITV-Tests.

Drei Zeilen mit je zwei gegenübergestellten Formulierungen. Erste Zeile links rot: Klicken Sie auf den grünen Knopf rechts oben, Anmerkung nur Farbe und Position. Rechts grün: Klicken Sie auf Bestellung abschließen, in Klammern oben rechts, Anmerkung Beschriftung als Anker, Position bleibt als Zugabe. Zweite Zeile links rot: Füllen Sie die rot markierten Felder aus, Anmerkung nur Farbe. Rechts grün: Füllen Sie die mit Pflichtfeld markierten Felder aus, Anmerkung Textmerkmal. Dritte Zeile links rot: Weitere Angaben im Kasten unten links, Anmerkung nur Position, verschiebt sich mobil. Rechts grün: Weitere Angaben im Abschnitt Zahlungsart, Anmerkung Überschrift als Anker.
Dreimal dasselbe Muster: Das sensorische Merkmal darf bleiben, es braucht nur einen Anker daneben.

Wen betrifft es besonders?

Blinde Nutzer haben weder „grün“ noch „rechts“. Der Screenreader liest die Seite in der Reihenfolge des Quelltextes vor; eine Spalte, die visuell rechts steht, kann darin vorne oder hinten auftauchen. Eine Anweisung mit Positionsangabe ist für sie nicht bloß unbequem, sie ist leer.

Menschen mit Farbfehlsichtigkeit – rund acht Prozent der Männer – erkennen „das rot markierte Feld“ nicht als rot markiert. Auf Formularseiten ist das der praktisch relevanteste Fall, weil dort Pflichtfelder gern nur farbig gekennzeichnet werden.

Wer mit einer Bildschirmvergrößerung arbeitet, sieht bei 400 Prozent vielleicht ein Sechstel der Seite. „Unten rechts“ liegt dann außerhalb des Ausschnitts – und um es zu finden, müsste man wissen, wo es ist.

Gehörlose und schwerhörige Nutzer verpassen jeden Hinweis, der an einem Ton hängt: den Piepton nach erfolgreicher Übertragung, das Klicken beim Umschalten, den Warnton beim Zeitablauf.

Und schließlich alle mobilen Nutzer. Ein Layout, das am Desktop drei Spalten hat, hat auf dem Telefon eine. Jede Anweisung mit Richtungsangabe ist dort im besten Fall wertlos und im schlechteren irreführend.

Richtig & falsch im Code

Das Kriterium betrifft Texte, nicht Technik – trotzdem entscheidet oft das Markup, ob eine Formulierung überhaupt einen Anker findet:

<!-- Falsch: nur Position und Farbe als Anker -->
<p>Um fortzufahren, klicken Sie auf den runden grünen Knopf rechts oben.</p>

<!-- Richtig: Beschriftung als Anker, Position als Zugabe -->
<p>Um fortzufahren, klicken Sie auf „Bestellung abschließen“
   (oben rechts auf dieser Seite).</p>

Beim Formular ist die saubere Lösung nicht die bessere Formulierung, sondern das zusätzliche Merkmal am Feld selbst:

<!-- Falsch: Pflichtfelder nur farbig, Hinweis nur über Farbe -->
<p class="hint">Rote Felder sind Pflichtfelder.</p>
<label for="plz" class="required-red">PLZ</label>
<input id="plz" name="plz" required />

<!-- Richtig: Textmerkmal am Feld, Hinweis darauf bezogen -->
<p class="hint">Mit „Pflichtfeld“ gekennzeichnete Angaben sind erforderlich.</p>
<label for="plz">PLZ <span class="req">(Pflichtfeld)</span></label>
<input id="plz" name="plz" required aria-required="true" />

Auch Alternativtexte fallen unter das Kriterium. Eine Grafik, deren Inhalt nur über Farben erklärt wird, ist für blinde Nutzer nicht erschlossen:

<!-- Falsch: der Alt-Text beschreibt nur Farben -->
<img src="/img/auslastung.png"
     alt="Diagramm mit grünen, gelben und roten Balken" />

<!-- Richtig: der Alt-Text nennt die Aussage -->
<img src="/img/auslastung.png"
     alt="Balkendiagramm der Auslastung 2026: Januar bis März unter 60 Prozent,
          April bis Juni um 80 Prozent, Juli über 95 Prozent." />

Wenn ein Element sich nur über Form oder Farbe identifizieren lässt, fehlt ihm eine sichtbare Beschriftung. Das zu beheben, löst gleich mehrere Kriterien auf einmal – und macht die Anweisung nebenbei kürzer.

So testest du es

  1. Signalwörter suchen. Über Redaktionsinhalte, Hilfeseiten und Formularhinweise eine Volltextsuche laufen lassen: rechts, links, oben, unten, daneben, darunter, rund, eckig, groß, klein, grün, rot, blau, gelb, farbig, markiert, Ton, Signal, Piep, Klick.
  2. Die Gegenprobe machen. Jede gefundene Stelle einmal ohne das sensorische Merkmal lesen. Bleibt sie eindeutig? „Klicken Sie auf ‚Weiter‘“ – ja. „Klicken Sie auf den Knopf“ – nein.
  3. Alternativtexte einbeziehen. Beschreiben sie den Inhalt oder nur das Aussehen? Der BITV-Prüfschritt prüft das ausdrücklich mit.
  4. Auf dem Telefon nachlesen. Jede Positionsangabe im umgebrochenen Layout gegenprüfen. Was am Desktop „rechts“ ist, ist mobil meist „unten“ – und die Anweisung damit falsch, nicht nur unvollständig.
  5. In die Redaktions-Checkliste aufnehmen. Der Prüfschritt findet keine Programmierfehler, sondern Schreibgewohnheiten. Er gehört deshalb in die Inhalts-Checkliste, nicht in die Testpipeline.

Häufiger Fehler in der Praxis

Der häufigste Befund kommt aus dem Formular: „Die rot markierten Felder sind Pflichtfelder.“ Der Satz steht auf gefühlt jeder zweiten Behördenseite. Er verstößt gegen 1.3.3 und gegen 1.4.1, und die Korrektur kostet zwei Minuten – ein Sternchen mit Erklärung oder das Wort „Pflichtfeld“ am Label reicht.

Der zweite ist der Verweis auf Nachbarschaft in Fließtexten: „Weitere Informationen finden Sie im Kasten rechts“, „siehe Tabelle oben“, „das Formular darunter“. In der Druckwelt war das korrekt, weil die Seite fix war. Im Web ist die Reihenfolge eine Variable – bei Reflow auf 400 Prozent steht der Kasten irgendwo. Die Lösung ist ein benannter Bezug: „im Abschnitt ‚Antragsunterlagen‘“ oder gleich ein interner Link.

Der dritte ist subtiler und begegnet mir vor allem in Anleitungen: das Symbol ohne Namen. „Klicken Sie auf die Lupe“ oder „Tippen Sie auf die drei Striche“. Beides sind Formbeschreibungen. Wenn das Symbol eine zugängliche Beschriftung hat – und die sollte es haben –, dann benutz sie auch im Text: „Tippen Sie auf ‚Menü‘ (Symbol mit drei Strichen)“. Damit stimmt der Text mit dem überein, was der Screenreader ansagt, und das ist genau die Brücke, die 2.5.3 für die Sprachsteuerung verlangt.

Häufige Fragen

Darf ich überhaupt noch „rechts“ oder „grün“ schreiben?

Ja. Das Kriterium verbietet sensorische Angaben nicht, es verbietet nur, dass sie allein stehen. „Klicken Sie auf den grünen Knopf ‚Speichern‘ oben rechts“ ist korrekt und für sehende Nutzer sogar hilfreich, weil die Angaben zusammen schneller zum Ziel führen als die Beschriftung allein.

Gilt das auch für Bildunterschriften und Alternativtexte?

Ja. Der BITV-Prüfschritt bezieht Alternativtexte ausdrücklich ein: Eine Grafik darf nicht ausschließlich über Farben, Formen oder Positionen erklärt werden. Praktisch heißt das, im Alt-Text die Aussage zu nennen und nicht die Optik – also „Umsatz steigt ab April“ statt „Balken werden nach rechts höher“.

Ist 1.3.3 dasselbe wie 1.4.1 Benutzung von Farbe?

Nein, die beiden greifen ineinander. 1.4.1 betrifft Farbe als alleiniges Mittel der Informationsvermittlung – etwa rote Fehlerfelder ohne Text. 1.3.3 betrifft Anweisungen und schließt neben Farbe auch Form, Größe, Position, Ausrichtung und Ton ein. Ein Satz wie „die roten Felder ausfüllen“ verletzt beide.

Kann ein Werkzeug wie axe das prüfen?

Nein. Es gibt keine automatisierte Prüfung dafür, weil ein Programm nicht beurteilen kann, ob ein Verweis eindeutig ist. Der Prüfschritt ist zu 100 Prozent manuell und redaktionell – und deshalb einer der wenigen, die man in den Schreibprozess einbauen muss statt in die Testpipeline.

Zählt eine Angabe wie „im Menü ganz oben“ als Verstoß?

Wenn sie das einzige Merkmal ist, ja. „Ganz oben“ ist eine visuelle Position. Sobald ein Name dazukommt – „im Hauptmenü unter ‚Service‘“ –, ist die Anweisung erfüllt. Die Landmarken einer Seite helfen dabei zusätzlich, weil sie den Bereichen maschinenlesbare Namen geben, auf die man sich sprachlich beziehen kann.

Verwandte Themen

Gratis E-Book PDF Das Praxishandbuch

Kostenloses E-Book

Das Praxishandbuch für sauberes, zugängliches Web

Alles rund um semantisches HTML, Barrierefreiheit, WCAG & BFSG, GEO und SEO — praxisnah und am echten Code. In mehreren Feedbackschleifen von Leserinnen und Lesern verbessert.

  • 3.000+ Downloads
  • 7. Auflage
  • 37 Seiten
  • PDF

Kein Spam. Abmeldung jederzeit mit einem Klick möglich.