• Success Criterion 1.3.1
  • Conformance level A

Required Field Marked Only Visually, Not in the Code

1.3.1 — Info and Relationships

Scenario

Setting

A public library's catalog search

What’s wrong

Required state shown visually (asterisk/color) with no programmatic indication (required/aria-required (code marking a field required)) *and* no text.

Example 

<label for="card-num">Library card number <span style="color:red">*</span></label>
<input id="card-num" type="text">

Why it matters

A screen reader user hears "Library card number, asterisk" with no indication that it means required, so they may skip it.

How to test

Focus a required field with a screen reader: it should announce 'required' — if only a visual asterisk exists with no aria-required or required attribute, it fails.

How to fix

Pair a required attribute with visible text, since color and symbols alone never reach non-visual users.

<label for="card-num">Library card number (required)</label>
<input id="card-num" type="text" required aria-required="true">

Outcome

A patron hears required up front and fills in the card number correctly the first time through.

Who is affected

Screen reader users filling out the search form don't learn a field is mandatory until they submit and hit an error.

Learn more

Related scenarios