ARIA Labels

ARIA (Accessible Rich Internet Applications) attributes are typically used when custom UI components, like dropdowns, modals, or sliders, don’t communicate their purpose clearly through native HTML. They act as a semantic layer, describing roles, states, and relationships between elements so assistive technologies can interpret them correctly. However, ARIA should enhance HTML, not replace it. Misuse or overuse can actually make experiences more confusing.

Why It Matters

Accessibility is not just about compliance. It improves clarity for all users and contributes to better structured, machine-readable content. As AI systems increasingly parse websites, clean semantics and well-labeled elements make interfaces easier to interpret, not just for screen readers but for automated systems as well.

Examples

Close button:

<button aria-label="Close">
 <!-- '×' symbol or SVG icon here -->
</button>

Add to cart button:

<button aria-label="Add to cart">
 <!-- Shopping cart icon here -->
</button>

Read more link:

<a href="..." aria-label="Read more about the new product features">
 Read more
</a>

Navigation:

<nav aria-label="Primary navigation">
 <!-- list of primary links -->
</nav>
<nav aria-label="Secondary navigation">
 <!-- list of secondary links -->
</nav>