Expand my Community achievements bar.

SOLVED

Responsive Alternate text is not working

Avatar

Level 1

Hi Members,

In the current version of AEM 6.4.8 that I am using, the responsive alternate text feature for all the Image based components are somehow not working. What I mean to say is that, when we hover over the Image the Alternate text for the Image is not appearing. Any idea, why this issue is happening or if anyone has faced a similar issue such as this in past and can suggest a way to resolve it.

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @DeepikaRoy 

 

This has been fixed with version 2.16 of the Core Components: https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/...

alt="${image.alt || true}" will render a boolean alt attribute (without the ="") if the alt text is empty, which satisfies accessibility requirements.

 

https://github.com/adobe/aem-core-wcm-components/issues/1268

 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @DeepikaRoy 

 

This has been fixed with version 2.16 of the Core Components: https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/...

alt="${image.alt || true}" will render a boolean alt attribute (without the ="") if the alt text is empty, which satisfies accessibility requirements.

 

https://github.com/adobe/aem-core-wcm-components/issues/1268

 

Avatar

Community Advisor

Hi @DeepikaRoy 
Can you share the HTML markup, which you are trying?

Example:

<img src="alt-tag-image-title-difference.png" alt="image alt tag vs title attribute" title="Understand the image alt tag and image title attribute for SEO and UX.">

The explanation of the code block for the image title attribute usage and the difference from the alt tag can be seen below.

  • “img” is used to provide an HTML image tag.
  • “alt” is for providing an image alt tag to describe the image to the search engine crawlers and the screen readers for better web accessibility.
  • “title” is used to provide an explanation of the image alt tag and image URL within the “src” attribute. shows Title on hover
  • “src” provides a URL and the address for the image file in the web server.


Arun Patidar