Expand my Community achievements bar.

SOLVED

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

Avatar

Level 3

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.

1 Accepted Solution

Avatar

Correct answer by
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>
 

 

View solution in original post

6 Replies

Avatar

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

 

Avatar

Level 3

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. 

Avatar

Correct answer by
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>
 

 

Avatar

Community Advisor

Hi @naveen_27_05 

Would you like to try this?

"${image.alt ? image.alt : ' '}"


Regards,

Santosh

Avatar

Level 3

HI Santosh,

 

I have tried this. alt="${properties.decorative ? ' ' : properties.bannerimagealttext}". not working.

 

Thanks.