Search code examples
aemrich-text-editor

Add attribute to anchor in AEM Rich text editor Link

I am working on making one of the AEM website of my client accessible. For the same, I want "aria-label" attribute should be added(value can be provided in authoring dialogue) to the anchor tag, when the target selected is "New tab". Could not find much around it, following link describes we can customize the rtePlugin/linkPicker. But could not figure out my problem. Any help/guidance

http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html

Solution

  • Option 1) Reuse Alt Text/title from otb anchor link. No need to customize dialog. When Alt Text is authored otb will populate title like this <a title="Google" href="htttps://www.google.com">Google Link</a>

    enter image description here,

    You will then need to Write a Link Transformer 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. If link rewriter is difficult, you can also rewrite the rte text from a sling model while saving the RTE text. Use a Jsoup parser to parse HTML, rewrite by copying title to aria-label and write back into JCR.

    Option 2) Adding new text box for aria-label to dialog. You can refer to this blog post. But this option is needed only when Alt text is different from aria-label which I wonder why. Usually aria-label and titles are same and option 1 above will suffice.