✍️ Writing Effective Alt Text for Accessibility and SEO
🔹 Done well, it improves accessibility for visually impaired users, enhances SEO, and ensures a complete content experience even when images fail to load. The goal is simple: describe the image as if you were explaining it over the phone — your listener should understand both what the image shows and why it matters on the page.
📘 Step-by-Step Instructions
📝 Step 1: Be as Descriptive as Possible
Include details that make the image unique and relevant to your content. Mention attributes like gender, ethnicity, setting, or action when they add meaningful context. The more specific your description, the more useful it becomes for screen readers and search crawlers.
✂️ Step 2: Keep It Concise but Not Too Short
Avoid redundancy and unnecessary filler. Aim for a short phrase or single line that complements — rather than repeats — the surrounding page content. A good rule of thumb is to stay under 125 characters when possible.
🔎 Step 3: Use Your Target Keywords
If a keyword is naturally relevant to the image, include it. For example, instead of writing "whale shark," you could write "whale shark with its mouth open" to incorporate descriptive context along with the keyword.
🚫 Step 4: Don't Stuff Keywords
Keyword stuffing hurts both user experience and SEO. Search engines penalize over-optimized alt text, and screen reader users will find stuffed descriptions confusing or unhelpful. Use keywords only where they fit naturally.
🖼️ Step 5: Skip "Photo of" or "Image of"
The HTML <img> tag already tells screen readers and crawlers that the element is an image. Phrases like "photo of" or "picture of" waste valuable characters and add no value.
📊 Step 6: Use longdesc="" for Detailed Images
For complex visuals such as infographics, charts, or detailed diagrams, use the longdesc attribute to provide a longer description. This ensures users who need more context can access full information.
🔘 Step 7: Describe Buttons Too
Buttons that use images with embedded text need readable alt text so screen readers can announce them properly. Example:
<input type="" src="" name="" height="" width="" alt="text on button">
✅ Step 8: Avoid Typos
Misspellings can confuse screen readers, which read text phonetically, and may also reduce SEO value. Always proofread your alt text before publishing.
🎨 Step 9: Consider the Type of Image
If the image is an illustration, graph, chart, painting, infographic, or GIF, mention that in your alt text when it's relevant. This helps users understand the format and purpose of the visual.
📌 Examples: Bad, Better, Best
❌ Bad: alt="dog"
⚡ Better: alt="brown dog with leash"
✅ Best: alt="Tan poodle happily playing in the grass with its leash still attached"
🚀 Closing Note
By following these steps, you'll write alt text that improves accessibility, supports your SEO strategy, and delivers a better experience for every visitor to your site.