Alt text (alternative text) is the HTML attribute that describes images for screen readers and displays when images fail to load. It serves accessibility, SEO, and user experience by conveying what an image depicts and its contextual purpose on the page.
Alt text is the value assigned to the alt attribute in an HTML image tag. When you write <img src="logo.png" alt="Ottawa SEO Inc. logo">, the string "Ottawa SEO Inc. logo" is the alt text. Browsers use this attribute in two primary scenarios: screen readers vocalize it for users who cannot see images, and browsers display it as fallback text when an image fails to load due to network issues, broken paths, or file errors. The attribute has been part of the HTML specification since the early web, originally designed for text-only browsers and slow connections where images were optional. Today it remains mandatory under WCAG accessibility standards and is a confirmed ranking signal for Google Images. Alt text is distinct from title attributes, which appear on hover, and captions, which are visible text beneath images. Its functional purpose is to replace the image with a textual equivalent that conveys the same information or serves the same function within the page.
Screen readers like JAWS, NVDA, and VoiceOver rely entirely on alt text to communicate image content to blind or low-vision users. Without it, the screen reader either skips the image silently or reads the filename aloud, which is usually meaningless gibberish like "IMG_4728.jpg". This creates information gaps that can render a page incomprehensible. For example, if a product page shows a diagram explaining a process and the alt text is missing, users relying on assistive technology lose that entire explanation. Alt text is a requirement under WCAG 2.1 Level A, the baseline standard for accessibility. In Canada, the Accessible Canada Act and provincial accessibility legislation like the AODA in Ontario mandate digital accessibility for many organizations. Failure to provide alt text can trigger complaints, audits, or legal exposure. Beyond compliance, it's a matter of inclusive design: roughly one in seven Canadians report some form of vision loss, and many more use screen readers due to dyslexia, cognitive disabilities, or situational impairments like driving or multitasking.
Google's crawlers cannot interpret the content of an image by analyzing its pixels alone. They rely on signals like the alt attribute, surrounding text, filenames, and captions to understand what the image depicts and how it relates to the page topic. Alt text directly influences whether an image appears in Google Images results and what queries trigger it. It also contributes to the overall topical relevance of the page: if you're writing about "renovating heritage homes in Ottawa" and your images have descriptive alt text mentioning materials, architectural features, and locations, you reinforce the page's subject matter. This is not a loophole for keyword stuffing—engines penalize irrelevant repetition—but a legitimate way to provide context. Alt text also supports featured snippets and rich results that include images. When Google pulls an image into a snippet, clear alt text helps the algorithm confirm the image matches the query intent. For image-heavy sites like e-commerce catalogs, portfolios, or real estate listings, thorough alt text coverage is often the difference between ranking in image search or remaining invisible.
Good alt text answers the question: what information does this image convey, and what role does it play on the page? For a photograph of a person holding a product, describe both: "Woman holding stainless steel French press with wooden handle." For a chart, summarize the insight: "Bar chart showing organic traffic growth from January to June, peaking at 12,000 visits in May." For icons that trigger actions, describe the function: "Search icon" or "Close menu." The goal is equivalence—someone hearing the alt text should receive the same information as someone viewing the image. Avoid redundant phrases like "image of" or "photo of"; screen readers already announce "image" before reading the alt. Be concise but specific: "dog" is too vague, "golden retriever puppy sitting on a blue couch" is appropriately detailed. If the image is purely decorative—a background texture, a spacer, or a design flourish—use an empty alt attribute alt="" so assistive technologies skip it entirely. Leaving the attribute off is an error; including it empty is intentional.
The same image may require different alt text depending on its editorial context. A photo of a coffee cup on a café's homepage might be alt="espresso in ceramic cup on wooden table," emphasizing atmosphere. On a product page selling that cup, the alt text should be "white ceramic espresso cup, 3 oz capacity, matte finish"—details relevant to purchase decisions. On a blog post about coffee culture, it might be "traditional Italian espresso service"—capturing cultural significance. This contextual flexibility means you cannot auto-generate alt text once and reuse it everywhere. Even AI-powered alt text generators, which analyze pixels to produce descriptions, often miss the functional or editorial purpose the image serves in a specific article. Practitioners write or edit alt text manually for critical pages—homepages, product detail pages, high-traffic posts—and use templates or batch tools for large catalogs, then refine outliers. The key question is always: what does this image communicate *here*, on this page, to serve this content's purpose?
Keyword stuffing is the most visible mistake: alt="Ottawa SEO agency Ottawa SEO services Ottawa search optimization Ottawa" is spam that annoys screen reader users and risks penalties. Using filenames as alt text—alt="DSC_0019.jpg"—provides zero information. Writing overly generic text like "photo" or "image" wastes the attribute. Another frequent error is describing images that don't need description: a decorative border or a background gradient should have alt="", not a forced narrative. Some CMSs auto-populate alt with filenames or leave the field blank by default, and teams publish without reviewing. On the opposite end, some writers produce alt text so verbose it becomes a paragraph—screen readers cannot skip mid-alt, so brevity matters for usability. Missing alt entirely is a failure, but so is including it thoughtlessly. E-commerce sites often repeat product names verbatim as alt without adding visual detail: alt="Blue Widget" tells you nothing a sighted user doesn't already see in the heading. Add the distinguishing features: "Blue Widget with chrome accents and rubberized grip."
Browser extensions like WAVE and Axe DevTools highlight images missing alt attributes during manual audits. Screaming Frog and Sitebulb can crawl entire sites and export lists of images with empty, missing, or suspicious alt text, letting you prioritize fixes. Many CMSs—WordPress, Shopify, Contentful—include alt fields in their media libraries, but enforcement varies. Some themes and page builders skip alt if you leave the field blank; others insert empty strings. Manual QA is necessary. For teams managing thousands of images, a spreadsheet workflow helps: export image URLs and existing alt, flag blanks and duplicates, write or edit in bulk, then re-import. AI tools like Azure Computer Vision or Google Cloud Vision API can generate baseline descriptions for large archives, but human review remains essential to ensure context and function are accurate. Accessibility audits from firms or automated platforms like Deque or Siteimprove often flag alt issues as high-priority, making it a first-tier fix during remediation sprints.
Alt text is an HTML attribute read by assistive technologies and invisible to sighted users unless the image fails to load. A caption is visible text displayed beneath or beside an image, providing context or editorial commentary. Alt text replaces the image for those who cannot see it; captions supplement the image for everyone. Both serve distinct purposes and should coexist when appropriate.
Include keywords only when they accurately describe the image content and fit naturally. If your page is about "commercial roofing in Toronto" and an image shows a crew installing shingles, alt text like "roofing crew installing asphalt shingles on commercial building, Toronto" is legitimate. Forcing keywords into unrelated images or repeating them across multiple alt attributes is spam and harms both accessibility and rankings.
Most screen readers cut off or pause around 125 characters, though there is no hard technical limit. Aim for concise descriptions—one to two sentences—that convey the essential information. If an image requires extensive explanation, such as a complex chart or infographic, provide a brief alt and add a longer text description nearby in the body content or via a linked accessible document.
Yes, but use an empty alt attribute: alt="". This tells assistive technologies the image is decorative and should be ignored, preventing clutter and confusion. Do not omit the alt attribute entirely, as that flags an error. Decorative images include design elements like dividers, background textures, or purely aesthetic graphics that convey no information or function.
Only if the images are identical and serve the same purpose in the same context. For example, a logo that appears in the header and footer might reuse "Company Name logo." However, if images look similar but play different roles—say, product shots from different angles—each needs unique alt text describing what that specific view shows, such as "front view showing control panel" versus "side view showing ventilation grille."
Leaving it missing triggers an accessibility error and causes screen readers to either skip the image silently or read the filename, which is rarely useful. Leaving it intentionally empty with alt="" signals the image is decorative and should be ignored, which is correct for non-informative graphics. The distinction matters: missing is a mistake, empty is a deliberate choice for decoration.