Alt Text

Why alt text matters

Alternative text (“alt text”) is essential for ensuring that images and graphics are accessible to everyone, including people who use screen readers or have images turned off. Alt text provides a concise description of an image’s meaning or function, allowing users to understand content that is otherwise visual.

Without appropriate alt text, users may miss critical information, context, or instructions. Well-written alt text supports accessibility, improves search engine optimization (SEO), and aligns with WCAG guidelines for providing text alternatives.

Writing effective alt text

Good alt text is brief, descriptive, and communicates the purpose of the image. Focus on what is important for understanding the page, not on describing every detail. The alt text should answer: “What does this image convey or accomplish?”

• Descriptive: Describe the content and function. For example, alt="Submit button".
• Concise: Keep alt text short (typically under 125 characters).
• Avoid redundancy: Do not repeat information already provided in nearby text.
• No “image of...” needed: Screen readers already announce graphics as images.
• Functional images: If the image is a link or button, alt text should explain its action, e.g., alt="Search".

Example:

HTML

<img src="search-icon.png" alt="Search">

Decorative images

Images that do not convey information or meaning can be marked as decorative. Use an empty alt attribute (alt="") so that assistive technologies ignore them.

HTML

<img src="curve.png" alt="">

Complex images and graphics

For charts, diagrams, infographics, or other complex images, provide a brief alt text and a longer text description elsewhere on the page. The alt text should summarize the main point, while a nearby caption or linked description explains details.

Sales increased steadily from 2021 ($1M) to 2023 ($2.5M), with the highest growth in Q2 2023.

HTML

<img src="bar-chart.png" alt="Bar chart showing sales growth from 2021 to 2023" aria-describedby="chart-description">
<p id="chart-description">Sales increased steadily from 2021 ($1M) to 2023 ($2.5M), with the highest growth in Q2 2023.</p>

Related WCAG resources

The guidance for writing alt text is adapted from the Web Accessibility Initiative (WAI) documents: Images Tutorial (WAI) in the Web Accessibility Tutorials. Copyright © 2019 W3C® (MIT, ERCIM, Keio). Status: Updated 27 July 2019. https://www.w3.org/WAI/tutorials/images/