RTE support for aria-labels

[srikanthp689160]

Hi,

We are leveraging OOTB RTE i.e. Text component wherever Bodycopy content needs to be authored. We are also implementing WCAG 2.0 guidelines which requires to have aria-label for links within RTE. We have tried to add aria-label via Source Edit plugin but while data is being stored, aria-label is getting stripped off. 

Can anyone let us know if there a way to achieve this?

[Vaibhavi_J · Accepted solution]

Hi @srikanthp689160 , 

Have you checked if aria-label tag is whitelisted in xssprotection. 

AEM uses XSS (Cross Site Scripting) protection  to prevent attackers to inject code into web pages viewed by other users, is based on AntiSamy Java library provided by OWASP. 

If the tags are not whitelisted, tags will be stripped off while rendering. 

To fix the issue, 

1.Navigate to /libs/cq/xssprotection/config.xml

2.overlay the file under apps. 

3.Add the below code. 

<tag name="a" action="validate">

    <attribute name="aria-label ">

        <regexp-list> 

           <regexp name="anything"/>

       </regexp-list>

    </attribute>

</tag>

Above code will allow the aria-label attribute inside anchor tag. This should fix your issue. 

You can refer to below documents to understand in depth. 

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/security.html#ProtectagainstCr...

https://helpx.adobe.com/experience-manager/kb/target-attribute-issue-tag.html

[srikanthp689160]

Hi, whitelisting aria-label did not help, when we re-open component dialog, i don't aria-label, even on page can't see aria-label in preview or view as published without re-opening dialog.

[shikhasoni1]

Hi Vaibhavi, I followed everything but after saving and reopening the dialog again the value is showing as undefined.

 below is the error in error.log

17.05.2022 21:05:34.012 *INFO* [0:0:0:0:0:0:0:1 [1652801733843] GET /content/hyundai/com/us/en/jcr:content/footerResponsiveGrid/footer.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The aria&#45;label attribute has been filtered out, but the tag is still in place. The value of the attribute was "4653".

Could you please help on this.

[vanegi]

Hello Srikanth,

As aria-label attribute is used to define a string that labels the current element. It is used in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-label by instead. There are following approaches to add aria-label:

1) Reuse Alt Text/title from OOTB anchor link. When Alt Text is authored, OOTB will populate title like this <a title="title" href="/content/we-retail/us/en.html">Test</a> You will then need to Write a Link Transformer [0] to copy title into aria-label. The rewriter will look for anchor tags; if title is present, copy into a new attribute aria-label and rewrite the anchor. Other option is to rewrite the rte text from a sling model while saving the RTE text. Use a Jsoup parser [1] to parse HTML, rewrite by copying title to aria-label and write back into JCR.

[0]: https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html

[1]: https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/javadoc/or...

2) Another way to add new text box for aria-label can be seen here [3]. You can refer to this blog post.

[3]: http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-sele...

Thanks,

Vaishali

[srikanthp689160]

Hi Vaishali,

I tried 2nd approach, instead of creating a custom textfield for aria-label within <a> tag plugin, i had manually added aria-label attribute in Source Edit plugin.

I have added entries in /apps/cq/xssprotection/config.xml but see below message in error.log and aria-lable gets stripped off. Am i missing anything here?

org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The aria&#45;label attribute has been filtered out, but the tag is still in place. The value of the attribute was "please fill out the form found here".