[TinyMCE] Convert <strong> to <b>

Questions
1

In our current setup, when you make text bold in the TinyMCE rich-text editor, it will render strong element in the frontend. We need to change this to bfor better accessibility compliance.

I’ve update the config in the appsettings as follow. For the “ValidElements” I changed it to:
b/strong[class|style],i/em[class|style].

But when I restart de application, go to Umbraco and change some text to bold, it still uses strong.
When I save the page, it removes the strong, but no b element is added.

Also, in old text, the strong element is also removed, when I open it in umbraco. I was hoping it would automatically be converted to belement.

Am I forgetting something? Is this a bug in tinyMCE? Who can help me?

2

Tiny doesn’t do replacements, you just told it: <strong> is not a valid element, so it removes them.

The B button in Umbraco is hardcoded to add <strong>. You might need to create a custom button that would use <b> instead. Not sure.

I’d recommend a property value convertor if you just want all <strong> replaced with <b> before it gets sent to the frontend. However, if you have invalid HTML stored, you might have some trouble to get replacements to work properly. Replacing is also expensive, you need to do string manipulation on the fly and there might be a lot of it. Instead, consider replacing it in your database.

I also asked ChatGPT and it came with this warning, which might explain why I have not heard of this as an A11Y requirement before:

Be careful: switching from <strong> to <b> actually reduces semantic meaning — it makes your content less accessible.
Screen readers and search engines recognize <strong> as “important text”; <b> is purely visual.

If your accessibility auditor insists on <b>, they probably mean don’t misuse <strong> for styling — not “replace all strong tags with b”.

3

Thanks for the information, Sebastiaan. I understand the semantics of the strong element, but thanks for the warning. At the moment, due to the ‘B’ button in the editor it is misused to make content bold, not important.

I know this is also a content editor issue, but getting them to following correct guidelines is always a struggle :wink: .

4

https://www.tiny.cloud/docs/tinymce/6/filter-content/#built-in-formats

below we change some buttons to match bootstrap should be the same for the bold/italic buttons.

"CustomConfig": {
  "statusbar": "true",
  "branding": "false",
  "resize": "true",
  "formats": "{\"underline\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li\",\"classes\": \"text-decoration-underline\"},\"alignleft\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-start\"},\"alignright\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-end\"},\"aligncenter\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-center\"},\"alignjustify\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-justify\"}}" 
}
5

as sebastiaan pointed out, you can’t replace the strong tags, but you can easily make the bold button add b rather than strong by doing

"CustomConfig": {

  "formats": "{\"bold\": {\"inline\" : \"b\"} }" 
}
1 Like
6

As a note on history, the strong tag was introduced to replace the b tag to help with accessibility I would strongly recommend against changing it to use the b tag and if you received the advice from an outside party (especially an SEO provider) I would be making sure to shift away from them as soon as possible.

Want to make it accessible, make sure to use rem not px for responsive design especially breakpoints, make sure to use your aria tags, use microdata extensively (this will help your page rankings a lot more than most things) coupled with the standard tags (single h1 to a page, h2-hx in order of importance).

7

It’s not true what you are saying. There are sementic differences between the b tag and strong tag. The strong tag emphasizes a word or words semantically. So it’s correct from an accessibility standpoint. However, if you just want to make some word or words stand out without giving it any semantic meaning, you use the b tag.

I agree that in most cases, the strong tag makes more sense. And I’m not sure if it’s a good idea to just replace the tag in the RTE. But @sjvisschers already stated that the current tag is misused.

8

Ah right, sorry I thought they wanted to emphasize the words (semantically heavier weight) and that they thought (or rather had been told by an SEO firm) b would be a better way to do it (which is bad when considered in context of those with poor eyesight with custom browsers etc. as it may not work the same way).

Kinda funny, I actually grabbed the same article from MDN to paste in.

1 Like