Alt Tags (Again)

I am in the process of updating hundreds of images of kitchens my cabinet shop produces. As part of this campaign I am trying to be diligent about including Alt Image Tags.

My question has to do with how much structure the alt tag should include. “Copper Sink” might be good enough for SEO purposes but if I want the site to be useful for Accessibility Readers would I not want it to read “Kitchen with under-mount copper farmhouse sink”?

Does it need to have all the syntax you would normally find in a sentence to be useful to the Accessibility reader?

I sometimes will include three different perspectives for this copper sink. Each perspective is unique but the salient information is essentially the same. Would I need to recompose these sentences for each perspective or could I repeat the same ALT-Image text three times?

The purpose of the alt tag is to describe the image.
Do that and you will be good.

One of the gallery stacks I am experimenting with is Nick Cates Photo Base.
In that stack he offers the option to use the Photo Caption as both ALT tag and Title Tag.

I use my website to pre-train customers before we meet.
A typical mini-blog about microwaves might have a description as depicted in attached jpeg.

I want the website to work well with Accessibility Readers.
A computer drone that just utters “Microwave in Island” seems pretty austere.
To be significant it needs to guide you to a solution.

Would this amount of text be too verbose for an ALT Tag? Does too much text get penalized in SEO?

It really should describe the image, If I can’t see the picture, tell me what I missed. The text on the rest of the page is still readable by screen readers including captions if they are displayed.

As for SEO don’t spend much time with it. Visible content text) on the page is much more important.

Am I correct in interpreting that the ALT tag is being read by the Bots as search criteria.

The CAPTION text is what the screen reader uses for the audible presentation to sight-impaired people?

Could I theoretically engage a screen reader to audibly tell me what my website is actually saying to sight impaired audiences?

Are there certain types of fields that the screen reader responds to?

For actual SEO, what’s visible on the page is most important. The alt text can be used for search engines to know what’s in an image. When you click on image search in Goole, it will help your images appear there.

As to accessibility testing, etc., here’s a pretty good site:

Screen readers read everything. The can’t see an image so the read the alt text in place of the image. That’s the reason for alt tag, for screen readers, also if the image fails to load for any browser the alt text is what will show.

If you have any chrome browser and want to try a screen reader out you can install ChromeVox Classic Extension. I will warn you that if it’s installed it’s on. You have to remove it to stop it.

If you want to test for all a11y(accessibility), then on any chrome browser try Accessibility Insights for Web.

  • It will add a menu item to the browser (heart with looking glass).
  • Open the page you want to test and click the “FastPass” option2020-01-03_11-39-51
  • It will launch a new browser window with a summary of errors2020-01-03_11-42-26
  • On the original page window(behind the summary), it will indicate where the error is located
  • you can click on the error and get additional information, and inspect the HTML that has the error.
2 Likes

I have another question:

If I wrote a fairly comprehensive caption (three sentence paragraph) for an image then copied and pasted into ALT Tag would I be penalized by SEO for seemingly seeding too many keywords into ALT tag?

Doug, you wrote: [quote=“teefers, post:7, topic:30463”]
If you have any chrome browser and want to try a screen reader out you can install ChromeVox Classic Extension. I will warn you that if it’s installed it’s on. You have to remove it to stop it.
[/quote]

How would it being on manifest itself? Does it just run in the background and wait for me to engage it or does it bog down any other computer resources?

Is it a big deal to remove?

I just reinstalled it and now it seems you can turn it off in the extension manager.

  • In any chrome browser(Chrome, The new Edge, Opera, etc) open the link above.
  • Install the screen reader.
  • Under Window tab, you should find extensions2020-01-04_12-05-37
  • find the Chrome Vox Classic Extension, from there you can turn it off or remove it2020-01-04_12-07-56

When on it will read, try hitting the tab button or selecting stuff with a mouse.

Okay,

Not sure why you would do that. The search engines can read the caption, so there is no need to duplicate it in the Alt text field.

alt tag has very little effect on SERP rankings. What can be seen on the page by users(captions in this case) is going to be what counts for Search engines and the user. “Keyword Stuffing” as well as duplicate content is frowned on by search engines and can get you a penalty.

Here is a link that might explain the alt-tag a bit:
https://dequeuniversity.com/rules/axe/3.3/image-alt?application=msftAI

Thanks for all your patience here.

My thinking about copy and paste had to do with efficiency on my end. I was already going to develop the text for caption description so I thought it would save steps if I did not have to think about new text for ALT images.

My next question would be whether or not you need ALT text if you also have Caption Text?

If the caption was a paragraph in a container (that also contained the image) would it automatically be correlated with the image from a reader’s perspective?

I understand what you mean by SEO penalizing keyword stuffing. Would that somehow mean I should not re-use caption text from one webpage on another webpage?

The answer from a technical specifications side would be you need an alt tag. You can have a null alt tag

Provide “null” alt attributes (using alt="") for images which do not provide information or do not require alternative text because the image is described in the page content. Some developers will mistakenly leave off the alt attribute altogether on images which they deem do not need alternatives.

The only way you can ensure this by using the aria-labelledby attribute on the image. That’s possible from an HTML coding technique, but I don’t think you can add that with image or gallery stacks.

How it works from the a11y perspective is that the aria-labelledby attribute has an id given. The paragraph or caption would have that id assigned to it. The screen read would then know that the two are related.

Now in your case, since the image is totally described on the page, you could use the null method alt="".

The screen reader would then assume the image is a “Decorative Element” and would skip over the image.

You could also use the HTML5 <figure> and <figcaption> elements to insure the caption and image are related. But again, It depends on the stack you are using, if they would support that.

As for that, my best advice is to always build websites for users, not search engines. If it makes sense to use the same pictures with the same captions on different pages for the user experience then do it.