--- title: "AA: Interaktive Elemente zeigen ihren Zweck und Zustand an (WCAG 1.3.1 + 4.1.2)" description: Erfahren Sie, warum interaktive Elemente wie Links und Schaltflächen ihren Zweck und Zustand visuell anzeigen müssen, um verständlich und WCAG-konform bedienbar zu sein. --- [Zu Content springen](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#main-content) - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance) - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance) Deutsch Untermenü für Übersetzungen anzeigen ![SiteCockpit Logo](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20mit%20claim_rgb.png?width=328&height=92&name=siteCockpit%20mit%20claim_rgb.png) - [Tickets](https://hub.sitecockpit.com/portal) - [Dokumentation](https://help.sitecockpit.com/de/dokumentation) - [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout) Hauptnavigation öffnen Hauptnavigation schließen - [Tickets](https://hub.sitecockpit.com/portal) - [Dokumentation](https://help.sitecockpit.com/de/dokumentation) - [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout) - - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance) - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance) Deutsch Untermenü für Übersetzungen anzeigen - [Kontakt](mailto:kontakt@sitecockpit.com) [Kontakt](mailto:kontakt@sitecockpit.com) Wie können wir Ihnen helfen? - Es gibt keine Vorschläge, da das Suchfeld leer ist. 1. [Dokumentation](https://help.sitecockpit.com/de/dokumentation?hsLang=de) 2. [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de) 3. [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte) # AA: Interaktive Elemente zeigen ihren Zweck und Zustand an (WCAG 1.3.1 + 4.1.2) ## interactive-element-affordance - [**Bedeutung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#Das-bedeutet) - [**Auswirkung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#Auswirkung) - [**Empfehlung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#Empfehlung) - [**Beispiele**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#Beispiele) - [**Hinweis**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance#Hinweis) ### **Das bedeutet** Interaktive Elemente wie Schaltflächen, Links oder Eingabefelder müssen **klar als bedienbar erkennbar** sein. Nutzer und Nutzerinnen sollen sofort verstehen, dass ein Element anklickbar oder fokussierbar ist und welchen Zustand es aktuell hat (zum Beispiel „aktiv“, „gedrückt“, „deaktiviert“ oder „besucht“). **Das Erscheinungsbild (Form, Farbe, Stil) sollte sich deutlich von statischen Inhalten unterscheiden.** ### **Auswirkung** Wenn interaktive Elemente nicht als solche wahrgenommen werden, wissen Nutzer und Nutzerinnen nicht, wo sie klicken oder interagieren können. Das kann zu Verwirrung, Fehlbedienung oder einem Abbruch der Interaktion führen. Ein fehlender oder unklarer Zustand (z. B. kein Hover, kein Fokus) verletzt WCAG 1.3.1 (A) *Info und Beziehungen* sowie WCAG 4.1.2 (A) *Name, Rolle, Wert*. ### **Empfehlung** - Interaktive Elemente sollten sich optisch deutlich von statischem Text unterscheiden (z. B. durch Farbe, Unterstreichung, Schatten oder Rahmen). - Verwenden Sie Zustände wie *hover*, *focus*, *active* und *disabled*, um Interaktionen visuell darzustellen. - Entfernen Sie keine Fokusrahmen – sie zeigen an, welches Element gerade aktiv ist. - Links sollten sich im normalen Zustand vom Text unterscheiden und bei Hover oder Fokus eine sichtbare Veränderung zeigen. - Schaltflächen sollten inaktiv (disabled) klar erkennbar sein. ### **Beispiele** *Problematisch:* ``` Klicken Sie hier ```  Dieses Element sieht aus wie normaler Text und zeigt keine Interaktionsmöglichkeit. *Besser:* ``` ``` Ein echtes Schaltflächen-Element ist per Tastatur fokussierbar, reagiert auf Klicks und zeigt optische Zustände. *Alternativ (Link):* ``` Kontakt aufnehmen ``` Der Link ist klar als interaktives Element erkennbar und hebt sich visuell vom Fließtext ab.   ### **Hinweis** Eine gute visuelle Affordanz ist ein Kernprinzip barrierefreier Gestaltung. Interaktive Elemente müssen sich erkennbar verhalten und sichtbar auf Benutzeraktionen reagieren – unabhängig von Farbe allein. **Verknüpftes WCAG-Kriterium:** [WCAG 1.3.1 - Info und Beziehungen](https://www.w3.org/TR/WCAG22/#info-and-relationships)[WCAG 4.1.2 - Name, Rolle, Wert](https://www.w3.org/TR/WCAG22/#name-role-value) - [Allgemeines](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#main-content) - [Informationen](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#informationen) - [Dashboard](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#dashboard) - [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#main-content) - [easyVision](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyvision) - [easyMonitoring](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitoring) - [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte) - [easyMonitorung automatische Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-automatische-pr%C3%BCfpunkte) - [easyAI](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyai) - [easyStatement](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easystatement) - [Contrast Checker](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#contrast-checker) - [easyLanguage](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easylanguage) - [Integration easyVision](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#main-content) - [Einrichtung](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#einrichtung) - [Installation](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#installation) - [Browser Erweiterungen](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#browser-erweiterungen) - [Servicepartner](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#main-content) - [Allgemeine Informationen](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#allgemeine-informationen) - [Stripe](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#stripe) - [Support](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#main-content) - [FAQ](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#faq) - [Ticketsystem](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#ticketsystem) [![siteCockpit rgb](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20rgb.png?width=200&height=42&name=siteCockpit%20rgb.png "siteCockpit rgb")](https://www.sitecockpit.com/) Telefon: +49(0)30 403 64 98 98 E-Mail: kontakt@sitecockpit.com [mailto:kontakt@sitecockpit.com](mailto:kontakt@sitecockpit.com) Copyright © 2025, Site Cockpit GmbH