Wednesday, October 16, 2019

Accessibility in AEM: Bold vs Strong and Italic vs Emphasis

Hello Everyone,

Web accessibility refers to the practice of using website design and development that
removes obstacles of access or usability for people with disabilities(blind people). 
If you want to make your online content accessible to those using a screen reader:
  • Avoid from using style tags such as <b> and <i>
  • Use semantic tags <strong> and <em> (italics)

In AEM, to render content in form of Text we use RTE component and OOTB RTE plugin contains <b> and <i> tags.

Now the question is, if there is any way to convert these tags into the corresponding
semantic tags in RTE component and if yes then how?

Here is the step by step procedure:
  • Add a htmlRules node of type (nt:unstructured) parallel to rtePlugins.

  • Under htmlRules, create a node name “docType” of type nt:unstructured.
    • Add a property called baseType of value “html”.
    • Add a property called version of value “4.0”.

  • Create a node “typeConfig” of type nt:unstructured under the node docType.
    • Add a property called isXhtmlStrict of  boolean {true}.
    • Add a property called “useSemanticMarkup” of boolean{true}.

That’s all. You drag and drop the RTE component and configure the bold and italic plugins. The <b> and <i> will automatically get converted into corresponding semantic tags i.e.,“strong” and “em”.

Below is the screenshot that shows how the tag gets converted into its semantic tags.
Fig: After Converting Semantic Tag
Advanve UseCase:
If there are any other tags which you want to convert into corresponding semantic tag
or if you want to convert <i> to <em> but don't want to convert <b>, or want to
convert any other tag for example <u> to <label> tags, so you can put mapping also..
In continuation with the above steps, we need to add one more step as shown below.
  • Create a node “semanticMarkupMap” of type “nt:unstructured” under the node “typeConfig”.
    • Add a property b and value as "b".
    • Add a property i and value as "em".
    • Add a property u and value as "label".


This is how the DOM looks like after the above mapping. By the advanced use case you can convert any tag to any other tag just by configuring the mapping here.
Fig: The DOM after mapping of tags
Note: "label" is not a semantic tag of "u".I just want to show the example of how to map one tag to some other HTML tag in RTE.



Hope it will help you guys !!
Thanks and Happy Learning.

1 comment:

  1. Thank you very much for your info. I found it works with dialog. But when I tried to edit rte text with inline mode, semanticMarkupMap is not working correctly. Do you know the configuration for in-line editing.

    ReplyDelete