DEV Community

Cover image for 🧑‍💻 Alt Text vs ARIA Labels — What Developers Often Miss
Pawar Shivam
Pawar Shivam

Posted on

🧑‍💻 Alt Text vs ARIA Labels — What Developers Often Miss

#webdev #a11y #seo #frontend

Most developers know the basics of Alt Text for images. But when building modern apps with complex UI, alt text alone is not enough. That’s where ARIA attributes come in.

Let’s go deeper.

1️⃣ Alt Text – For Image Meaning

Alt text (alt) is specifically designed for images.

It tells screen readers what the image represents.

<img src="dashboard-chart.png" alt="Line chart showing user growth from January to June">
Enter fullscreen mode Exit fullscreen mode

When to use it

✔ Product images
✔ Blog images
✔ Icons that convey meaning
✔ Charts or graphs

If the image is purely decorative, use an empty alt.

<img src="divider.png" alt="">
Enter fullscreen mode Exit fullscreen mode

This tells screen readers to ignore it.

2️⃣ The Problem Developers Face

In real projects we often have:

  • Icon buttons
  • SVG icons
  • Custom components
  • div buttons
  • Complex UI

Example:

<button>
  <svg>...</svg>
</button>
Enter fullscreen mode Exit fullscreen mode

A screen reader will just say:

"button"

No context.

3️⃣ aria-label – Adding Meaning to UI

aria-label provides accessible text for elements that don't have visible text.

<button aria-label="Close modal">
  <svg>...</svg>
</button>
Enter fullscreen mode Exit fullscreen mode

Now screen readers say:

"Close modal button"

4️⃣ Common Real-World Cases

Icon Button 

<button aria-label="Search">
  <svg>...</svg>
</button>
Enter fullscreen mode Exit fullscreen mode

Social Media Icons 

<a href="#" aria-label="Open Twitter profile">
  <svg>...</svg>
</a>
Enter fullscreen mode Exit fullscreen mode

Input Without Visible Label 

<input type="text" aria-label="Search products">
Enter fullscreen mode Exit fullscreen mode

5️⃣ aria-labelledby (Better for Dynamic UI)

Instead of writing text again, reference an existing element.

<h2 id="modal-title">Delete Account</h2>

<button aria-labelledby="modal-title">
  Confirm
</button>
Enter fullscreen mode Exit fullscreen mode

Screen readers read:

"Delete Account Confirm button"

This keeps content consistent and maintainable.

6️⃣ Accessibility Rule Many Developers Miss

👉 Always use semantic HTML first.

Bad example:

<div onclick="openMenu()">Menu</div>
Enter fullscreen mode Exit fullscreen mode

Better example:

<button>Menu</button>
Enter fullscreen mode Exit fullscreen mode

ARIA should enhance accessibility, not replace proper HTML.

7️⃣ Quick Developer Checklist

Before shipping UI:

✔ Every meaningful image has alt text
✔ Icon-only buttons have aria-label
✔ Inputs have labels or aria-label
✔ Use semantic elements like button, nav, header, main
✔ Decorative images use alt=""

💡 Accessibility is not just about compliance.
It's about building products everyone can use.

Good developers make things work.
Great developers make things accessible.

Top comments (0)