Instructions Without Color, Shape or Position Cues

Instructions that only work if you can see

"To find your polling place, click the green button on the right." For a voter who is blind, there is no green and no right. For a voter who zooms in to 400 percent, the button may be below the form. For someone whose page is reformatted by a reader mode, "on the right" may point at nothing.

WCAG 1.3.3 (Level A) says that instructions for understanding and operating content must not rely solely on sensory characteristics of components, such as shape, color, size, visual location, orientation or sound. A sensory cue can stay, as long as the instruction also identifies the thing another way, for example by name.

What the criterion allows

• Shape and location cues are acceptable if the same information is also available another way. They can help people with cognitive limitations find the item faster.
• Words such as "above" and "below" can be fine where they match reading order and the reference is unambiguous.
• Color is covered here only as part of instructions; whether color alone conveys information at all is a separate criterion, 1.4.1.
• The criterion is about instructions for understanding and operating content, not a general ban on describing the design.

The fix is almost always the same: call the control what it is called on screen, then add any cue you like.

Voter lookups, kiosks and queue screens

Instructions on public sites drift into sensory language. A voter lookup says "use the green button". A required-fields notice says "fields in red". A service-queue page says "go to the window when you hear the chime". Each one assumes the person can see color, locate a button or hear a signal. These are small edits for the team that writes the text, and they remove a barrier from the most routine tasks on the site. See common barriers for the wider list of recurring problems.

Rewrites for common instructions

Name the control. The name is also what voice-control and screen reader users can find.

<p>To find your polling place, click the green
button on the right.</p>
<button class="btn-green">Search</button>

<p>To find your polling place, enter your home address
and select <strong>Find my polling place</strong>.</p>
<button class="btn-green">Find my polling place</button>

Do not rely on a color to mark required fields. Put the information in the label text.

<p>Fields shown in red are required.</p>
<label for="addr" class="red">Street address</label>

<p>Fields marked "(required)" must be completed.</p>
<label for="addr">Street address <span>(required)</span></label>

A sound cue needs a second channel that does not depend on hearing, and one that does not depend on seeing.

<p>When you hear the chime, go to the window.</p>

<p>When your ticket number appears below and the chime
sounds, go to the window named on the screen.</p>
<p id="now-serving" role="status">
  Now serving B-27 at Window 4
</p>

The same rewrite in native apps

On screens the rule works the same way. Refer to a control by its label.

Text("Tap the round button below to pay.")
Button(action: payBill) { Image(systemName: "creditcard.circle") }

Text("Select Pay bill to continue.")
Button("Pay bill", action: payBill)

Text("Tap the round button below to pay.")
FloatingActionButton(onClick = { payBill() }) {
    Icon(Icons.Default.CreditCard, contentDescription = null)
}

Text("Select Pay bill to continue.")
ExtendedFloatingActionButton(onClick = { payBill() }) {
    Text("Pay bill")
}

Testing it

1. Read every instruction on the page and underline words about shape, color, size, position, direction and sound.
2. For each underlined word, check whether the instruction also names the thing by its label or text.
3. Walk through the task with a screen reader without looking at the screen. Can you follow each instruction?
4. Zoom to 400 percent and look at the page in reader mode. Do "left", "right" and "below" still hold?

This criterion needs a human reader; tools cannot judge the meaning of a sentence.

Mistakes in practice

• "Click the blue button" when the button has a label that could be used.
• "The icon on the left" for a button with no text.
• "The red fields" or "the highlighted row".
• "Wait for the beep" with no visible signal.
• Rewriting the sensory phrase but leaving the control unlabeled.

Ship it when

• Every instruction can be followed using names and labels alone.
• Sensory cues, where they remain, are extra rather than the only way to identify an item.
• Signals that use sound or color are paired with text.

Sources

• Understanding SC 1.3.3: Sensory Characteristics (W3C), opens in a new tab
• F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.