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: