RTE support for aria-labels

srikanthp689160

05-07-2020

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?

aria-label RTE RTE Hyperlink issue wcag

Accepted Solutions (1)

Accepted Solutions (1)

Vaibhavi

MVP

06-07-2020

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

Answers (1)

Answers (1)

vanegi

Employee

06-07-2020

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