The "title" attributes don't provide additional info for the image links

[ndolter]

URL: https://recalls-rappels.canada.ca/fr/avis-rappel/rappel-certains-produits-vegetaliens-et-vegetariens-marque-happy-veggie-world-hearts User Agent: Chrome v98 Language: English & French

Issue Description:

1. The "title" attribute should be removed from the image links as there is an alt attribute. The title name provides no meaning to the user.
2. On the French page the alt attribute is bilingual and should only be in the language of the page. The English text is not necessary.

Steps to reproduce:

1. Navigate to the url above. Or search on: Certain Happy Veggie World, Hearts Choices, and Vegefarm brand vegan and vegetarian products recalled due to undeclared egg
2. View the code or hover over the image with the mouse

Expected Result:

1. Not all screen readers read the "title" attribute by default. Those that do will read the link description and title attribute one after other which makes it repetitive. Further, the "title" attribute value displays as a tooltip when user hovers over the link. However, it is not keyboard accessible.
2. Remove the English text from the alt attribute on the French page

[echouin]

@mmiron-HC, similar to what was noted for #130 by @davidgotlieb it is an issue with our older migrated content.

From OP:

That is migrated content. That was all brought in 'as is'. If you want to fix it, the best way is to build a modern recall with the information.  There is a lot in bad html in the migrated content, other than manually fixing it, there isn't much that can be done with the mark-up.

[mmiron-HC]

@echouin This should not need a modern recall to be built. Isn't this just a DB clean up? The title isn't a required field. Therefore, should you not be able to run a clean up script to remove the titles from the images? Also, who is training the users when they are entering alternative text? They should tell them NOT to use the title field.

[davidgotlieb]

@mmiron-HC They aren't provided the option to add a title in the new system when they do bulk upload, so it shouldn't be a problem for new recalls.

Quality of old data is not something we are touching as part of this project. We have 19000 recalls, and frankly none of it was accessible or coded properly. If we try to tackle that we will be spending another 4 years just cleaning up the old recalls.

[mmiron-HC]

@echouin If they are creating new recalls with titles that are redundant to the alternative text this is still going to fail. There is no reason to need a title element on the image. as for the older recalls, we will make a note to management that the older information may not be fully accessible. They will have to decide what they want to do with it.

[davidgotlieb]

@mmiron-HC There's no opportunity to add a title to the image on new recalls so they won't be redundant.

Here's the image element from a new recall:

img class="mediaimage mediaelement lazy img-responsive" src="/sites/default/files/styles/x_large/public/alert/recall/64006/Stellar%20Bay%20Shellfish%20-%20Oyster%2C%20Kusshi%20Large%20-%20March%207%20Harvest%20Date%20Tag_0.jpg?itok=uWwD7UO0" width="492" height="282" loading="lazy" typeof="foaf:Image" alt="Stellar Bay Shellfish - Oyster, Kusshi Large - Harvest Date: 03-07-22" style="opacity: 1;"

[davidgotlieb]

As far as training people on Alt text quality etc, it's not a bad idea and we can definitely look into it. It's not something specific to this project as it would have been a problem with the old system as well, but it's something that makes sense as a way to improve the quality of data.

[mmiron-HC]

@davidgotlieb re: alt text. This is a must. They cannot be adding French/English alternatives to images, this fails under 3.1.2 and is considered a serious issue. As for the title element, they can enter the title on a recall when they upload an image see screenshots.

[davidgotlieb]

@mmiron-HC They are definitly aware of the need to add an alt tag in the language of the page, that's always been a requirement. We've also purchased SiteImprove for the site so we can monitor for these types of issues as well.

Re: Title tag, my bad. I forgot it was there. It is optional and I doubt anyone is using it to be honest, it's just something that's built into the feature.

[mmiron-HC]

@davidgotlieb SiteImprove will not catch issues with the alternative text content. It will just identify images that have missing alt tags and since you've made the alternative text fields mandatory, Site Improve will never flag these as a problem.

[echouin]

This is a data input issue. We are continually working with our partners to ensure correct alt tagging. Records prior to Nov. 1, 2021 (new website launch) may still have issues with alt tags but those are fixed if the entry is updated. Considering this issue resolved.

[zimw7]

Issue still exists. The img tag still contains the title attribute, and the English text is still in the alt attribute on the French page.

[YuxuanXie01]

Retested, issue persists as noted in echouin's comment: "Records before Nov. 1, 2021 (new website launch) may still exhibit alt tag issues, which are corrected upon updating the entry." The last update for this warning was on Oct. 15, 2021. Regarding the use of two languages in the same alt text, we should either remove the English text or write something like following for future cases: <span id="brand" lang="en">Happy Veggie World</span> <span id="description" lang="fr">« Patty de poulet croustillant (viande simulée) » - 3 kilogrammes</span> <img src="example.jpg" alt="" aria-labelledby="brand description" />

[40999221]

Issue still exist.Title attribute is still there for image and alt text still have English text for brand name. Not sure if they want to keep the brand name English, if so then need to use section level lang="en" attribute for product brand name.

[mmiron-HC]

Closing this ticket due to the fact that this is an end user entered field. Training has been provided to end users and more recent images no longer have the title attribute on images.