• Success Criterion 2.5.3
  • Conformance level A

Title Attribute Overriding a Control’s Intended Accessible Name

2.5.3 — Label in Name

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Buttons with visible text plus title overriding computed name to something else in some assistive technology combos.

Example 

<button class="icon-send" title="Submit your message to the support agent"></button>

.icon-send::before { content: "Send"; }

Why it matters

The word 'Send' only exists as decorative CSS content, so the button's real accessible name is the long title text instead.

How to test

Check for a title attribute on a control that also has visible text: in some AT combinations title overrides the computed name — verify the announced name still matches what's visible.

How to fix

Put real text inside the button instead of generating it with CSS, and drop the conflicting title attribute.

<button class="icon-send">Send</button>

Outcome

A customer says 'click Send' and the chat message reaches the agent right away.

Who is affected

Voice-control users trying to send a chat message by saying the word they see printed on the button.

Learn more

Related scenarios