Add Highlight button to TinyMCE toolbar to allow highlighting (replaces Underline with <mark> element)

[mor10]

Extending #27159

Highlighting of content has become popularized thanks to platforms like Medium, and providing a proper semantic highlighting function in the TinyMCE editor will allow authors to bring attention to content without adding emphasis - an important difference for accessibility.

The Highlight button would trigger the <mark> element: ​https://developer.mozilla.org/en/docs/Web/HTML/Element/mark

Reasoning:
With the removal of the Underline button, authors will not be able to highlight text without either emphasizing or strongly emphasizing it, or using the text editor to manually apply the <mark> element. Why is this needed? Emphasis changes the meaning of content, especially when using accessibility tools like screen readers, and it is unreasonable to expect the average WordPress user to know the existence and purpose of relatively obscure HTML elements.

[iseulde]

I don't mind adding this. It is especially useful for quotes.

Any icon suggestions? Maybe a white "A" with a dark background? Although this might be confused with the background icon (if available) or confusing if the theme styles it differently. Maybe this with some kind of marker added would be good, or a marker on its own.

[mor10]

Replying to iseulde:

Any icon suggestions? Maybe a white "A" with a dark background? Although this might be confused with the background icon (if available) or confusing if the theme styles it differently. Maybe this with some kind of marker added would be good, or a marker on its own.

The industry standard seems to be text overlaid with a marker. This is what it looks like in MS Word 2013:

[mrwweb]

Do we have any data on how well themes style this and/or whether the default browsers styles work well with most designs? I have used <mark> in the past (it should probably be my favorite HTML, I suppose...)

Additionally, I went back to review [the definition of <mark>](​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) and it makes me wary:

Do not confuse the <mark> element with the <strong> element. The <strong> element is used to denote spans of text of importance in context of the text, when the <mark> element is used to denote spans of text of relevance to a different context.

This feels to me like something theme authors should opt into. Give how easy it is to filter buttons or add the styleselect (where you can give it a semantically appropriate name), I'm not sure I'd back adding it to the editor by default. Is this something people would be able to use correctly enough to make it worth including?

[mor10]

Replying to mrwweb:

Additionally, I went back to review [the definition of <mark>](​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) and it makes me wary:

Do not confuse the <mark> element with the <strong> element. The <strong> element is used to denote spans of text of importance in context of the text, when the <mark> element is used to denote spans of text of relevance to a different context.

This is exactly the scenario I want the highlight button to serve. I think users understand the difference between highlighting something using a highlighter and emphasizing the content. The scenario I exemplified in the screenshot in the other ticket is precisely one where the highlighting denotes a span of text that has relevance in a different context.

[desrosj]

I found an issue on the Gutenberg repository that requested the same functionality requested here. I have reopened that issue and referenced this request, as I still believe this would be a beneficial enhancement.

Feel free to chime in over there to help push that along!