DEV Community

Mirela Prifti
Mirela Prifti

Posted on • Originally published at mirelaprifti.Medium on

How to avoid “image of” or “screenshot of” in our alt text

When adding alt text to images or visual assets, it’s important to provide a concise and accurate description of the content of the image. Ideally, we shouldn’t rely on phrases like “image of” or “screenshot of” to avoid excessively wordy alt descriptions.

Here are some tips and examples that could help you create alt text more effectively.

Provide context

Consider the context in which the image appears and provide information that helps people understand the role of the image.

For example, instead of saying “Screenshot of a chart”, we could say: “Comparison chart showing search trends for the terms “chatgpt” and “twitter” on 5–6 July 2023”.


Source: Google trends

If the image is part of a series of images or contains important text or data, we should mention it in the alt text.

However, if the alt text gets too lengthy or complex , it may be more appropriate to provide a caption or include that information in the content.

Describe the content

Focus on describing what is actually in the image. Consider the subject matter, objects, people, actions, and any relevant details.

For example, for the photo below, instead of saying “Image of a street in London,” we could say: “Regent Street, London by night with Christmas lights”.


Image source: Unsplash

Be specific

Provide specific details that convey the purpose or message of the image.

Use adjectives and focus on the elements that make the image meaningful or informative, such as colors, shapes, or any other relevant characteristics.

For example, instead of saying “Image of a dog and tablet,” we could say: “A Pomeranian dog with glasses on and appearing to read on an iPad.”


Image source: Unsplash

In substance, being specific and accurate is key when writing alt text, so long as it aligns with the context of our content.

Test with screen readers

Ultimately, alt descriptions are primarily for assistive technologies so, whenever possible, we should test them with screen readers or other assistive tech to ensure they work as intended.

Thank you for reading this article! If you have any further questions or insights, or if you find inaccuracies in the content, I would be happy to hear from you. You can get in touch with me via email, Twitter, or LinkedIn.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay