The Title

Blog

How to Maximize Alt Text and Why it's Important

There's a lot to consider when delivering image content to your audience. We take a deep dive into alt text and why it's so important.

Kurt Weiss
Kurt Weiss
Senior Product Designer
How to Maximize Alt Text and Why it's Important

An Introduction to Alt Text for images

There’s a lot to consider when delivering image content to your audience. One of those things is alternative text, or alt text . Alt text is an HTML meta attribute attached to an image. The purpose of alternative text on images is to make them more accessible to the screen readers and search engine crawlers that will eventually digest your web content. Helping users understand the image and other content associated with it is the key purpose of alt text.

 

Why Alt Text is Important for Accessibility

According to the CDC, 61 million adults in the United States live with some form of disability; that’s about 26% of the adult population, or one in four people! That means a significant portion of the population requires assistive technologies to comfortably navigate websites and applications.

An example of someone benefiting from alt text is if that person had limited vision and chose to use a screen reader to surf the web. The screen reader would read aloud the image meta provided in the alt text thereby making that image more accessible. By making your content accessible to screen readers you are making your content accessible to a bigger group of users.

 

Why Alt Text is Important for SEO

Enriching your images with alt text will improve your search engine optimization ranking. When a web-crawler crawls your content it uses the image alt text to determine ranking and relevance. Including relevant keywords within the alt attribute will improve your chances of ranking higher for your targeted keywords.

 

Good and Bad Alt Text with HTML Examples

html alt text example

Alt Text Example

<img src="puppy-laying.png" alt="dog laying">

 

The alt text in this example is “dog laying” and is defined within the HTML “alt” attribute of the “img” tag, “src” specifies the path to the image.

 

A Good Example of Alt Text

 

<img src="adorable-puppy.png" alt="dog laying on sofa">

 

The alt text here is good because it is relevant to the image and gives context to the reader.

 

 

Okay Examples of Alt text

<img src="adorable-puppy.png" alt="dog">

 

The alt text here is okay because it is relevant but it could have more context.

 

<img src="puppy-laying.png" alt="">

 

Bad because the “alt” attribute is left empty and offers no context to the reader.

 

 

Bad Examples of Alt Text

<img src="puppy-laying.png" alt="image for article">

 

Bad because the “alt” attribute offers no context to the reader.

 

<img src="puppy-laying.png" alt="">

 

Bad because the “alt” attribute is left empty and offers no context to the reader.

 

 

html alt title example

Tip: Create a tooltip for an image by using the “title” attribute.

 

 

Tips for Writing Good Alt Text

 

  • Articulate to convey meaning in context

  • Shorten alt text to less than 125 characters

  • Include meaningful keywords

 

 

 

Mistakes to Avoid When Crafting Alt Text

 

  • Avoid using the same alt text for different images on the same page

  • Alt text that is too general to extract meaningful information

  • Using alt text that is user-unfriendly and difficult to read, e.g. word soup titles like ‘photo-image-12-12-2022’

 

How to Audit Images by Checking their Alt Text

Browsers like Google Chrome have Inspect tools to assist with spot-checking images. Auditing tools are available to test your content too.

 

Checking if an Image Has Alt Text Using a Desktop Browser Tool by Inspecting It

 

  1. On a webpage, right-click the image you want to see the alt text for.

  2. On the menu that appears, select inspect HTML. In Chrome or Firefox, select "Inspect." For Edge, choose "Inspect Element."

  3. A pane displaying HTML should appear. Look for the HTML tag that says "alt=." What follows will be the alt text description

RELATED ARTICLES

Tags:   alt text   ada   seo