How to Write Alt Text for Images: Best Practices & Tips

The fastest way to learn how to write alt text for images is to imagine describing the visual to someone over a phone call in a single sentence. Focus on the primary subject and the specific action, skip repetitive introductory words like "image of" or "photo of", and keep the length under 125 characters so screen readers do not cut the sentence short. Writing alt text for humans first ensures web accessibility compliance while giving search crawlers the exact context they need to index your visuals.

Which Alt Text Method Fits Your Workflow?

How you write and implement alternative text depends on where your images live. Web designers working in raw code write attributes directly in markup, marketing teams manage descriptions inside CMS fields, and authors configure accessibility within document editors like Microsoft Word.

If you are reviewing an existing website rather than publishing a single file, auditing page by page is the most practical starting point. You can test your live markup with the Image Alt Text Checker to spot missing, empty, or keyword-stuffed tags across every element at once.

Method 1: Audit and Rewrite Live Pages with the Image Alt Text Checker

When you have a published site, checking individual templates by reading raw source code takes hours and often misses script-injected elements. Running an in-browser audit highlights issues immediately without sending your data to an external server.

1. Open the webpage you want to review in your browser, right-click, and select "Inspect" to view the rendered DOM.
2. Copy the rendered page HTML so that lazy-loaded containers and client-side plugins are included.
3. Go to the Image Alt Text Checker and paste the HTML into the inspection box.
4. Review the generated report. The tool flags missing tags, empty attributes, descriptions exceeding length limits, and obvious keyword stuffing.
5. Draft concise, descriptive replacements for any flagged images, then update those records inside your CMS or HTML template.

Method 2: How to Make Alt Text for Images in HTML

In standard HTML, alternative text lives inside the alt attribute of an <img> tag. Writing it directly gives you absolute control over what assistive technology reads and what search bots parse.

1. Locate the target image element in your HTML document.
2. Add the alt attribute inside the opening tag: <img src="espresso-machine.jpg" alt="">.
3. Write an accurate, objective description between the quotation marks: <img src="espresso-machine.jpg" alt="Polished stainless steel espresso machine pouring a double shot into a white ceramic cup">.
4. If the image is purely decorative (such as an abstract background swirl or divider line), leave the attribute empty: alt="". This tells screen readers to skip the element entirely rather than reading out the raw image filename.
5. Save the file and view your page with a screen reader or in-browser inspector to verify the attribute renders properly.

Method 3: How to Write Alt Tags for Images in WordPress and Shopify

Most content management systems provide dedicated input fields for alternative text so you do not have to touch raw HTML. Here is how to configure them across standard editorial setups.

1. In WordPress, upload your image via the Media Library or add an Image block directly inside the Gutenberg post editor.
2. Select the image. In the right-hand settings sidebar, locate the field labeled "Alt Text (alternative text)".
3. Type a clean description of the image content. Avoid repeating the post title verbatim unless the image literally shows the post title graphic.
4. In Shopify, open your Products catalog, click the product you want to edit, and click the specific product photo.
5. Click "Add alt text" or "Edit alt text" in the preview modal, enter your descriptive text (such as "Navy blue canvas low-top sneaker with white rubber sole, side profile"), and click "Save".

Before uploading new files to your CMS, you can also run original camera exports through the Image Filename SEO Generator to create clean, hyphenated filenames that reinforce the context of your alt text.

Method 4: How to Write Alt Text for Images in Word

Microsoft Word documents frequently circulate as internal resources or export directly to accessible PDFs. Adding proper descriptions inside Word ensures screen readers interpret the exported document correctly.

1. Open your Word document and right-click the image you want to configure.
2. Select "View Alt Text" from the context menu to open the Alt Text pane on the right side of the window.
3. Type 1 to 2 complete sentences describing the visual detail and context of the image into the text box.
4. If the image exists only for visual styling (like an accent border or stock pattern), check the box marked "Mark as decorative".
5. Close the pane. Word saves the description automatically with the document file.

How to Write Descriptive Alt Text for Photos of People

Images of people require extra attention because context determines which details matter. Ask yourself why this specific person appears on the page. Is the identity important, or is the activity the key information?

If you are displaying a photo of a known individual on a team page, state their full name, job title, and company. For example: "Sarah Jenkins, Chief Technology Officer at Example Corp, smiling in an office setting."

If the photo shows an unidentified person performing a task in a how-to guide, describe the action and tools instead of personal assumptions. For example: "Carpenter using a speed square and pencil to mark a cutting line on a wooden board." Avoid guessing demographic details, emotional states, or backgrounds unless they are central to the content of your article.

Common Alt Text Mistakes and Quality Checks

Writing good alt text requires avoiding a few common traps that degrade user experience and trigger search spam warnings:

• Keyword stuffing: Never paste a comma-separated list of target keywords into an alt attribute. Search engines evaluate alt text in context; cramming commercial phrases into a picture of a coffee mug looks manipulative.
• Redundant introductory phrasing: Screen readers announce that an element is an image before reading the text. Starting your description with "Image of" or "Photo of" forces visually impaired visitors to hear the word "image" twice in a row.
• Treating content images as CSS backgrounds: When you place an image in a stylesheet via background-image: url(...), you cannot assign an alt attribute. If an image conveys information necessary to understand the page, move it into a semantic <img> element.
• Neglecting overall page hierarchy: Good alt text complements your written content rather than repeating it word for word. Check how your images integrate with your subheadings using our Heading Structure Checker to ensure your media sits under the right topics.

Official accessibility guidance and web standards published on Google Search Central confirm that clear context and direct relevance always outperform artificial keyword placement.

Frequently Asked Questions

How much does alt text help rankings?

Directly, very little. It is an accessibility feature that search engines happen to read. Where it earns its keep is Google Images, which is a real traffic source for recipe, product, and travel sites and close to nothing for most B2B ones. Write it for the person who cannot see the image and the search benefit arrives on its own.

What about images set as a CSS background?

They have no alt attribute and no way to get one, so a screen reader and a crawler both see nothing. That is correct for a decorative texture and wrong for anything that carries meaning. If the image is content, it belongs in an <img> tag.

Do icons and inline SVGs need alt text?

Only when they say something the surrounding text does not. An arrow next to the word "Next" is decorative: give it aria-hidden="true" and move on. An icon that is the entire content of a button needs an accessible name, which for inline SVG means a <title> element or an aria-label on the button.

Is the filename as important as the alt text?

It is a smaller version of the same signal and worth getting right on new uploads. It is rarely worth renaming files that are already live: you break hotlinks, caches, and any image that already ranks, in exchange for a signal measured in decimal places.

Why does an audit tool find images my CMS says all have alt text?

Because it reads exactly the HTML you paste. Lazy-load placeholders, images injected by a script, and gallery plugins that build their own markup all produce tags the CMS editor never saw. Paste the rendered DOM rather than view-source if the page builds itself in the browser.