How to Write Alt Text: Examples and Rules for Accessible Images
By EVERNET Consulting · · 6 min read
Close your eyes and have someone read a web page to you. When they reach a photo, what should they say? “Image”? The file name? A long description of every detail? The answer depends on why the image is there, and working that out is the whole art of writing alt text.
Alternative text, or alt text, is a short written description attached to an image in the page’s code. Screen readers read it aloud, browsers show it when an image fails to load, and search engines use it to understand what the image shows. WCAG success criterion 1.1.1 Non-text Content, a Level A requirement, says images that convey information need a text alternative that serves the same purpose. Missing or unhelpful alt text is one of the most common problems we find in website accessibility audits, and one of the easiest to fix.
Start with what the image is for
The W3C, which publishes WCAG, offers a simple decision tree that sorts images by their purpose. Once you know which kind you have, the right alt text usually becomes obvious.
Decorative images
Some images are there only for visual interest: a background texture, a divider, a stock photo next to a heading that already says everything. These should have empty alt text (alt=””) so screen readers skip them. Describing them adds noise without adding meaning.
Functional images
A linked logo, a magnifying-glass search button or a download icon does something. Describe the action or destination, not the picture: “Search,” “Download the brochure,” “EVERNET Consulting home.” Nobody needs to hear “magnifying glass icon.”
Images of text
If an image contains words, such as a quote graphic or a sign, the alt text should include those words. Better still, use real text instead of a picture of text whenever you can.
Informative images
A photo or illustration that conveys information needs a short phrase or sentence that captures that information in context.
Complex images
Charts, diagrams and maps hold more information than a sentence can carry. Give them a short alt that identifies the image, then put the full information in nearby text or a data table.
Writing alt text that helps
Good alt text is written for the context, not the file. The same photo of an attorney might be “Jane Smith, managing partner” on her bio page and decorative on a page where her name already appears in the caption. Ask yourself what a sighted visitor gets from the image on this particular page, and write that.
Keep it concise; a phrase or one sentence is usually enough. Skip “image of” or “picture of,” because screen readers already announce that it is an image. Don’t repeat nearby text: if the caption says it, the alt can be empty or add what the caption leaves out. And resist the temptation to stuff in keywords. A list of search terms makes the page harder to use and doesn’t help your rankings.
Alt text examples
Here is how those rules play out on a typical business website:
- A company logo linking to the home page: “EVERNET Consulting home”
- A magnifying glass icon that opens search: “Search”
- A team photo on an About page: “The EVERNET team outside the Hartford office”
- A bar chart of lawsuit filings: “Bar chart of federal website accessibility lawsuits by year, 2024 to 2025,” with the numbers in the text or a table
- A stock photo of a laptop beside a heading that already explains the section: alt=””
Adding alt text in WordPress and Elementor
In WordPress, open the Media Library, select the image and fill in the Alternative Text field. Elementor’s Image widget uses the alt text saved in the Media Library, so updating it there fixes it wherever that image appears through the widget. For purely decorative images, leave the field empty so the image is output with empty alt text.
Watch out for background images. Text or meaning placed in a CSS background image has no alt text at all, so important information should never live only there.
What about automatic alt text? Tools like accessiBe, which we use on our own site, can generate image descriptions automatically. They are a helpful safety net, but software can’t know why an image is on the page. Write your own alt text for every meaningful image.
Check the rest of your site
Alt text is one part of meeting WCAG 2.1 AA. An EVERNET website accessibility audit reviews your images alongside keyboard access, forms, contrast and documents. If your site runs on WordPress, our guide to WordPress and Elementor accessibility is a good next read, and ADA website requirements covers the legal background.
Let’s talk about what comes next.
Bring the challenge. We’ll help you explore the right scope and a practical next step.