The Ultimate Guide to Writing Effective Alt Text for Accessibility and SEO

Write alt text as a concise, descriptive sentence that explains what the image shows and why it matters to people. For each image, a clear description helps assistive tech convey context to users who rely on screen readers.

Alt text also supports search visibility. It enables search engines to understand content on your site and index images linked to the surrounding description. A well-crafted description can enable a thousand searches and connect users with the right products or a feature. Good alt text contributes to accessibility, strengthens user experience, and helps search signals align with the page context. Keep the language simple, avoid clutter, and let the imagery describe itself within the page’s context.

Guideline: For each image, write a specific description that notes the subject, action, and context. For products, name the product, color, and main feature. Use precise terms rather than generic labels, and check documentation to maintain consistency with the site’s content strategy. The most effective alt text enriches the page rather than repeating what is already stated in surrounding text.

Example for wildlife imagery: chickadees perched on a branch near a feeder. Alt text could read: “Two chickadees perched on a branch near a bird feeder in a garden.” This communicates the scene clearly and helps users understand the image without seeing it. Some images may show just a small feature; describe its function in context, e.g., “icon of a chickadee perched on a branch in the site header.”

Finally, run a quick check: after drafting, have a teammate approve the alt text to ensure accuracy and alignment with documentation before publishing on the site.

The Ultimate Guide to Writing Alt Text for Accessibility and SEO; When to use alt text

Start with a concise, informative alt-text that describes what the image conveys and its right role on the page for screen readers. This approach works for everything from a small icon to a complex diagram and helps users understand the surrounding content when images cant be viewed.

For what to describe, focus on content and function. If an image is decorative and adds no meaning, omit alt-text or set an empty alt attribute so it won’t interrupt the flow on a screen.

Use alt-text for images that convey information: charts, diagrams, photos, logos, or any visual that contributes to the message. If a diagram shows trends in Excel charts, describe the axes and the trend line; if a desert scene or a bird picture is the focal point, note the subject and setting. When colors carry meaning, mention them (for example a white background with a bold line). If wildlife such as titmice appears in the image, describe the animal and its action. Keep lines simple and avoid describing every pixel. For large diagrams, provide a short description and link to a longer note or guide below.

Two practical examples help illustrate the craft: “Bird perched on a pane with a white border over a desert landscape” and “Chart from Excel shows Q2 sales rising 14%.” If the image contains text, include the exact words in quotes (quotes around the spoken text clarify intent). For a decorative icon or button, use a short label like “Search icon” or “Word document icon” to keep navigation smooth.

Note for creators: practice with a diverse set of visuals and keep a consistent style. This guide supports informative descriptions, helps viewers who rely on screen readers, and provides a clear baseline for projects–whether you work on a website, a blog, or a product page. Use real-world examples, review with peers, and build a simple excel sheet to track changes and reflect a steady feature across assets.

In html, the alt-text appears in the alt attribute of the img element. Automatic alt-text can help, but it should be reviewed for accuracy because context matters. If the image is decorative, omit alt-text to let assistive tech focus on meaningful content. Pair alt-text with a longer description on a linked page when needed to cover complex visuals, charts, or diagrams.

When to Add Alt Text: Scope, Triggers, and Practical Guidelines

Add concise alt text to every image with meaning at publish time or during a content refresh; this helps users relying on assistive tech and improves SEO for sites, and it explains the image’s role within the article.

Scope: images that convey information include objects, diagrams, icons, and charts; perched elements at the header or in a border, such as an orange badge, should have alt text that explains their role and what they add to the article. Some images show meaning only when paired with text, so know which ones require alt text and which can be less descriptive.

Triggers: add or update alt text when you write a new image, replace media, or re-use assets across sites; check that the alt text matches what is shown, especially for diagrams and charts, and ensure it aligns with the surrounding flow of content.

Practical guidelines: keep alt text concise; for basic objects describe function or purpose in 1-2 short phrases; for diagrams explain the function and the main flow; for charts summarize the trend or key values; for images containing visible text, show that text in the alt description; there are cases where a generic description won’t suffice–there, provide a specific alt that captures the meaning; for decorative images or visuals that are unclear, use an empty alt or a brief note that reflects their informational role.

