Suggest an editImprove this articleRefine the answer for “What is alternative text (alt text)?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Alt text** is a text description of an image, set through the `alt` attribute of the `<img>` tag, that conveys the picture's meaning when a user cannot see it. **Key point:** it makes a site accessible to screen readers, indexable for search engines, and understandable even when an image fails to load.Shown above the full answer for quick recall.Answer (EN)Image**Alternative text (alt text)** is a text description of an image, set through the `alt` attribute inside the `<img>` tag. It exists to **convey the meaning of a picture** when a user **cannot see it**, for example: - a person with a visual impairment is using a screen reader; - the image failed to load; - the browser blocks images; - the content is being indexed by search engines. --- ### Example ```html <img src="dog.jpg" alt="A golden retriever playing with a ball in a meadow"> ``` If the image does not display, the user (or a screen reader) will "see" the phrase: > "A golden retriever playing with a ball in a meadow" --- ### Why alt text is needed 1. **For accessibility (a11y)** Screen readers *read* `alt` and announce the description: blind users understand what is shown. Without `alt`, they simply hear: > "image1234.jpg" - which carries no meaning. 2. **For SEO** Search engines cannot "see" pictures, but they read `alt`. This helps them understand the page's content and index images for image search. 3. **For a fallback display** If the image fails to load, `alt` tells the user what should have been there. 4. **For analytics and contextual advertising** Some ad and analytics systems use alt text to understand what an image is about and select relevant content. --- ### How to write good alt text **Describe the meaning, not just the contents.** Bad: ```html <img src="graph.png" alt="Chart"> ``` Good: ```html <img src="graph.png" alt="Sales grew by 25% in 2024"> ``` **Keep it short and to the point (up to ~125 characters).** **Do not start with "Image" or "Photo"**: the screen reader already announces that it is an image. **If the picture is decorative** (carries no meaning), set an empty alt: ```html <img src="decor-line.png" alt=""> ``` Then the screen reader will skip it. --- ### Comparison example | Image | alt text | Result | |---|---|---| |  | `alt="Apple company logo"` | The screen reader announces "Apple company logo" | |  | `alt=""` | The screen reader skips the decorative image | |  | *no alt* | The screen reader announces the file name: "logo.png" | --- ### Conclusion: **Alternative text (alt text)** is a **description of an image's meaning**, added through the `alt` attribute. It makes sites: - understandable for screen readers, - indexable for search engines, - usable even when a picture fails to load. Good `alt` turns visual content into a **clear text-based experience for every user**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.