How to Add Alt Text to Images: A Complete Guide
Alt text is one of those small details that makes a surprisingly large difference — for accessibility, SEO, and how well your content functions across different contexts. Whether you're uploading images to a website, social media post, or document, knowing how to add alt text correctly (and why it matters) changes how you approach every image you publish.
What Is Alt Text and Why Does It Matter?
Alt text (short for alternative text) is a written description attached to an image that serves multiple purposes:
- Screen readers read it aloud to users who are visually impaired
- Search engines use it to understand what an image depicts
- Browsers display it when an image fails to load
- Indexing systems rely on it to categorize visual content
Without alt text, an image is essentially invisible to anyone or anything that can't see it visually. A screen reader will either skip the image entirely or read out a useless filename like IMG_4872.jpg. Search engines will make their best guess — and often guess wrong.
Good alt text is descriptive but concise, typically under 125 characters. It describes what's in the image and, when relevant, why it's there.
How to Add Alt Text Across Different Platforms 🖼️
The process varies depending on where you're working. Here's how it works in the most common environments:
WordPress
In the WordPress block editor (Gutenberg), click on any image block and look at the right-hand panel. Under "Image Settings", you'll find an Alt Text field. Type your description directly there. In the classic editor, click an image to open the media details panel — the alt text field is labeled clearly.
Google Docs
Right-click an image and select "Alt text" from the context menu. A dialog box opens with a Title and Description field. The Description field is the functional equivalent of HTML alt text — fill this one in. The Title field is optional and secondary.
Microsoft Word
Right-click an image and choose "Edit Alt Text" (or select the image and go to Format > Alt Text). A panel appears on the right where you can type a description. Word also offers an auto-generate option, though AI-generated descriptions are inconsistent and worth reviewing manually.
HTML / Code
In raw HTML, alt text is an attribute of the <img> tag:
<img src="solar-panel-installation.jpg" alt="A technician installing solar panels on a residential rooftop"> If an image is purely decorative and carries no informational value, the correct practice is to use an empty alt attribute (alt=""), not to omit it entirely. An omitted alt attribute signals missing information; an empty one signals intentional decoration.
Social Media Platforms
- Twitter/X: Click the + Alt button that appears on an uploaded image before posting
- Instagram: Go to Advanced Settings before sharing a post and select Write Alt Text
- LinkedIn: After uploading an image in a post, click the edit (pencil) icon and look for the alt text option
- Facebook: Click the three dots on an uploaded photo, then select Change Alt Text
Each platform stores this differently and the interface changes periodically, but the option is generally found in image editing or advanced settings before publishing.
What Makes Alt Text Good vs. Bad
| Type | Example | Issue |
|---|---|---|
| Missing | (none) | Inaccessible and unindexed |
| Filename | IMG_4872.jpg | No useful information |
| Too vague | "An image" | Describes nothing |
| Keyword stuffed | "laptop laptop best laptop deals" | Spam, not description |
| Too long | Full paragraph | Disruptive for screen readers |
| Good | "A person reviewing code on a laptop in a coffee shop" | Descriptive, specific, concise |
The goal is to convey the meaning and context of the image — not just its literal contents. A photo of a dog means something different on a veterinary website than it does on a product review for dog food.
Decorative Images vs. Informative Images
Not every image needs a written description. Decorative images — background patterns, stylistic dividers, or illustrations that don't add information — should use an empty alt attribute so screen readers skip them cleanly. Giving them descriptive alt text interrupts the reading experience without adding value.
Informative images — charts, diagrams, photographs that support or explain content, product photos, screenshots — always need alt text. If an image were removed and the page lost meaning, that image needs a description.
Functional images, like a button with only an icon and no visible label, need alt text that describes the action, not the icon: alt="Submit form", not alt="Arrow icon".
The Variables That Shape Your Approach 🎯
How you handle alt text in practice depends on several factors that vary significantly by situation:
- Volume: A personal blog with occasional photos is a different challenge than an e-commerce site with thousands of product images
- Platform constraints: Some CMSs support bulk alt text editing; others require image-by-image manual entry
- SEO goals: Sites targeting competitive image search terms need more deliberate, keyword-aware alt text strategies
- Accessibility requirements: Organizations subject to WCAG compliance standards face stricter obligations than a personal project
- Content type: Alt text for data visualizations and infographics requires more detail than simple product photos
- Workflow: Teams with multiple contributors need style guides and processes that solo creators don't
A developer building a custom CMS will approach this differently than a small business owner using Squarespace. A nonprofit with accessibility obligations operates under different constraints than a personal portfolio site.
What counts as "good enough" depends heavily on who your audience is, what your platform requires, and how much of your image library already lacks descriptions. Those specifics are yours to assess.