Review and collaboration: creators should check with editors and designers, test alt text with actual users, and verify that the meaning is preserved across devices. Use a basic checklist to confirm coverage for the article and ensure accessibility remains strong.

Define Alt Text: What to Describe and What to Exclude

Describe the image in one concise sentence that conveys its purpose, then add an informative description that covers the main subjects and context. Include who or what appears, any actions, and the setting to help a user understand everything shown.

• What to describe
  • Subjects and actions: identify people, animals (for example chickadees perched on a branch), or objects such as brands, products, or tools.
  • Text within the image: transcribe quotes or short phrases exactly as they appear, including numbers or dates.
  • Context and purpose: explain why the image exists in this entry and what it conveys about the surrounding content.
  • Brand and styling: name the brand and note visual style or iconography if it clarifies meaning.
  • Graphic content: for graphs or charts, summarize the trend, labels, axes, and key data points.
  • Products and offers: describe the product, model, color, and any visible offers or discounts.
  • Colors, layout, and composition: mention dominant colors if they affect comprehension, as well as any visible layout cues.
  • Location and timing: include where the scene takes place and when it occurs, if relevant.
  • Length and tone: keep it informative and neutral, choosing language that matches user expectations.
  • Flow and readability: structure the description so a screen reader can follow naturally, avoiding disjointed phrases.
• What to exclude
  • Decorative-only imagery: if the image provides no informative content, use an empty alt attribute (empty) or mark as decorative.
  • Fluffed details: skip flowery or redundant language that does not aid understanding.
  • Non-informative visuals: avoid describing background noise or unrelated ambiance unless it changes interpretation.
  • Irrelevant context: exclude tangential topics not visible in the image.
  • Duplicate descriptions: do not restate information already conveyed by surrounding text.
• Practical guidelines
  • Guidelines: follow WCAG-friendly practices and review against accessibility and SEO goals.
  • Length: target around 125–160 characters for standard images; long descriptions may be needed for complex diagrams or flow-heavy scenes.
  • Choice of terms: choose language that aligns with the brand voice and consumer expectations, including product names and offers when visible.
  • Consistency: keep a steady style across entries, tagging relevant details like brand, product, and color where appropriate.
  • Review: test alt text with a quick review to ensure it explains everything essential without fluff.
• Examples and approach
  • Entry example: “Chickadees perch on a pine branch at dusk; soft blue sky and pine needles around; visible brand sticker on the feeder.”
  • Graph example: “Line graph showing monthly sales up to Q3, with axes labeled Revenue (USD) and Month, color-coded by product category.”
  • Quotes example: “Image shows the quote ‘Limited time offer’ with a red badge; include the exact wording if it guides user actions.
  • Descriptive approach: explain everything a sighted user would notice, then verify with the surrounding guide or review notes.
• Keep it actionable
  • Entry and description alignment: each image entry should have descriptive alt text that matches the visible content and purpose.
  • Flow and brevity: craft sentences that read smoothly, avoiding clutter and keeping the description informative.
  • Long-form cases: for complex visuals, provide a longer description that explains relationships and outcomes, then summarize with a concise alt sentence.
• Quick checklist
  • Does it explain the image’s purpose? Yes/No
  • Are all essential elements described (including quotes or offers)? Yes/No
  • Is decorative content marked empty? Yes/No
  • Is the tone neutral and informative? Yes/No

Describe Visual Content for Screen Readers: Concrete Phrase Patterns

Begin with the object and its action, then add context in a concise line. This helps the reader understand the scene at a glance and keeps the reading cadence steady, even when the content is complex like a graph or a chart.

Choose patterns by content type: charts and graphs, images, controls, data tables, and decorative elements. For charts, name the metric, the time frame, and the trend; for images, identify the subject and its background or details; and for UI controls, state the label and the action. Use phrases that a reader can scan, not long paragraphs that obscure meaning.

