AEM 6.3 alt text should be blank space when we author with space in alt text.

Forum|Forum|3 years ago
May 17, 2022
3 replies
2113 views

Hi,

for decorative image.

When I am authoring if I enter the space in alt text value is not getting empty alt text like alttext=" ". when enter the text in alt text I am getting alttext= "text".

Can any one help on this.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by nave_27

Hi,

Correct answer to make alttext = " " , when image is not decorative.

<sly data-sly-test="${properties.bannerImagePath && properties.decorative}">
   <img src="${properties.bannerImagePath}" class="bg-img hide-img-mobile"/>
</sly>
<sly data-sly-test="${properties.bannerImagePath && !properties.decorative}"> 
   <sly data-sly-test.blankSpace="${properties.bannerimagealttext}"><img src="${properties.bannerImagePath}" alt="${properties.bannerimagealttext}" class="bg-img hide-img-mobile"/></sly>
   <sly data-sly-test="${!blankSpace}"><img src="${properties.bannerImagePath}" alt=" " class="bg-img hide-img-mobile"/></sly>				
</sly>

RajaShankar

Community Advisor

Hi @naveen_27_05

For Decorative Images( Images which dont need Alt text since they are used for decorative purpose which means they will ignored by assistive technology for ADA purpose). Now i am not clear why you want to add ALT text for a Decorative Image. In short Alt text is supposed to be blank/empty for decorative image.

Regards

Rajashankar.R

N

naveen_27_05Author

Level 2

Hi Rajashankar,

Yes, I have created For Decorative image if image is decorative alt text is not required I agree but when image is not decorative when we author alt text with value I am getting alttext = "value" if I author with blank space in alt text that is not working. output is not coming like alttext=" ".

Thanks.

N

nave_27Accepted solution

Level 2

Hi,

Correct answer to make alttext = " " , when image is not decorative.

<sly data-sly-test="${properties.bannerImagePath && properties.decorative}">
   <img src="${properties.bannerImagePath}" class="bg-img hide-img-mobile"/>
</sly>
<sly data-sly-test="${properties.bannerImagePath && !properties.decorative}"> 
   <sly data-sly-test.blankSpace="${properties.bannerimagealttext}"><img src="${properties.bannerImagePath}" alt="${properties.bannerimagealttext}" class="bg-img hide-img-mobile"/></sly>
   <sly data-sly-test="${!blankSpace}"><img src="${properties.bannerImagePath}" alt=" " class="bg-img hide-img-mobile"/></sly>				
</sly>