---
title: "AA: Interactive elements indicate their purpose and status (WCAG 1.3.1 + 4.1.2)"
description: Learn why interactive elements such as links and buttons must visually indicate their purpose and state in order to be understandable and operable in accordance with WCAG.
---
[Skip to content](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#main-content)
- [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance)
- [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance)
English
Show submenu for translations
- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)
Open main navigation
Close main navigation
- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)
- - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance)
- [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/interactive-element-affordance)
English
Show submenu for translations
- [Contact us](mailto:kontakt@sitecockpit.com)
[Contact us](mailto:kontakt@sitecockpit.com)
How can we help you?
- There are no suggestions because the search field is empty.
1. [Documentation](https://help.sitecockpit.com/en/documentation?hsLang=en)
2. [Backend](https://help.sitecockpit.com/en/documentation/backend?hsLang=en)
3. [easyMonitorung manual checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-manual-checks)
# AA: Interactive elements indicate their purpose and status (WCAG 1.3.1 + 4.1.2)
## interactive-element-affordance
- [**Meaning**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#This-means)
- [**Impact**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#Impact)
- [**Recommendation**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#Recommendation)
- [**Examples**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#Examples)
- [**Note**](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/interactive-element-affordance#Note)
### **This means**
Interactive elements such as buttons, links, or input fields must be **clearly recognizable as operable**. Users should immediately understand that an element is clickable or focusable and what its current state is (e.g., “active,” “pressed,” “deactivated,” or “visited”).
**The appearance (shape, color, style) should be clearly different from static content.**
### **Impact**
If interactive elements are not perceived as such, users do not know where they can click or interact. This can lead to confusion, incorrect operation, or termination of the interaction. A missing or unclear state (e.g., no hover, no focus) violates WCAG 1.3.1 (A) *Information and Relationships* and WCAG 4.1.2 (A) *Name, Role, Value*.
### **Recommendation**
- Interactive elements should be visually distinct from static text (e.g., through color, underlining, shadows, or borders).
- Use states such as *hover*, *focus*, *active*, and *disabled* to visually represent interactions.
- Do not remove focus frames—they indicate which element is currently active.
- Links should differ from text in their normal state and show a visible change when hovered over or focused on.
- Buttons should be clearly recognizable when inactive (disabled).
### **Examples**
*Problematic:*
```
Click here
```
This element looks like normal text and does not indicate any possibility of interaction.
*Better:*
```
```
A real button element can be focused using the keyboard, responds to clicks, and displays visual states.
*Alternative (link):*
```
Contact us
```
The link is clearly recognizable as an interactive element and stands out visually from the body text.
### **Note**
Good visual affordance is a core principle of accessible design. Interactive elements must behave in a recognizable manner and respond visibly to user actions—regardless of color alone.
**Related WCAG criterion:**
[WCAG 1.3.1 - Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)[WCAG 4.1.2 - Name, Role, Value](https://www.w3.org/TR/WCAG22/#name-role-value)
- [General Information](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#main-content)
- [Information](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#information)
- [Dashboard](https://help.sitecockpit.com/en/documentation/general-information?hsLang=en#dashboard)
- [Backend](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#main-content)
- [easyVision](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easyvision)
- [easyMonitoring](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitoring)
- [easyMonitorung manual checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-manual-checks)
- [easyMonitorung automatic checks](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easymonitorung-automatic-checks)
- [easyAI](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easyai)
- [easyStatement](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easystatement)
- [Contrast Checker](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#contrast-checker)
- [easyLanguage](https://help.sitecockpit.com/en/documentation/backend?hsLang=en#easylanguage)
- [easyVision integration](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#main-content)
- [Setup](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#setup)
- [Installlation](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#installlation)
- [Browser Extensions](https://help.sitecockpit.com/en/documentation/easyvision-integration?hsLang=en#browser-extensions)
- [Servicepartner](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#main-content)
- [General Information](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#general-information)
- [Stripe](https://help.sitecockpit.com/en/documentation/servicepartner?hsLang=en#stripe)
- [Support](https://help.sitecockpit.com/en/documentation/support?hsLang=en#main-content)
- [FAQ](https://help.sitecockpit.com/en/documentation/support?hsLang=en#faq)
- [Ticket system](https://help.sitecockpit.com/en/documentation/support?hsLang=en#ticket-system)
[](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