AEM 5.6.1. Empty Alt tag removed from RTE

[Stenix]

Hi there.

We've got an Accessibility requirement to allow empty alt tags (alt="") for images. 

Currently if we add an image to the rte that has no alt, or edit the source to have <img alt="" src="image.jpg"> the empty alt tag is stripped out on save.

Is anyone aware of a way to disable this removal of the empty alt tag?

Thanks

[Jitendra_S_Toma]

Stenix,

Is there any benefit you are getting out of keeping empty "alt" tag?.

Actually, There is condition written in the image component which checks the emptiness value of "ALT" tag. And, this is something can't be overruled by some configuration.You have to inherit the image component & override the jsp/sightly.

---Jitendra

[Stenix]

Yeah. The empty alt tag is for accessibility, and is for the screen readers that the blind users use. Having an empty alt tag enables the screen reader to skip the image so it doesn't read the name of the file to the user.

I'll take a look at that - although when I was checking I didn't see that ALT emptiness check.

[Jitendra_S_Toma]

Stenix,

If you look at the implementation of the image component, Image object sets many things, but not "ALT" tag and draw method render the final image tag.. Though Image API does provide "setAlt" method.

You could use that. But, you may require to re-write our own image component (inherit exiting image comp) for small change.

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/javadoc/com/day/cq/commons/ImageResource.html#get...()

--Jitendra

[edubey]

Hi,

One approach I could think of you can  use JS, just search for all <img> tags if any is not having 'alt' attribute , add one with with empty value.

this will very simple 5 lines of JS code and will work.

[Stenix]

Thanks - I'll consider this one, just need to confirm the exact requirements to see if they always want the empty alt, or if there will be times where the want no alt at all.

I've done a bit more digging and for the RTE, it looks like and empty attribute is remove. For example I added <img test="this" src="image.jpg"> and this was displayed, but <img test="" src="image.jpg"> the 'test' attribute was removed. I think it's happening maybe in the DOMCleanup or one of the other RTE js - will do a bit more investigation, see if I can nail it down.

[Jitendra_S_Toma]

In my opinion, This solution could lead to another problem in terms of page performance. Searching all the images in whole page and DOM manipulation will happen on every page load. Which isn't something we should be doing.  

--Jitendra

[edubey]

good point brother

..coming to point of vanilla JS which is default JS. It pretty much faster than Jquery and angular js. 

Doing  data = document.querySelectorAll('img'). will not affect any performance on site. We wont be manually traversing all dom, that something vanilla has to do efficiently because its the sole purpose of it.

Thanks

[kautuk_sahni]

Hi Stenix

As far as i know, even for screen reader we should always have alt tag for image.

And that tag should not be blank, because screen reader will use it. If this tag is missing then, screen reader would fall back to src attribute. So keeping it blank would mean, not reading anything and preventing a fall back.

But if you use case is to prevent fallback and not to read out anything, then to preserve it, we can follow following:-

Option 1:-  As mentioned by Tomer, to  re-write own image component (inherit exiting image comp) for small change.

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/javadoc/com/day/cq/commons/ImageResource.html#get...()

Option 2:- Easy workaround, To create a OSGI service, that will search for all img tags and add blank alt attributes to it.

//Use jsoup for the same.

Document doc = Jsoup.connect("http://en.wikipedia.org/").get();
Elements newsHeadlines = doc.select("#mp-itn b a");
Or if you want the body:

Elements body = doc.select("body");
Or if you want all links:

Elements links = doc.select("body a");

Link:- http://jsoup.org/

Link:- http://javarevisited.blogspot.in/2014/09/how-to-parse-html-file-in-java-jsoup-example.html

Option 3: As mentioned by Praveen, write a JS code, to replace img tags, 

// var $a = document.getElementById("a");
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);

Link for code demo :- http://jsfiddle.net/xnkjn/

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[Jitendra_S_Toma]

@kautuksahni,

Regarding the second option, I would prefer Sling TransformFactory which is easy to create a custom TransformFactory and transform our HTML response as you want.

Here is the hint to achieve so. https://gist.github.com/ryanlunka/5336471

--Jitendra

[kautuk_sahni · Accepted solution]

Hi Tomar

Yes, you are right. We can have many ways to achieve it. I am not sure if "TransformFactory" is best way to do so, but yes it is also a way.

1. TransformFactory

2. JSOUP

3. XSLT (https://en.wikipedia.org/wiki/XSLT)

This is great that community is enriching everybody.

Thanks and Regards

Kautuk Sahni