Within SharePoint and brand assets, maintain consistency by reusing a small set of concrete patterns. Andrée, a noted advocate of accessible content, demonstrates how these phrases pair with short, precise captions to support quick reading and easy search. Keep captions reader-friendly, not wordy, and edit for clarity as you refine your alt text in your review process.

SEO Considerations: Balancing Keywords Without Stuffing

Recommendation: Focus on clarity first; include one primary keyword that accurately reflects the image, and add supporting terms only when they improve meaning for users. This guide provides practical guidelines for writers to balance SEO and accessibility in alt text.

In practice, each alt text should function where readers expect it to appear and contribute to understanding, not to fill space. A well-crafted alt text helps both users with disabilities and search engines by delivering a meaningful summary of the image’s role in the article.

Alt text might be longer for complex diagrams, but keep the core meaning intact and avoid filler.

• Guidelines for primary keyword: Determine a single, relevant keyword and place it at the start of the alt text when the image content allows.
• Natural language: Write alt text as a sentence or concise phrase that a user might say; this writing style improves readability for users with disabilities and helps search engines interpret context.
• Word limit: Aim for 125 characters or fewer; this prevents keyword stuffing and keeps the text readable while still supporting search intent.
• Context-aware choices: Consider the section and situation; for diagrams, describe the data or flow; for photos, identify subject and action; for icons, explain the action or meaning.
• Link and click implications: If the image is a link, describe the destination and what happens on click to help users decide to proceed.
• Decorative images: Use an empty alt attribute (alt=””) for visuals that contribute no information; this minimizes meaningless noise for screen readers.
• Checklist approach: Treat each alt text as part of a checkbox-driven process in your workflow; this helps teams approve and track changes.
• Testing and feedback: Test with screen readers, collect input from developers and users, and approve changes that improve understanding.
• What’s the intent: Always ask whats the intent of the image in the surrounding content, and ensure the alt text reflects that goal without redundancy.
• Word choice and white space: Prefer precise terms over filler; keep a calm rhythm and use ample white space around text to aid scanning.

Here to help you, a concise reference for writers: align alt text with the content context, and use this guide to improve the article’s accessibility and SEO balance.

Click here to see the checklist.

Summary: This approach improves article readability, supports users with disabilities, and preserves the link between alt text and page relevance, without sacrificing performance.

Alt Text for Different Image Types: Photos, Diagrams, Logos, Infographics

Label photos with concise, subject-focused alt text that describes who or what is in the frame and why it matters on the page. Write for assistive technology users, and align the description with nearby copy so readers know the image’s purpose.

Photos: Start with the main subject, then add context like setting and action. Keep length tight, aim for 90–120 characters. If a noisemaker or other audio cue appears, note it in brackets. If the image contains speech, include a short quotes snippet – and enclose it in quotes. Example: “Teacher writes on a whiteboard as students listen.” This approach helps users know the whole moment and supports search and navigation. Describing the scene clearly also aids label consistency across pages.

Diagrams: Describe the diagram’s purpose and the flow of information, not every label. State the goal, the key steps, and how they connect. If axes or categories appear, mention them briefly (e.g., “x-axis: time; y-axis: revenue”). Avoid duplicating long text from the image. Example: “Process flow from input to output with four steps: input, analysis, decision, action.” For a diagram, keep the focus on relationships and outcomes.

Logos: Identify the brand and, if meaningful, the logo’s symbolism. Prefer “BrandName logo” or “BrandName wordmark.” If a logo is decorative, leave the alt attribute empty and let the pane announce decoration to users. Use a consistent pattern across pages so users know what to expect and can rely on search results to surface the brand.

Infographics: Offer a concise summary of main findings, with key numbers stated in plain language. Do not duplicate long text from the graphic; pull the figures you need into the alt text. If a quote conveys impact, include it in quotes. For example: “42% increase in adoption.” In a UI pane, a checkbox could toggle a short alt text versus a longer version, so both mind and users with different needs get what they require. In various situations, this approach keeps reader interest high and ensures accessibility for all users; a quick alt text would include the essential numbers and a brief takeaway.