Alt text serves two masters—screen readers and search engines—but writing it well means understanding where their needs overlap and where they diverge. This tutorial walks through the mechanics of crafting alt attributes that describe images accurately for accessibility while embedding the context Google needs to rank them.
The alt attribute lives inside an img tag and serves as a text replacement when the image cannot load or cannot be seen. Screen readers announce this text to visually impaired users navigating a page. Browsers display it as a tooltip or placeholder if the image fails to render. Search engines read it to understand what the image depicts and how it relates to surrounding content. The attribute is mandatory in valid HTML5, though enforcement varies. An empty alt attribute—alt=""—is semantically correct for decorative images that convey no meaningful information. Omitting the alt attribute entirely breaks accessibility and sends a negative signal to both validators and crawlers. The distinction matters: decorative background patterns, spacer GIFs, and purely aesthetic flourishes should carry empty alt text, while informational images need descriptive text. Understanding this split prevents both over-optimization and accessibility violations.
Start by looking at the image and writing what you see in plain language, as if explaining it to someone over the phone. If the image shows a wooden deck with Adirondack chairs overlooking a lake, write that. Avoid starting every alt string with "image of" or "photo of"—screen readers already announce the element type. Skip vague phrases like "relevant image" or "illustration." The description should be specific enough that someone who cannot see the image understands what it contributes to the page. A product photo needs the product name, color, angle, and any distinguishing features. A chart needs the chart type and the trend it illustrates. An infographic needs a summary of its main argument or data point. This step has nothing to do with SEO yet—it's pure accessibility. Once you have an accurate description, you can layer in topical relevance without distorting the truth of what the image shows.
Now consider why this image appears on this page. If the page targets "Ottawa deck builders" and the image is a completed deck project, you can write "composite deck with glass railings and built-in lighting, Ottawa residential project." The location and project type add context that benefits both the user and the search engine, because they clarify what the image exemplifies. Avoid repeating the exact focus keyword verbatim in every alt tag—Google recognizes semantic variation and penalizes manipulative repetition. Use related entities, project types, brand names, or geographic markers when they honestly describe the image. If the image is decorative or generic stock photography with no real connection to the content, resist the urge to force a keyword in. Empty or minimal alt text is better than dishonest text. The goal is alignment: the alt attribute should make sense if read aloud in sequence with the paragraph before and after it.
Screen readers often truncate or pause after long strings, and users scanning with assistive technology appreciate brevity. Aim for one to two sentences, typically under 125 characters, though there is no hard limit. Front-load the most important detail—if the image is a close-up of a faulty roof shingle, say "damaged asphalt shingle with exposed underlayment" before elaborating on cause or location. Avoid filler words and redundant phrasing. Write in sentence fragments if that improves clarity: "solar panel array, 10kW residential system, south-facing roof" is clearer than "This is a photo showing a solar panel array that is a 10-kilowatt residential system installed on a south-facing roof." The tighter the phrasing, the faster a screen reader user gets the information and the cleaner the signal for search engines parsing the attribute. Overly verbose alt text frustrates both audiences.
Logos typically need just the brand name as alt text—"Ottawa SEO Inc. logo" or simply "Ottawa SEO Inc." if context is clear. Functional icons like a search magnifying glass or hamburger menu need a description of the action: "open menu" or "search." Charts and graphs need a text summary of the main takeaway, not a recitation of every data point—"bar chart showing seasonal traffic variation, peak in May" is sufficient if the surrounding text explains the details. Complex infographics may warrant a longer text alternative or a linked transcript, but the alt attribute itself should stay focused on the primary message. Decorative images—background textures, separator lines, purely aesthetic illustrations—get alt="". Do not write alt="decorative image"; just leave the quotes empty. This tells assistive technology to skip the image entirely, improving the reading experience.
Alt text is one piece of image optimization, not the whole strategy. File names matter—"composite-deck-ottawa-2024.jpg" is better than "IMG_4738.jpg." Captions and surrounding text provide additional context that Google correlates with the image. Structured data like ImageObject schema can supply metadata search engines use in image carousels. Lazy loading and proper image dimensions affect crawlability and page speed. Alt text operates in concert with these factors. A well-written alt attribute cannot rescue a slow-loading, improperly formatted image, but it does ensure the image contributes to topical relevance and accessibility. Canadian sites often handle bilingual content—if you serve French and English pages, write distinct French alt text rather than translating mechanically, because idiomatic phrasing and entity names differ. Treating alt text as one node in a system, not a magic ranking lever, leads to better overall outcomes.
Use a screen reader extension or your browser's inspector to audit how your alt text actually sounds in context. Read the page aloud with images replaced by their alt strings—does the narrative flow make sense, or do you hear awkward keyword repetition? Check Google Search Console for image indexing status and click data; consistently low impressions might indicate weak topical signals, while high impressions with low clicks could mean the alt text or file name is misleading. Run a site crawl with a tool that flags missing or empty alt attributes on non-decorative images. Review competitor pages in your niche to see how they balance description and keyword inclusion—not to copy, but to calibrate your own judgment. Over time, you will develop an intuition for what length and phrasing works. Alt text is not a set-it-and-forget-it task; as pages evolve and images change, revisit the attributes to keep them accurate and aligned with current content.
Functional images like buttons and icons need descriptive alt text that explains the action—"submit form," "close window," "download PDF." Decorative images that serve no informational or functional purpose should have an empty alt attribute (alt="") so screen readers skip them. Omitting the alt attribute entirely is an accessibility violation and confuses both users and search engines.
No. Alt text must accurately describe what the image shows. Repeating the same keyword across multiple images looks manipulative and provides a poor experience for screen reader users. Google recognizes this pattern and may ignore or discount those signals. Use semantic variation and genuine descriptions tied to the actual image content and its role on the page.
The alt attribute itself should stay concise—one to two sentences summarizing the key message or takeaway. For complex visuals, provide a longer text alternative in a caption, adjacent paragraph, or linked transcript. Screen readers handle brief alt text more gracefully, and search engines prioritize clarity over exhaustive detail in the attribute itself.
Yes. Google explicitly states that alt text helps it understand image subject matter and context. It is one of several signals, alongside file names, captions, surrounding text, and structured data. Well-written alt text improves the chance your images appear in relevant image searches and enhances the topical relevance of the page overall, which can indirectly benefit text-based rankings.
Ideally, yes, because the context differs. An image of a roofing crew might appear on a services page, a blog post, and a case study. On the services page, the alt text might emphasize the service type; on the blog, it might highlight a specific technique; on the case study, it might note the project location. Tailoring alt text to the page's focus improves both accessibility and relevance.
Alt text (the alt attribute) is read by screen readers and used by search engines when the image cannot be displayed. The title attribute appears as a tooltip on hover in some browsers but is not reliably read by assistive technology and has minimal SEO value. Captions are visible text that provides context for all users and contributes to on-page relevance. Use alt text for accessibility and SEO, captions for user-facing explanation, and skip title attributes unless you have a specific tooltip use case.