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.
src="dashboard-chart.png" alt="Line chart showing user growth from January to June">
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.
src="divider.png" alt="">
This tells screen readers to ignore it.
2️⃣ The Problem Developers Face
In real projects we often have:
- Icon buttons
- SVG icons
- Custom components
-
divbuttons - Complex UI
Example:
...
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.
aria-label="Close modal">
...
Now screen readers say:
“Close modal button”
4️⃣ Common Real-World Cases
Icon Button
aria-label="Search">
...
Social Media Icons
href="#" aria-label="Open Twitter profile">
...
Input Without Visible Label
type="text" aria-label="Search products">
5️⃣ aria-labelledby (Better for Dynamic UI)
Instead of writing text again, reference an existing element.
id="modal-title">Delete Account
aria-labelledby="modal-title">
Confirm
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:
onclick="openMenu()">Menu 
