• Success Criterion 4.1.2
  • Conformance level A
  • W3C reference F59

Clickable Div Turned Into a Control but Given No ARIA Role

4.1.2 — Name, Role, Value

Scenario

Setting

A community forum's discussion thread

What’s wrong

A div or span is turned into a clickable control with script, but is never given a role — screen readers announce it as plain text, not a button/control.

Example 

<div class="upvote-arrow" onclick="upvote(postId)">▲ 12</div>
<!-- clicking increments the vote count, but the div has no role, tabindex, or label -->

Why it matters

A screen reader user reading the thread hears the triangle symbol and "12" as static text and never realizes it's an upvote control.

How to test

Inspect a scripted interactive control in DevTools: if it has no role attribute at all, screen readers announce it as plain text, not a control.

How to fix

Adding role="button" alone is not enough; tabindex and a keydown handler are required too.

<div class="upvote-arrow" role="button" tabindex="0" aria-pressed="false" aria-label="Upvote, 12 votes"
     onclick="upvote(postId)" onkeydown="handleUpvoteKey(event, postId)">▲ 12</div>

Outcome

A forum reader upvotes a helpful post using only the Tab and Enter keys.

Who is affected

Screen reader users browsing forum threads cannot find or use the upvote control at all.

Learn more

Related scenarios