<?xml version="1.0" encoding="utf-8"?>

Use the image's text as an alt attribute

Use the image's text as an alt attribute Bad Practice
Use the image's text as an alt attribute Best Practice

When images contain text, the simplest and most effective approach is to use that exact text as the alt attribute. For instance, a logo with the word "Dropbox" should have an alt attribute stating "Dropbox logo." This direct approach ensures screen reader users receive the same information as sighted users.

Screen reading technologies rely on these alt attributes to verbally describe images to people with visual impairments. The alt text creates a verbal equivalent of the visual content, maintaining information parity across different ways of experiencing your product. Additionally, search engines use these text descriptions when indexing your site, improving your content's discoverability and SEO performance.

Keep your alt text concise and focused on the essential message. Avoid redundant phrases like "picture of" or "image of" since screen readers already announce the element as an image. This streamlined approach creates a more efficient and less frustrating experience for users relying on assistive technology.

Improve your UX & Product skills with interactive courses that actually work