create accessible
ALTERNATIVE TEXT
Goal
The fundamental goal of Alt Text (alternative text) is to provide a text description of an image or explain the function or purpose of it for users who cannot see it.
This text equivalent is primarily used by two systems:
Screen Readers: Devices used by visually impaired users read the Alt Text aloud, enabling them to understand the visual content.
Search Engines: Crawlers analyze the Alt Text to understand the subject and context of the image, as they cannot “see” the visual element itself.
If the image fails to load due to a technical issue, the Alt Text appears in its place, ensuring users still have access to the information.
Benefits
Using proper Alt Text is a critical practice that delivers benefits across accessibility, SEO, and overall user experience.
Accessibility
Alt Text is a cornerstone of digital accessibility, ensuring that users with visual impairments who rely on assistive technology are not excluded from important visual information. Without it, crucial content conveyed only by the image is completely missed.
SEO & Discoverability
Search engines rely on Alt Text to properly index and categorize images. Descriptive Alt Text helps your images—and the pages they are on—rank higher in both standard and image search results, driving valuable traffic to your site.
User Experience (UX)
When images fail to load (due to poor connection or browser issues), the Alt Text appears in the image container. This prevents a broken image icon and ensures the user still understands what the image was meant to convey.
What To Do
The requirement for Alt Text changes depending on the image type—whether it is informative, decorative, or complex. Regardless of the image type, follow these key best practices:
Focus on Function, Not Just Appearance
The description should communicate why the image was included in the content, not just what it looks like.
Be Concise and Specific
Keep the Alt Text short and to the point, typically limited to one or two sentences. Avoid unnecessary jargon or overly long descriptions. If the image serves as a link (like an icon or banner), the Alt Text must describe the action or destination of the link, such as "Download the cleaning checklist"
Avoid Redundancy
Do not use phrases like "image of," "picture of," or "graphic of". Screen readers automatically announce that information. Also, avoid repeating information that is already provided in the text immediately surrounding the image.
Use Null Alt Text for Decoration
If an image is purely decorative and conveys no meaningful content (e.g., spacers, abstract borders, or non-essential background patterns), it must be intentionally ignored by assistive technology. To achieve this, use a empty Alt Text or “null” depending on your platform.
Address Text in Images
If an image contains embedded text (such as a logo or a call-to-action button with text), the Alt Text must include all of that important text. If the text is critical to the page's purpose, it should ideally be added as text on the page rather than being embedded in an image.
NOTE: Learn about the different image types in digital content so you know how to write your alt text.
Example
The Scenario
Imagine a pet store website uses an infographic banner to promote an upcoming sale. The graphic contains the following critical information that is not written in the surrounding text:
Offer: 25% off on all dog toys
Sale Dates: October 1 – 15
Promo Code: TREATS25
The Failure
If the designer uses vague or aesthetic Alt Text, the sale information is lost to the screen reader user:
Bad Alt Text:
"Happy dog chewing a rope toy."Issue: This Alt Text only describes the visual element. It completely fails to communicate the image's purpose, announcing a sale, the dates, and the required promo code, violating WCAG 1.1.1. The user does not receive the critical information necessary to participate in the sale.
The Solution
The Alt Text must function as a text equivalent for all the vital information embedded in the image:
Good Alt Text:
"Infographic for Dog Toy Sale: Get 25% off all dog toys, valid October 1st to 15th. Use online promo code TREATS25."Result: The user immediately receives the necessary information (the offer, the dates, and the code) required to take action, making the content fully accessible and serving the equivalent purpose of the graphic.
WCAG Conformance Levels
Level A (Minimum)
Ensure that all non-text content, such as images, has a text equivalent that describes the image to visually impaired users.
Recommended Digital Accessibility Resources
Web Accessibility Initiative
To geek out and go deep on the history and technical criteria for WCAG (Web Content Accessibility Guidelines) W3C is the resource for you.
Monthly Content Accessibility Checklist
Easy first steps to track and integrate accessibility into the digital content you create on a regular basis for your business.
The accuracy of information on this website is subject to change. Implementing these accessibility tips by no means ensures your website is fully compliant with current guidelines or laws. You should consult with a professional to audit and/or remediate your site and obtain an accessibility statement.
© 2025 Access Designs LLC | All Rights ReservedLegal ▸ Privacy Policy ▸ Terms ▸ Accessibility Statement