Goal
Ensure that instructions and information are not conveyed using only sensory characteristics such as shape, size, color, visual location, or sound. Users who cannot perceive these cues (e.g., color-blind or low vision users) must still understand the content.
Key Points
- Don’t rely on color, shape, orientation, or sound alone to indicate meaning.
- Combine text, labels, or patterns with sensory cues.
- Applies to forms, charts, instructions, and interactive elements.
- Supports users with visual, auditory, or cognitive disabilities.
Short Summary
Information should be perceivable through multiple means, not just visual or auditory cues. Always provide textual or symbolic alternatives for instructions or indicators.
Example Issues and Fixes
Form Error Indicated by Color Only
Fail
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label class="font-semibold">Email</label>
<input type="email" class="rounded border border-gray-300 p-2" />
<p class="!m-0 text-red-500">Required</p>
</form>
</div>
Pass
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label class="font-semibold">Email</label>
<input type="email" class="border border-red-500 rounded p-2" aria-invalid="true">
<p class="flex items-center gap-2 text-red-600 !m-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Error: Please enter your email address
</p>
</form>
</div>
Instruction Using Shape Only
Fail
<div class="flex w-full flex-col gap-8 p-8">
<div>Click the square to submit the form.</div>
<div class="w-10 h-10 bg-blue-500"></div>
</div>Click the square to submit the form.
Pass
<div class="flex w-full flex-col gap-8 p-8">
<div>Click the <span class="inline-block px-2 py-1 bg-blue-500 text-white rounded">Submit</span> button to submit the form.</p>
</div>
Click the Submit button to submit the form.
Quick Checklist
- Are instructions understandable without relying on color, shape, sound, or location alone?
- Are icons or patterns accompanied by text labels?
- Are forms, charts, or visual indicators accessible to screen readers?
- Does the design avoid sensory-only cues for important actions or information?