A Small Guide to Alternative Text
Imagine you are following a GPS through a new city and it suddenly stops giving directions while you are in the middle of a complex intersection. This is exactly how a user feels when they are navigating your site with a screen reader and encounter an image with no description. You have essentially created a dead end in their journey. Writing great alternative text is not just about following rules but about being a clean window that allows every reader to see your content clearly.
What is Alternative Text?
Alternative text, commonly known as alt text, is a written description assigned to an image in a website’s HTML code. While sighted users see the image itself, users with visual impairments rely on screen readers to announce this text aloud. According to the World Wide Web Consortium (W3C), the web is fundamentally designed to work for all people, regardless of their hardware, software, or ability.
Alternative text, commonly known as alt text, is a written description assigned to an image in a website’s HTML code. While sighted users see the image itself, users with visual impairments rely on screen readers to announce this text aloud.
Making Images Operable
The WCAG 2.1 Success Criterion 1.1.1 states that all non-text content must have a text alternative so the information is available to all users. This rule means that even functional images, like icons or buttons, must work for someone using assistive technology.
Get Mbgten’s stories in your inbox
Join Medium for free to get updates from this writer.
When you create a button that is just an image of an arrow, a screen reader user needs to hear “Submit” or “Next Page” to understand what happens when they click it.
- Bad Alt Text: “Green arrow pointing right.” (The user knows what it is, but not what it does.)
- Good Alt Text: “Submit form.” (The user knows exactly what will happen when they click.)
If an image is just for decoration and adds no info, you should use a “null” alt attribute, so the screen reader knows to skip it. This prevents the user from getting bogged down by useless data.
Writing Alt Text for Various Image Types
Decorative Images
What they are: Images that are purely for “vibes.” They don’t add information (e.g., a background swirl or a generic stock photo of a coffee cup on a blog about coding).
- How it should look: Use a “null” attribute (
alt=""). - Why: This tells the screen reader to skip it so the user isn’t bogged down by “Horizontal line graphic.”
- Example: A flourish line to separate paragraphs.
Functional Images
What they are: Images that do something, like buttons, icons, or links.
- How it should look: Describe the action, not the appearance.
- Bad Example: “Green arrow pointing right.”
- Good Example: “Next Page” or “Submit Form.”
- Example (Target): For a shopping cart icon, the alt text should be “View Cart,” not “Wire basket on wheels.”
Complex Images
What they are: Infographics, charts, or detailed diagrams that contain a lot of data.
- How it should look: Provide a brief summary in the alt text and a full detailed description in the surrounding text or a linked page.
- Good Alt Text: “Bar chart showing a 10% increase in sales from April to May.”
- Example: A bar chart showing sales growth.
Conclusion
Every image on your site must be operable and every description should be as clear as a clean store window. No visitor should ever feel lost or ignored because of a missing description or a confusing layout. The W3C Alt Decision Tree (An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C) is a perfect professional tool to use whenever you are unsure of whether an image needs a full description or should be marked as decorative. Great alt text is the foundation of a truly professional and inclusive website that respects the reader’s time.
