Introduction: Giving Sight to the Screen Reader Imagine you are listening to a football game on the radio. If the announcer just says, “There is a player on the field,” you’d be frustrated. You want to know who the player is, what they are doing, and why it matters to the game. An “Alt-Tag” (Alternative Text) is exactly like that radio announcer. It describes images for people who can’t see them.
Function Over Fashion
The biggest mistake people make with alt-text is being too literal.
- The Bad Way: If you have a “Submit” button that looks like a green arrow, don’t write alt=”Green arrow pointing right”.
- The Good Way: Write alt=”Submit your application”. The blind user doesn’t care that the arrow is green; they care what happens when they click it. You are describing the purpose, not just the pixels.
When to Stay Silent
Not every image needs a description. If you have a decorative swirl or a background pattern that adds no information to the page, you should use what’s called a Null Alt Tag (alt=””). This tells the screen reader, “Hey, this is just for decoration, you can skip it.” This prevents the user from having to listen to “Image… Image… Image…” while trying to get to the actual content. At Aditya Catalyst, we help teams find that perfect balance between “too much info” and “not enough.”