Why Alt Text Matters More Than You Think
If you are a web designer, you have probably seen the alt attribute hundreds of times. But do you actually know how to write alt text for images that works for real users?
Alt text (short for alternative text) is the written description added to an image’s HTML tag. It serves as a text replacement when an image cannot be displayed, and more importantly, it is what screen readers announce to users who are blind or have low vision. Search engines also rely on alt text to understand visual content on a page.
Getting it right is not just a nice-to-have. It is a legal requirement under accessibility standards like WCAG 2.2 and Section 508. And from a design perspective, well-written alt text ensures your visual intent reaches every single user.
This guide breaks down exactly how to write alt text for images across every common scenario you will face as a designer, complete with real code examples and a decision framework you can use on every project.
The Three Types of Images You Need to Know
Before you write a single character of alt text, you need to identify what role the image plays on the page. Every web image falls into one of three categories:
| Image Type | Purpose | Alt Text Approach |
|---|---|---|
| Decorative | Adds visual appeal but no information | Empty alt attribute: alt="" |
| Informative | Conveys content, data, or meaning | Descriptive alt text (1-2 sentences) |
| Functional | Triggers an action (link, button) | Describe the action, not the image |
Understanding this distinction is the single most important step. Let’s look at each one in detail.
How to Write Alt Text for Decorative Images
Decorative images are purely visual. They do not add meaning or information to the content around them. Think of background patterns, stylistic dividers, or stock photos used just to break up text.
For decorative images, you should use an empty alt attribute:
<img src="decorative-swirl.png" alt="" />This tells screen readers to skip the image entirely. Without the empty alt="", some screen readers will read the file name aloud, which creates a confusing experience.
Common decorative image examples
- Abstract background textures
- Horizontal rule graphics or visual dividers
- Stock photos used purely for aesthetics next to a blog post
- Icons that appear beside text that already conveys the same meaning
Designer tip: If you remove the image and the page still makes complete sense, it is probably decorative. Use alt="" and move on.
How to Write Alt Text for Informative Images
Informative images carry meaning that the surrounding text does not fully cover. This is where your alt text writing skills matter most.
Best practices for informative alt text
- Be specific and succinct. Aim for one to two sentences. Focus on the key elements of the image rather than describing every small detail.
- Never start with “Image of” or “Picture of.” Screen readers already announce the element as an image. Starting with those phrases is redundant.
- Communicate the same information as the visual content. Ask yourself: what would someone miss if this image did not load?
- Include any text visible in the image. If the image contains words, those words must appear in the alt text.
- Use keywords naturally, not forcefully. If your target keyword fits the description, include it. If it does not, skip it.
Informative alt text examples
| Scenario | Bad Alt Text | Good Alt Text |
|---|---|---|
| Team photo on About page | alt="team" |
alt="Five members of the design team standing in front of the office whiteboard during a brainstorming session" |
| Product photo | alt="shoe" |
alt="Red leather running shoe with white sole, side view" |
| Chart showing revenue growth | alt="chart" |
alt="Bar chart showing quarterly revenue increasing from 2 million in Q1 to 5.4 million in Q4 of 2025" |
| Screenshot with text overlay | alt="screenshot" |
alt="Browser screenshot showing an error message that reads: Your session has expired. Please log in again." |
Notice how the good examples focus on what matters in context. They describe only the details a user needs to understand the content.
How to Write Alt Text for Functional Images
Functional images trigger an action. The most common examples are linked logos, icon buttons, and image-based navigation elements.
For functional images, describe the action or destination, not the appearance of the image.
Functional alt text examples
| Image | Bad Alt Text | Good Alt Text |
|---|---|---|
| Company logo linked to homepage | alt="logo" |
alt="The Hangline homepage" |
| Magnifying glass icon for search | alt="magnifying glass" |
alt="Search" |
| Arrow icon inside a “Next” button | alt="arrow" |
alt="Next page" |
| Social media icon linking to Instagram | alt="Instagram icon" |
alt="Follow us on Instagram" |
When an image is the only content inside a link or button, the alt text is all that a screen reader has to work with. If it is empty or missing, the user hears nothing or hears the raw URL, which is useless.
A Quick Decision Framework for Designers
Use this simple flowchart every time you add an image to a page:
- Does the image convey information not available in surrounding text?
Yes: Write descriptive alt text. Go to step 3.
No: Go to step 2. - Is the image purely decorative?
Yes: Usealt="". You are done.
No: Go to step 3. - Does the image function as a link or button?
Yes: Describe the action or destination.
No: Describe the content and meaning of the image. - Does the image contain visible text?
Yes: Include that text in your alt attribute.
Print this out and keep it near your workspace. After a few weeks, it becomes second nature.
Common Alt Text Mistakes Designers Make
Even experienced designers get tripped up. Here are the most frequent mistakes to avoid:
- Using the file name as alt text.
alt="IMG_4892.jpg"tells the user nothing. Always write a human-readable description. - Repeating the caption. If a caption already describes the image, the alt text should provide complementary information or be left empty to avoid redundancy.
- Keyword stuffing. Writing
alt="best web design agency web design services affordable web design"hurts both accessibility and SEO. Search engines can and do penalize this. - Writing alt text that is too long. Most screen readers cut off alt text around 125 characters. Aim to stay under that limit when possible. For complex images like charts, use a longer description in the surrounding text or a
longdescattribute instead. - Skipping the alt attribute entirely. A missing alt attribute is different from an empty one. Missing means the screen reader may read the file path. Empty (
alt="") means the screen reader skips it intentionally.
Alt Text for Specific Design Scenarios
Images of people
When writing alt text for photos of people, include details that are relevant to the context. If it is a team page, mention names and roles. If it is a stock photo illustrating a concept, describe the action or emotion.
Example: alt="Sarah Mitchell, Lead UX Designer, presenting a wireframe prototype to the client team"
Logos
For standalone logos, use the company or brand name. If the logo is linked, describe the destination.
Example (standalone): alt="The Hangline logo"
Example (linked): alt="The Hangline homepage"
Infographics and complex images
A short alt text will not do justice to a detailed infographic. In this case, write a brief alt text summarizing the topic and provide the full data in the page content or in a linked text alternative.
Example: alt="Infographic summarizing five steps to improve website accessibility. Full details in the text below."
Art and illustrations
For artwork, describe the visual elements and the mood or message if relevant to the content. If the artist and title are important, include them.
Example: alt="Watercolor illustration of a coastal village at sunset with warm orange and purple tones"
Screenshots
Always include any visible text from the screenshot in your alt text. Focus on what the screenshot is meant to demonstrate.
Example: alt="WordPress editor showing the alt text field highlighted under the image settings panel"
Alt Text and SEO: What Designers Should Know
Alt text plays a real role in image search rankings. Google uses it to understand what an image depicts, which means well-written alt text can drive traffic through Google Images.
Here is how to balance accessibility and SEO:
- Write for humans first. A description that makes sense to a person will also make sense to a search engine.
- Include your target keyword if it fits naturally. For example, if you are writing a post about responsive web design and the image shows a responsive layout,
alt="Responsive web design layout displayed on desktop, tablet, and mobile screens"works well. - Never sacrifice clarity for keywords. Forced keyword insertion makes alt text awkward for screen reader users and can trigger spam signals.
Tools to Help You Write and Test Alt Text
Here are some tools worth using in 2026 and beyond:
- WAVE (WebAIM): A free browser extension that flags missing or empty alt text across your pages.
- axe DevTools: An accessibility testing tool that integrates with Chrome and checks alt text quality among other WCAG criteria.
- Lighthouse (built into Chrome DevTools): Runs an accessibility audit and flags images without proper alt attributes.
- AI-assisted alt text generators: Tools like ChatGPT or built-in CMS features can generate draft alt text, but always review and refine the output. AI-generated descriptions often miss context that only a designer who chose the image would know.
Frequently Asked Questions
What is alt text for an image?
Alt text is a short written description added to an image’s HTML code using the alt attribute. It describes the image for users who cannot see it, including people using screen readers and situations where the image fails to load.
What is a good example of alt text?
A good example depends on context. For a product page showing blue sneakers: alt="Blue mesh running sneakers with white laces, front view". It is specific, concise, and communicates what a sighted user would see.
How long should alt text be?
Keep alt text under 125 characters when possible. Most screen readers handle short descriptions better. For complex images that need longer explanations, use a text description on the page itself.
Should decorative images have alt text?
Decorative images should have an empty alt attribute (alt=""). This tells assistive technology to skip the image. Do not omit the alt attribute entirely, as that causes different behavior in screen readers.
Can ChatGPT write alt text for images?
Yes, AI tools like ChatGPT can generate draft alt text when you provide or describe an image. However, AI-generated alt text should always be reviewed by a human. The person who selected the image for a specific purpose is best positioned to describe what matters most in context.
Should I include keywords in alt text for SEO?
You can include keywords if they fit naturally into the description. Never force keywords into alt text purely for SEO. The primary purpose of alt text is accessibility, and search engines reward descriptions that genuinely describe the image content.
What is the difference between alt text and a caption?
Alt text is hidden in the code and read by screen readers or displayed when the image cannot load. A caption is visible text shown below or beside the image. Both can describe the image, but they serve different audiences and should not duplicate each other word for word.