Goal
Ensure that the purpose of user interface components, icons, and regions can be programmatically determined — so browsers, assistive technologies, and personalization tools can adapt the interface to meet individual user needs.
Key Points
- Goes beyond form inputs — this guideline applies to buttons, links, icons, sections, and landmarks.
- Use semantic HTML and ARIA roles to describe an element’s purpose.
- Use consistent icons and labels across the interface (e.g., a gear always means “Settings”).
- Helps users with cognitive or learning disabilities by enabling personalized interfaces (e.g., replacing icons with text or simplified labels).
- Enables adaptive tools to customize interfaces for better understanding.
Short Summary
By ensuring every control and region has a clear, programmatically determinable purpose, users can customize the web experience — e.g., replacing icons with familiar symbols or simplifying layouts for better understanding.
Example Issues and Fixes
Icon Without Accessible Meaning
Fail
<div class="flex w-full flex-col items-center justify-center gap-8 p-8">
<button class="inline-flex h-12 w-12 items-center justify-center p-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus h-auto w-full">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>
</button>
</div>
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8">
<button aria-label="Add Item" class="inline-flex h-12 w-12 items-center justify-center p-2 hover:bg-frost-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus h-auto w-full">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>
</button>
</div>
Unlabeled Landmark
Fail
<div>
<!-- Content for user settings -->
</div>
Pass
<section role="region" aria-label="User Settings" class="p-4 border rounded">
<h2 class="text-lg font-semibold">User Settings</h2>
<!-- Settings form -->
</section>
Quick Checklist
- All icons, buttons, and links have clear accessible names or labels.
- Repeated icons (e.g., “gear” for settings) have consistent meaning.
- ARIA roles or semantic elements describe landmarks and regions.
- UI components’ purposes can be programmatically determined.
- Personalization tools can adapt or replace icons and labels.