Writing alt text is not a new practice, but guidelines have been refined over time. The good news is that accessibility standards and SEO best practices have converged on the same core advice: write alt text that is meaningful to users.
Alt text (alternative text) is the written description of an image in HTML. Writing effective alt text is crucial both for accessibility, so screen reader users and those who can’t view images can understand your content, and for best practices in coding as page crawlers use alt text to index and sort images.
Alt text serves a dual purpose: it provides an equivalent experience for visually impaired users and gives search engines context about your images. For example, a screen reader will read the alt text aloud in place of an image, and search engines like Google crawl alt text to determine what an image depicts. This helps images appear in image search results and reinforces your page’s relevance for certain topics. In short, good alt text improves usability and can boost your content’s visibility.
Example: If a blog post is about “graphic design” and the image’s alt text reads “Graphic design team collaborates around the computer screen,” it not only describes the image but also supports the page’s SEO by reinforcing the topic.
Importantly, alt text is required by accessibility standards (WCAG 2.1/2.2) for all meaningful images. Neglecting alt text means users who can’t see images (or when images fail to load) not able to understand that content. On the flip side, well-written alt text helps ensure everyone can access the information and can even increase your organic traffic (HubSpot saw a 779% increase in image search traffic by improving alt text).
General Best Practices for Alt Text
- Be Descriptive and Specific: Clearly describe the content and purpose of the image. Focus on details that matter. For instance, instead of just “user testing”, say “A UX designer observes a participant interacting with a mobile app prototype during a usability test”. This gives the user a much richer idea of the image than a single generic word.
- Provide Context Relevant to the Page: Consider the image’s context in your content. The alt text should reflect why the image is there. For example, if an image is used in an article about business education, mention that context in the description. A generic alt like “Woman pointing at a screen” misses the opportunity to tie into the topic, whereas “Business school professor pointing to a student’s computer screen” is both descriptive and relevant to the page’s subject .
- Keep It Concise: Aim for a brief phrase or sentence (typically under ~125 characters) that captures the image’s essence. Most screen readers will cut off alt text after about 125 characters, so try to keep it in that range. For instance, you don’t need to include every minor detail or camera setting of a photo. Just convey what’s important – think “short and useful”. A concise description also tends to be more SEO-friendly than a long-winded one.
- Use Keywords Naturally: It’s okay (even beneficial) to include a relevant keyword if it fits naturally with the image description. Search engines use alt text along with page content to understand image subject matter and how it fits context around. So if the image genuinely relates to a keyword for your page, you can incorporate it. However, prioritize clarity over stuffing keywords. Write for humans first. Google’s own guidelines say to create “useful, information-rich” alt text and avoid filling alt attributes with keywords (keyword stuffing). In practice, avoid forcing keywords into alt text where they don’t fit naturally or repeating them excessively. For example, it’s appropriate for an alt tag to describe the scene, such as “User testing mobile app interface,” but it shouldn’t be stuffed with a list of keywords like “Usability, user experience, UX testing, mobile app, interface design.”
There are a few things not to do with alt text
- Don’t use “image of …” or “picture of …”: Screen readers already announce an image element, so there’s no need to repeat it. Jump straight into the description. For example, instead of “Image of a user interacting with a touchscreen prototype,” simply write “User interacting with a touchscreen prototype”.
- Don’t be Vague: Alt text like “photo1” or “graphic” or “image here” is useless to users and search engines. Always provide meaningful info (what is the image?). Similarly, a lone word like “designer” is usually too vague – specify what is designer doing (as mentioned in example above).
- No Keyword Stuffing: Don’t overload alt text with a string of SEO keywords or synonyms. This creates a poor experience for users and can harm your site’s credibility. For instance, alt text like “usability testing, UX research, user experience test, app usability study, UX lab session” is essentially keyword spam and offers little actual description. A screen reader user would find this unhelpful and frustrating, and search engines may even flag it as spammy. Always write a clear, natural description instead of a keyword list.
- Don’t include non-visible info: The alt should describe what’s in the image. Avoid inserting information that isn’t shown in the image (e.g. don’t secretly add your website slogan or extra marketing text into the alt – this doesn’t help SEO and confuses users ).
- Avoid Redundancy: If the image’s content is already fully described in the surrounding text, you don’t need to repeat all of that information in the alt attribute. For example, if a screenshot from a usability test is clearly explained nearby, your alt text can be concise, such as “Screenshot of usability test in progress,” rather than restating every detail. Similarly, if an image is captioned “Participant completing a mobile app task during user research,” the alt could simply be “Participant in user research session.” Keeping alt text brief and relevant prevents screen reader users from hearing the same content twice and creates a better user experience. The goal is to provide the necessary context without unnecessary repetition.
How to Handle Decorative Images
For images that are purely decorative or not important to understanding the content, use an empty alt attribute (alt=””) so that assistive technologies ignore them. This includes visual flourishes, stylistic separators, background graphics, etc. If an image doesn’t convey any meaningful info (it’s just “there for looks”), in this case empty alt text is the best practice per W3C: “provide a null text alternative (alt=\”\”) when the only purpose of an image is to add visual decoration”. This way, a screen reader user isn’t bothered with “Image: decorative swirl design…” announced for no reason. Never use alt text like “spacer” or “decorative graphic” – that just wastes the user’s time. (In HTML5, you can also mark purely decorative images with role=”presentation” or aria-hidden=”true”, but usually alt=”” is sufficient.
Remember, these are images that don’t add information (e.g. background graphics, ornamental lines, stock images used for mood). The best practice is to give all of those these empty alt text. For example, a website might have a decorative icon of a green swirl. A screen reader reading “Image of a green swirling graphic design” in the middle of a sentence can create friction and its basically pointless. By using alt=”” (or adding role=”presentation”), you ensure assistive tech users aren’t interrupted by frivolous visuals.
Tip: If an image is purely decorative but you find yourself tempted to write an alt for it, ask “If this image were missing, would any content or meaning be lost?” . If not, it’s decorative – no alt needed (beyond "").
Complex Decorative Image Cases
- Redundant Images: Sometimes an image is explained fully by adjacent text (e.g. an infographic that has all its text also written on the page). In such cases, you might give a short alt that just identifies the image or its topic, or even alt=”” if the surrounding text covers it entirely. The goal is to avoid word-for-word duplication. For instance, if a page says “Our mission is to grow together” and there’s an image of a handshake symbolizing partnership, describing the handshake in alt doesn’t actually add meaning – it’s just restating the concept. That’s a candidate for alt=”” (as WebAIM notes, images that only reinforce text can often be left with empty alt) .
- Complex Images: For charts, graphs, or infographics that carry a lot of info, a short alt text may not suffice to convey all details. Best practice is to provide a concise alt and a longer text description elsewhere (e.g. in the caption or body, or via a link to a full description). The alt can summarize the takeaway (“Chart illustrating that Q2 sales were 30% higher than Q1 ”), and the text or an attached data table can provide the fine details. This way alt text stays succinct but users can still get all the information.
- Images of Text: If your image contains important text (say, a quote rendered as an image or text in a logo), include that text in the alt exactly as it appears. For example, a banner image that says “Welcome Home” should have alt=”Welcome Home” (or include those words within a longer descriptive alt). The alt should serve as an equivalent. Note: It’s generally better to avoid images of text when possible, but if they’re used, the alt must convey the text.
How to Handle Linked Images
If an image functions as a link or button (e.g. a social media icon or a clickable logo), the alt text should indicate its function or destination, rather than describing the image’s appearance. For example, a printer icon that triggers printing should have alt=”Print page”, not alt=”Printer icon”. A linked image of a product should describe what clicking it does (e.g. alt=”View Product Details”) if that isn’t obvious from context. Essentially, treat the alt like the link text. Conversely, if there’s accompanying text, avoid duplicating it.
Example: A linked company logo in your header that says “MyCompany” next to it can have alt="" (decorative) or alt="MyCompany" if the logo alone is linked – you wouldn’t say alt="MyCompany logo" and also have the text “MyCompany” visible, as that would be read twice . The key is to ensure the accessible name of the link or button is clear via alt text if no other text label exists.
Alt Text in Different Contexts (Web, E-commerce, Blog, Portfolio)
| Content Type | Key Focus for Alt Text | Example: Good vs. Bad Alt Text |
| General Websites (e.g. corporate or informational sites) | – Relevant Description: Describe images in a way that supports the page content. – Logos: Use the company name or what the logo represents (or alt=”” if the name is adjacent in text). – Icons/Buttons: Describe function (e.g. alt=”Search” for a magnifier icon) rather than appearance. – Decorative graphics: Use alt=”” to skip entirely. | Good: alt=”Team photo of our staff at the 2023 company retreat” (provides context on an About page image). Bad: alt=”banner image” (too generic), or alt=”Blue swirly line graphic” for a decorative flourish (should be “”). Good (logo): alt=”Acme Corp” for company logo if used as site branding. Bad (logo): alt=”Acme Corp logo image” (unnecessary words). |
| E-commerce Product Pages | – Product Identification: Include product name and specific attributes (color, model, type) so both users and search engines know exactly what it is . – Use shopper keywords naturally: Think of what a customer would search. E.g. model, product type, or style, but integrate these naturally into a description . – Unique angles/views: If multiple product photos, mention what’s shown (e.g. “back view,” “detail of logo on shirt sleeve”). – Avoid SKU or internal codes (not useful to users). | Good: alt=”Wide-brimmed dark brown canvas sun hat with chin strap” – clearly identifies the product with specifics (type of hat, color, material). This helps a shopper using a screen reader and contains keywords like “canvas sun hat” that a user might search . Bad: alt=”hat” or alt=”product image” – far too vague, missing important info. Bad (keyword stuffing): alt=”sun hat summer hat beach hat ladies hats sale” not a real description. |
| Blog Posts & Articles | – Support the Content: Align alt text with the article’s topic or message . If the image illustrates a concept from the text, mention that concept. – Contextual Keywords: If appropriate, use terms from the post in the alt text (as long as it describes the image) . For example, in a blog about SEO tips, an image of a woman at a computer could be alt=”Woman researching SEO best practices on her laptop”, tying the image to the content theme. – Avoid Redundancy: Don’t repeat the caption or surrounding text verbatim in alt. Summarize or complement it. | Good: For a blog image showing a professor in a classroom (and the post is about MBA programs): alt=”Business school professor pointing at a student’s laptop during class”, descriptive and connects to the topic “business school”. Bad: alt=”Woman pointing at a screen”, technically true, but it ignores the article context (missed opportunity to mention it’s a business school setting) . Bad (off-topic keywords): In that same blog, alt=”Woman online shopping on FashionStore.com”, here the alt text describes something unrelated to the actual content (and looks like an attempt to stuff a brand keyword). This would confuse both users and search engines. Always match the alt to the article’s context. |
| Portfolios & Image Galleries (Photography, art, design showcases) | – Describe the Visuals and Mood: Since the image is the content here, convey the key visual elements: subject, setting, style, or emotion. E.g. “A bride and groom kissing under a willow tree at dusk” for a wedding photo – so a blind user can appreciate the scene. – Artistic/Technical details if relevant: You can mention the art style or medium if it’s important (“abstract oil painting of a city skyline at night”). But don’t overload with camera specs or jargon that doesn’t aid understanding. – Consider Audience: Tailor alt text to context. If the portfolio image is also used in an educational context, you might emphasize different details (see example below). – Titles of works: If the piece has a title that itself describes the image (“Sunset Over The Valley”), you might use that as alt text or supplement it, depending on whether the audience would recognize it. | Good (Photography): alt=”A bustling Tokyo street at night, illuminated by neon signs, with a lone man under a red umbrella”, paints a picture, like one might do in a photo caption, capturing both content and atmosphere. Good (Fine Art context): alt=”Minimalist long-exposure photo of ocean waves against dark rocks, creating a sense of tranquility”, focuses on the artistic effect/mood. Bad: alt=”DSC_1037.jpg” or alt=”Photo1″ – (actual file names or empty labels are a common mistake in portfolios – they convey nothing). Bad (overly technical): alt=”Photo of sunset over Grand Canyon, 24mm f/8 1/60s ISO100″, includes camera settings that a viewer doesn’t need . Instead, describe the result, not the settings (e.g. “dramatic sunset over Grand Canyon with orange and purple clouds”). Contextual tweak: If the same gorilla photo appears in a wildlife conservation article, you might write alt=”Endangered mountain gorilla in Rwanda’s Volcanoes National Park” (highlighting species and location). But on your photography portfolio, you might emphasize the portrait aspect: alt=”Intimate close-up portrait of a silverback mountain gorilla’s face” . Both describe the image, but each serves its page’s purpose. |
Table Notes: As shown, all scenarios value descriptive alt text; the differences lie in what details to prioritize. Always consider what your users need from the image in that context (and what they might search for, in SEO terms).
Adapting to Latest Accessibility Standards
- WCAG and Accessibility Standards: The Web Content Accessibility Guidelines (WCAG), currently in version 2.2, require that “all non-text content that is presented to the user has a text alternative that serves the equivalent purpose” (except for a few exemptions like decoration). This rule hasn’t fundamentally changed – if anything, the understanding of “equivalent purpose” has been clarified over time with resources like the W3C’s Alt Text Decision Tree to help authors decide what alt is appropriate in each case. The takeaway: always include alt text for images that convey information or function, and use empty alt for those that don’t. This remains the gold standard for accessibility.
- Google & SEO Recommendations: Google’s search algorithms have become more sophisticated (using computer vision AI to recognize image content), but they still rely on alt text as a significant clue . As of 2025, Google’s official documentation advises webmasters to “focus on creating useful, information-rich content [for alt text] that uses keywords appropriately and in context,” and explicitly warns to avoid keyword stuffing in alt attributes which can harm your rankings . In fact, Google may ignore or even penalize alt text that is just a block of spammy keywords. Instead, they favor alt text that genuinely describes the image in relation to the page. This aligns perfectly with accessibility best practices. Google’s John Mueller has noted that “alt text isn’t a magic SEO bullet” – stuffing keywords in every image won’t skyrocket your SEO. But helpful alt text does contribute to a better user experience and can improve your image SEO, especially for long-tail keywords and image searches. Essentially, if you write alt text with the user in mind, you’re doing right by search engines too.
- Voices of Experts: Accessibility and SEO experts alike echo the same message. “Don’t write alt text for SEO — write for real users,” advises the Bureau of Internet Accessibility, because overly SEO-driven alt text (like the stuffed t-shirt example earlier) ends up hurting usability and doesn’t actually help search rankings . Instead, they suggest imagining how you’d describe the image to someone over the phone . Similarly, SEO experts (e.g. at Yoast) emphasize that alt text is essential for both reasons: “Search engines can’t ‘see’ your images, and neither can some users. Alt text gives those visuals meaning.” It’s a double win when done right . The consensus in 2025 is clear: write alt text for accessibility first, and you will naturally cover SEO.
- Tools and Automation: One recent development is the rise of AI tools that generate alt text. These can be helpful to fill in missing alt text at scale (Facebook, Microsoft, and others use AI to suggest alt text). They’re improving, but human review is still crucial. Automated alt text might get the basics (e.g. “a dog playing in a yard”), but it might miss context or add errors. Use them as a starting point if needed, but always edit for accuracy and appropriateness. Remember that quality matters more than quantity, it’s better to have a few well-written alt texts than dozens of low-quality ones that miss the mark.
In summary, the art of writing alt text comes down to empathy and relevance. You’re communicating to someone who can’t see the image: What would you want to know about it? At the same time, you’re signaling to search engines what the image (and page) is about, so use wording that reflects your content’s key themes without falling into spammy tactics. Good alt text strikes that balance. By following the best practices outlined here – being descriptive, concise, contextual, and user-focused – you will optimize your images for everyone, which ultimately is the best strategy for accessibility.