Prinzip P5
Sichtbarkeit Bedienelemente
Was anklickbar ist, muss anklickbar aussehen — vor dem Hover, vor dem Tap.
Warum dieses Prinzip wichtig ist
Eine Schaltfläche, die nicht als solche erkennbar ist, ist keine Schaltfläche.
Schaltflächen müssen geschäftlich funktionieren, bevor sie ästhetisch gefallen. Wenn Ihr primärer Buchungs- oder Kauf-Button visuell nicht als „klickbar“ lesbar ist, verlieren Sie Konversionen — unabhängig davon, ob Nutzer:innen eine Beeinträchtigung haben oder nicht.
Die ästhetische Mode der „Ghost Buttons“ — schmale Outline-Schaltflächen ohne Füllung — sieht in Mockups elegant aus und scheitert in der Praxis. Auf realen Bildschirmen, bei realer Aufmerksamkeit, in realen Nutzungssituationen verschwinden sie zu oft. Was als „minimalistisch“ gemeint war, wird zur Bedienhürde.
Sichtbarkeit ist nicht das Gegenteil von Reduktion. Ein klar gestalteter Solid Button kann minimalistisch sein und gleichzeitig unmissverständlich als Bedienelement lesbar — wenn er konsistent in der Designsprache und konsistent in seiner Positionierung ist.
Drei Stufen der Sichtbarkeit
Primär, sekundär, tertiär — jede Aktionsebene hat ein eindeutiges visuelles Signal.
- Primär — gefülltGenau eine primäre Aktion pro Ansicht. Solid, kontraststark, unübersehbar.
- Sekundär — OutlineUnterstützende Aktionen. Klar als Schaltfläche erkennbar, aber der primären untergeordnet.
- Tertiär — unterstrichener LinkIm Fließtext und für Nebensächliches. Die Unterstreichung trägt das Signal — nie Farbe allein.
Fokus darf nicht verschwinden
Sticky-Header verdecken den Tastatur-Fokus — außer die Seite plant den Abstand ein.
Anti-Pattern
Der Sticky-Header überdeckt den Fokus-Ring zur Hälfte. Tastatur-Nutzer:innen wissen nicht mehr, wo sie stehen — ein Verstoß gegen WCAG 2.4.11.
Best Practice
scroll-margin-top auf allen Sprungzielen hält das fokussierte Element unterhalb der Sticky-Region — vollständig sichtbar.
Woran Sie die Umsetzung erkennen
Die operativen Kriterien aus dem Audit-Modell der Masterarbeit — jede Aussage ist an Ihrer Website direkt überprüfbar.
- Primäre Call-to-Actions sind gefüllte Buttons, keine Ghost-Outlines
- Links im Fließtext sind unterstrichen — Farbe ist nie das einzige Signal
- Der Fokus-Indikator ist auf jedem Hintergrund sichtbar (WCAG 2.4.7)
- Sticky-Header und Overlays verdecken das fokussierte Element nicht (WCAG 2.4.11)
- Jedes Bedienelement hat einen zugänglichen Namen (Accessible Name)
Im Audit-Modell der Masterarbeit wird dieses Prinzip qualitativ bewertet — nicht erfüllt, teilweise erfüllt oder erfüllt.
Best Practice und Anti-Pattern
Drei Designentscheidungen, die Bedienelemente regelmäßig schwächen — und ihre robusten Alternativen.
Anti-Pattern
Ghost-Button als primärer CTA in der Hero
Der wichtigste Konversionspunkt der Seite ist visuell der schwächste.
Best Practice
Solid Primary plus Outline Secondary
Visuelle Hierarchie entspricht funktionaler Hierarchie.
Anti-Pattern
Focus-Ring durch Sticky-Header überlagert
Tastatur-Fokus springt auf ein scheinbar leeres Feld.
Best Practice
scroll-margin-top auf interaktive Elemente
Fokus landet immer sichtbar im Viewport.
Anti-Pattern
Disabled-Zustand nur durch Opacity-Reduktion
Fällt unter 3 : 1 Kontrast, scheitert SC 1.4.11.
Best Practice
Disabled-Token mit Mindestkontrast plus reduzierte Opacity
Zwei Signale für Disabled, beide WCAG-konform.
Anbindung an WCAG 2.2
Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.
Verwandte Prinzipien
Sichtbarkeit Bedienelemente lehnt sich an diese Prinzipien an.
Erkennt man auf Ihrer Website auf den ersten Blick, was anklickbar ist?
Neun Fragen, etwa vier Minuten. Kein Login.