• Success Criterion 3.3.2
  • Conformance level A

Required Field Marked in Code but Not Shown Visually

3.3.2 — Labels or Instructions

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Required state exposed programmatically but with no visual indication, so sighted users can't tell mandatory from optional.

Example 

<label for="chat-email">Email</label>
<input id="chat-email" aria-required="true">
<!-- aria-required is set for screen readers, but no asterisk or text tells sighted users it's mandatory -->

Why it matters

A sighted visitor skips the email field assuming it's optional, then the chat fails to start with no visible clue why.

How to test

Inspect a required field: if aria-required is set but there's no visual indicator (asterisk, 'required' text) for sighted users, it fails.

How to fix

Whenever a field is programmatically required, show that fact visually too, not only in the accessibility tree.

<label for="chat-email">Email (required)</label>
<input id="chat-email" required aria-required="true">

Outcome

The visitor fills in their email right away and the chat connects on the first attempt.

Who is affected

Sighted users, including those with low vision or cognitive disabilities, who rely on visual cues rather than code they can't see.

Learn more

Related scenarios