Alt Text

Alt text (alternative text) provides a text description for images on websites. It appears when images can’t load and is read by screen readers for visually impaired users. In HTML, it’s implemented as <img src=”image.jpg” alt=”Description of image”>.

What is alt text?

Alt text is a text description assigned to an image on a webpage that serves as an alternative when the image cannot be displayed or accessed. It’s an HTML attribute that provides context about an image’s content and function, making websites more accessible to users with visual impairments who use screen readers and improving SEO by helping search engines understand image content.

Why is alt text important for SEO?

Alt text helps search engines understand and index images, which can’t be “read” like text. It provides additional opportunities to include relevant keywords, helps images appear in image search results, and contributes to overall page relevance. Google and other search engines use alt text to determine what images contain and how they relate to surrounding content.

How does alt text improve accessibility?

Alt text makes web content accessible to people with visual impairments who use screen readers. These assistive technologies read alt text aloud, enabling users to understand image content. It also benefits users with slow internet connections when images fail to load. 

What makes effective alt text?

Effective alt text is:

1. Descriptive but concise (typically 125 characters or less)
2. Contextually relevant to both the image and surrounding content
3. Purposeful – describing the function of the image if it serves as a button or link
4. Keyword-inclusive when relevant, but not keyword-stuffed
5. Not redundant with surrounding text
6. Empty (alt=””) for decorative images that don’t add meaning to the content

What are common mistakes with alt text?

Avoid these common alt text errors:

1. Using “image of” or “picture of” (screen readers already announce it’s an image)
2. Keyword stuffing that makes alt text unnatural
3. Creating overly long descriptions that overwhelm screen reader users
4. Using the filename as alt text (e.g., IMG_2942.jpg)
5. Writing identical alt text for multiple images
6. Omitting alt text entirely

How do you implement alt text technically?

The standard HTML implementation is:

<img src=”image-filename.jpg” alt=”Descriptive alt text here”>

For decorative images that don’t convey meaning:

<img src=”decorative-element.jpg” alt=””>

For complex images like charts or infographics, use alt text for a brief description and consider adding a longer description in the surrounding text.

How do you optimize alt text for both SEO and accessibility?

Balance these considerations when writing alt text:

1. Describe the image accurately and completely
2. Include relevant keywords naturally where appropriate
3. Keep descriptions concise (under 125 characters)
4. Consider the image’s context within the page
5. Focus on what’s important about the image to both users and search engines
6. Test with screen readers to ensure a good experience

Remember that accessibility should take priority over SEO when writing alt text. Fortunately, what works well for users typically works well for search engines too.