ARIA and Alt Text Basics
Alt text describes images for people who can't see them, and is the single most impactful accessibility habit in day-to-day HTML writing.
<!-- Meaningful image: describe its content/purpose -->
<img src="chart-sales-q4.png" alt="Bar chart showing sales rose 20% in Q4">
<!-- Decorative image: empty alt tells screen readers to skip it -->
<img src="divider-swirl.png" alt="">
<!-- Functional image (used as a link/button): describe the action -->
<a href="/cart"><img src="cart-icon.png" alt="View shopping cart"></a>
Good alt text describes purpose, not just appearance — "chart" alone is far less useful than "bar chart showing sales rose 20% in Q4." For decorative images that add nothing informational (a background swirl, a spacer), use alt="" — this is different from omitting alt entirely, which screen readers may read aloud as the filename instead.
ARIA (Accessible Rich Internet Applications) attributes fill gaps native HTML can't cover — mostly needed for custom, JavaScript-driven widgets:
<button aria-label="Close dialog">✕</button>
<div role="alert">Your session will expire in 2 minutes.</div>
<nav aria-label="Breadcrumb">
<a href="/">Home</a> / <a href="/blog">Blog</a>
</nav>
aria-labelprovides an accessible name when visible text alone isn't descriptive enough (like an icon-only button).role="alert"tells assistive tech to announce this content immediately when it appears, useful for live error/status messages.aria-labelon<nav>distinguishes multiple navigation regions on the same page.
The first rule of ARIA: don't use ARIA if a native HTML element already solves the problem. A real <button> needs no role="button" — adding one is redundant at best and can cause conflicting behavior at worst.