Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

AA: Interactive elements indicate their purpose and status (WCAG 1.3.1 + 4.1.2)

interactive-element-affordance

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.

<span>Click here</span>

This element looks like normal text and does not indicate any possibility of interaction.

 

Better:

<button type="button">Click here</button>

A real button element can be focused using the keyboard, responds to clicks, and displays visual states.

 

Alternative (link):

Contact us.

<a href="/contact" style="color:#2563eb; text-decoration:underline;">Contact us</a>

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 criteria:

WCAG 1.3.1 – Info and Relationships

WCAG 4.1.2 – Name, Role, Value

To the official WCAG documentation →