RTE support for aria-labels | Community
Skip to main content
srikanthp689160
srikanthp689160
Level 4
July 6, 2020
Solved

RTE support for aria-labels

  • July 6, 2020
  • 2 replies
  • 5394 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Vaibhavi_J

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#ProtectagainstCrossSiteScriptingXSS

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

2 replies

Vaibhavi_J
Vaibhavi_JAccepted solution
Level 7
July 6, 2020

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#ProtectagainstCrossSiteScriptingXSS

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

    srikanthp689160
    srikanthp689160Author
    Level 4
    July 6, 2020
    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
    Adobe Employee
    vanegiAdobe Employee
    Adobe Employee
    July 6, 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/org/apache/sling/commons/html/HtmlParser.html

     

     

    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-select.html

     

     

    Thanks,

    Vaishali

      srikanthp689160
      srikanthp689160Author
      Level 4
      July 6, 2020

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

      Terms & ConditionsAccessibility statement

      Loading footer...