Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

RTE support for aria-labels

srikanthp689160
Level 4
Level 4

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution
Vaibhavi_Gowda
Correct answer by
Community Advisor
Community Advisor

Hi @srikanthp689160 , 

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

 

AEM uses XSS (Cross Site Scriptingprotection  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

View solution in original post

0 Replies
Vaibhavi_Gowda
Correct answer by
Community Advisor
Community Advisor

Hi @srikanthp689160 , 

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

 

AEM uses XSS (Cross Site Scriptingprotection  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

View solution in original post

srikanthp689160
Level 4
Level 4
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.
vanegi
Employee
Employee

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
Level 4
Level 4

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".