What is ALT-Text and how do I use it?

Written by Jane Broomfield | 04/05/21 15:10

Is alt-text a legal requirement?

YES! Alt-tags are part of the accessible design laws in the UK and US so you should use them on all images. However, if you have images that form no real purpose (spacers etc) then the alt-tag can be null.   <img src="image.png" alt="">   This ensures that screen readers used by visually impaired skip over the image.

What should be in the alt-text?

HubSpot defaults the file name into the alt-text. You can change this on your blog post, email, landing page etc. by opening the page in the designer and right-clicking on the image.

Images should have accurate, helpful alt-tags that describes the image – for SEO and accessible design purposes.

 

Should I use keywords in ALL my images?

No. Google seems to spot keyword stuffing so perhaps the recommendation would be to find relevant images where it would be legitimate to use keywords to describe that image.

Quote from Google: “Filling alt attributes with keywords (keyword stuffing) results in a negative user experience, and may cause your site to be perceived as spam.”

More from google: https://support.google.com/webmasters/answer/114016

What other things can I do with alt-text?

For images that are hyperlinked, you can add an instruction in the alt-tag, e.g. “Buy this dress”

I have read that Google picks up the first 16 words, others say 10, and Moz (more helpfully) says 60 characters - but none of this came from Google. Nonetheless, it makes sense not to make the alt-tag too long for the visual impact (when someone hovers over the image in IE or views the page with images switched off).

What is a title tag?

The title tag shows the user a “tool tip” when hovering on the image. Hover over the 'Alt' image to see an example of a title tag.

HubSpot automatically sets the title-tag to match your alt-tag.  But you can go into the HTML on the page to change it. 
  <img src=“image.jpg” alt=“image description” title=“image tooltip”>  

So, if the image is a dress that's in your sale, you could have a title-tag of “Buy this dress now and save 20%”.  All page viewers will see this as they hover over the image.