It’s time you write alt text on every meaningful image.
No more excuses. Include alt text on images.
Many people have been using AI tools, like ChatGPT and AltText.ai, to write alt text for them. These tools are simple — all you do is upload an image and click a button. So what’s the problem?
Though the AI tools describe the image it was prompted to write alt text for, it doesn’t convey the purpose of the image.
You may be thinking, “Well, at least I provided alt text.” Yes, that’s true. But by only providing alt text to check the box doesn’t mean you automatically pass WCAG (Web Content Accessibility Guidelines) standards.
WCAG requires non-text content to include a text alternative that serves an equivalent purpose (WCAG 1.1-Text alternatives). So, people who use a screen reader must be given text-based information on images so they interpret a webpage the same as a sighted person.
*Meaningful images convey important information on the webpage, even if they’re supporting text adjacent to the image. If the image isn’t meaningful, it’s decorative and requires null alt text <alt=””>.
Why is alt text that important?
Imagine if you have low-vision or are blind; you rely on a screen reader to consume web content. Screen readers, like JAWS and NVDA, convert digital text from the markup into synthesized speech to be read to the user (WebAIM — Designing for Screen Reader Compatibility).
The content must be implemented properly to give the same experience as any sighted user. For visuals like images, a screen reader says, “Graphic,” then reads the image’s alternative text (if provided).
You don’t need to know much about HTML or its attributes, but you must understand and use the <alt> attribute.
When an <alt> attribute is applied to an <img> element, screen readers have more information about the image it relays to the user. If no <alt> attribute is used (or if left blank), users are left to guess what the h*ll is in the image.
Screen readers speak the alt text to users after identifying an image from the HTML
Pros and cons of using AI to generate alt text
There are always two sides to every story. Before taking a side, let’s discuss the pros and cons of using AI to generate alt text.
Pros
Efficient: If you have many images to generate alt text (if none of your website’s images have alt text), AI can help expedite the process since manually writing is time-consuming.Consistent: If you use the same AI model, it can keep the voice and tone similar for each instance of alt text for consistent messaging.Baseline: If you find writing alt text to be challenging, AI can give you a jumping off point to further modify to suit the webpage content.
Scenarios to use AI
Bulk image processing for initial draftsNon-critical images
Cons
Lack of context: Alt text should describe the image in the context of the webpage, but AI only describes the image itself, so screen reader users won’t get additional details.Inaccurate: AI isn’t factual or precise 100% of the time, so alt text is subject to errors with misleading descriptions or misidentified objects.Privacy: In order to get alt text, you must upload images to an AI model; this may raise questions around user or company data security.
Scenarios to avoid AI
Complex images (like graphs)Content for highly regulated industries (like healthcare)Bar chart titled “Efficiency Optimization by Branch,” via Highcharts demo
Do’s and don’ts for writing alt text
Treat alt text with equal importance to the content always visible on the interface. Hearing alt text spoken by a screen reader is how many users perceive webpages, and poor alt text (or none at all) hinders their ability to do so (W3C — Tips and Tricks for Alt Text).
Do:
Keep alt text short but descriptiveHave a maximum of 140 characters (including spaces)Describe the information the image is displaying rather than the image itselfUse proper grammar (like capitalize the first letter and end the sentence with a period)Describe what happens when the image is selected (for actionable images)
For example, the alt text for a home icon that links to the homepage should say “Home,” rather than “House icon.”
<a href=”icon-button/house.png>
<img alt=”Home.” src=””>
<a/>
Don’t:
Start the alt text with “Image of” or “Photo of” — screen readers already announce it’s describing an imageInclude alt text for decorative images — use <alt= “”> so screen readers skip itAdd bias to alt text — use “A woman in a pink hat.” versus “A beautiful woman in an ugly pink hat.”Describe an entire chart or graph in the alt text — use plain text to describe the image and position it adjacent to the image
For example, insert a block of plain HTML text adjacent to a complex chart or graph so non-sighted users can also access the chart’s information (W3C — Alt Text for Complex Images)
Plain text explaining the complex graphs positioned on the left of the graph, image via John Hopkins
It’s time to roll up your sleeves and write alt text for every image on your website. It’s an easy fix for a major accessibility issue.
Alt text helps websites comply with WCAG standards, and improves everyone’s experience from better screen reader output to improved SEO.
If you have trouble writing alt text, you can turn to AI (with caution) to help give you a starting point. But alt text should put the image in the context of the webpage versus just describe the image itself.
What do you think? What have been your experiences using AI to write alt text?
Resources
WebAIM — Techniques to write alternative textWCAG 2.0, Guideline 1.1- Text AlternativesWebAIM — Designing for Screen Reader CompatibilityW3C — Tips and Tricks for Alt TextW3C — Alt Text for Complex ImagesJohn Hopkins — Alternative Text for VisualsSection 508 — Authoring Meaningful Alternative Text
Should AI write your alt text? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
