A: Buttons must have discernible text (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that buttons contain perceivable text.

This means

The button has no accessible name, for example only an icon without text or empty content. Screen readers cannot announce purpose and target; keyboard users hear only “button” without context.

Impact

Users cannot find or understand functions. Operations are aborted, the page violates WCAG A and conversion as well as compliance suffer.

Recommendation

• Use visible, short link text inside the <button>.

• If no visible text is possible: set aria-label or aria-labelledby.

• For icon buttons, add hidden text (<span class="sr-only">…</span>).

• Do not mark decorative elements as buttons or hide them from assistive technology.

Example

Problematic

<button><svg aria-hidden="true"></svg></button>

Better visible

<button>Start search</button>

Better with aria-label

<button aria-label="Open search"><svg aria-hidden="true"></svg></button>

Related WCAG criterion:
WCAG 4.1.2 - Name, Role, Value