• Success Criterion 1.3.3
  • Conformance level A

Instruction That Identifies a Button Only by Its Size

1.3.3 — Sensory Characteristics

Scenario

Setting

A weather app's forecast screen

What’s wrong

"Press the large button" / size-only identification.

Example 

<p>To see the 10-day forecast, press the large button below.</p>
<button class="btn-small"><svg class="icon-sun"></svg></button>
<button class="btn-large"><svg class="icon-calendar"></svg></button>

Why it matters

A screen reader user has no concept of "large" versus "small" buttons and cannot tell which icon-only control leads to the 10-day forecast.

How to test

Read the instruction alone: 'press the large button' relies on relative size — check for a stated label instead.

How to fix

Give each control a real accessible name and reference that name, rather than comparing button sizes.

<p>To see the 10-day forecast, press "10-Day Forecast."</p>
<button class="btn-small" aria-label="Today's weather"><svg class="icon-sun"></svg></button>
<button class="btn-large" aria-label="10-Day Forecast"><svg class="icon-calendar"></svg></button>

Outcome

A screen reader user hears "10-Day Forecast, button" and activates the right one directly.

Who is affected

Screen reader users and low-vision users who do not perceive relative size cannot identify the correct button from a size comparison.

Learn more

Related scenarios