Is it OK for SEO to have an image title attribute wrapped by link with a different title attribute?

Question

Does it matter if an image and the link that wraps it each have a title attribute with different text?

<a class="cboxElement"
  title="xxx"
  href="yyy"
  rel="gallery">
<img src="zzz"
  alt="hhh"  
  title="www" />
</a>

For images I usually write alt tag and title. And for standard links I use title too. But I'm not sure in this case because for 1 image I use 2 titles and I can't display them both in the same time when I mouse over it.

Does it make sense have only 1 title for image and for link in this case remove it?

Answer 1

The code in question should be read as, "Link, xxx, Image, hhh" the title property should not be read as the alt tag exists and is higher up the chain for ARIA readers. I would say the reading of the source makes perfect sense. But only one title is going to be displayed by the browser unless you have some CSS code that creates an inner border between the anchor and the image.

An ARIA-compliant page checker may issue a warning on that source.

The title is a tooltip and a fallback for ARIA screen readers. Its current usage is not very helpful so ARIA has come up with their own properties. ARIA accessablity is a legal requirement for many Government sites.

https://www.w3.org/WAI/ARIA/apg/

Non-ARIA readers will not read the HTML properties at all.

The browser is only going to show one title, and ARIA prefers alt tags.

The pattern shown by https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role is:

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="" />
  <img src="graphic2.png" />
</div>

I would suggest:

<a class="cboxElement"
  aria-label="Description of the overall image for readers"
  role="img" 
  title="Viewable but because Aria-label is in use will 
         be ignored by aria, as this is a fallback."
  href="yyy"
  rel="gallery">
<img src="zzz"
  alt="something here if needed for image search, I believe this will 
       be read because no ARIA tag is being used on this element"/>
</a>

Page should read as, "Link, Image, something here if needed for image search, I believe this will be read because no ARIA tag is being used on this element."

And if the reader is asked about images, rol="img" it should, (I'm not certain ARIA readers are complicated), read as, "Link, Image, Description of the overall image for readers." May also read, "something here if needed for image search, I believe this will be read because no ARIA tag is being used on this element", which is why Mozilla is not using the alt tag for the image in a div tag given the role of image. In Mozilla's example the images don't read within the reading of the page content, (might not flow well as the images are a reference), but read when ARIA is asked about images.

And if asked about links it should, (I'm not certain ARIA readers are complicated), read as "Link, Image, Description of the overall image for readers."

Answer 2

The image title and the alt tag can always be different. In fact it's the alt tag which is important for SEO and not the title tag.

For your reference please check the following quote from https://www.wpromote.com/blog/seo/image-alt-vs-title-using-alt-title-attributes-in-image-tags:

"Image alt text is used to describe your image textually so that search engines and screen readers (software used by the visually impaired) can understand what that image is. It’s important to note that using alt text correctly can enhance your SEO strategy. On the other hand, the image title tag is simply used to provide an image with a title, but it’s less important for SEO than the alt tag. "