[wp-trac] [WordPress Trac] #62861: Consider removing title attributes from Classic Editor scripts

Thu Feb 20 20:33:14 UTC 2025

#62861: Consider removing title attributes from Classic Editor scripts
-------------------------------------------------+-------------------------
 Reporter:  sabernhardt                          |       Owner:  joedolson
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  low                                  |   Milestone:  6.8
Component:  TinyMCE                              |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  title-attribute 2nd-opinion has-     |     Focuses:
  patch                                          |  accessibility
-------------------------------------------------+-------------------------

Old description:

> Related: #24766
>
> The WordPress script adds `title` attributes to the placeholder images
> for `style`, `script`, More and Next Page tags.
>
> - The [https://github.com/WordPress/wordpress-
> develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L119
> More tag] and [https://github.com/WordPress/wordpress-
> develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L128
> Next Page tag] have an empty `alt` but use a `title` attribute (like
> `alt="" title="Read more..."`). The title text theoretically could be
> assigned as the `alt`, though the tooltip could help in cases of low
> color contrast.
> - The [https://github.com/WordPress/wordpress-
> develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L217
> WP_More command] has a similar pattern for More and Next Page tags, but I
> did not find how—or if—that is used.
> - [https://github.com/WordPress/wordpress-
> develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L142-L151
> Style and script tags] have redundant `title` attributes, matching their
> `alt` text (like `alt="<style>" title="<style>"`). However,
> the tooltip is the only way to distinguish these two placeholders
> visually (unless it's worth replacing the transparent GIF with something
> like a
> [https://gist.github.com/sabernhardt/8804da31aed02f0c535306bdb2749446
> text-based SVG]).
>
> Additional `title` attributes are in other (external) TinyMCE-related
> scripts. If someone would like to edit and/or replace any of these
> scripts, please open a separate ticket (for each).
>
> - The [https://github.com/WordPress/wordpress-
> develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/charmap/plugin.js#L1141
> character map plugin], which is designed for mouse users, has two title
> attributes for each character. The script [https://github.com/WordPress
> /wordpress-
> develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/charmap/plugin.js#L1186
> uses the `td` title later] for the larger preview on the side. Switching
> each 'button' div's title to an ARIA label might be a //small//
> improvement. (Note that the
> [https://github.com/tinymce/tinymce/blob/6d4d3b8fc862253bc756fdaca60254251fa45277/modules/tinymce/src/themes/silver/main/ts/ui/dialog/Collection.ts#L68
> latest charmap plugin] does not have titles anymore.)
> - `form_utils.js` has tooltips in [https://github.com/WordPress
> /wordpress-
> develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/utils/form_utils.js#L20-L21
> getColorPickerHTML()] and [https://github.com/WordPress/wordpress-
> develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/utils/form_utils.js#L58-L60
> getBrowserHTML()], but I did not find these two functions in use.
> - The [https://github.com/WordPress/wordpress-
> develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/textcolor/plugin.js#L194
> text color picker] uses tooltips for each color name, without actual text
> (except for the `×` times symbol for 'No color').

New description:

 Related: #24766

 The WordPress script adds `title` attributes to the placeholder images for
 `style`, `script`, More and Next Page tags.

 - The [https://github.com/WordPress/wordpress-
 develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L119
 More tag] and [https://github.com/WordPress/wordpress-
 develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L128
 Next Page tag] have an empty `alt` but use a `title` attribute (like
 `alt="" title="Read more..."`). The title text theoretically could be
 assigned as the `alt`, though the tooltip could help in cases of low color
 contrast.
 - The [https://github.com/WordPress/wordpress-
 develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L217
 WP_More command] has a similar pattern for More and Next Page tags, but I
 did not find how—or if—that is used.
 - [https://github.com/WordPress/wordpress-
 develop/blob/0f2334da8111913a2a78c5000f27f791bb405f0f/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L142-L151
 Style and script tags] have redundant `title` attributes, matching their
 `alt` text (like `alt="<style>" title="<style>"`). However,
 the tooltip is the only way to distinguish these two placeholders visually
 (unless it's worth replacing the transparent GIF with something like a
 [https://gist.github.com/sabernhardt/8804da31aed02f0c535306bdb2749446
 text-based SVG]).

 Additional `title` attributes are in other (external) TinyMCE-related
 scripts:

 - The [https://github.com/WordPress/wordpress-
 develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/charmap/plugin.js#L1141
 character map plugin], which is designed for mouse users, has two title
 attributes for each character. The script [https://github.com/WordPress
 /wordpress-
 develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/charmap/plugin.js#L1186
 uses the `td` title later] for the larger preview on the side. Switching
 each 'button' div's title to an ARIA label might be a //small//
 improvement. (Note that the
 [https://github.com/tinymce/tinymce/blob/6d4d3b8fc862253bc756fdaca60254251fa45277/modules/tinymce/src/themes/silver/main/ts/ui/dialog/Collection.ts#L68
 latest charmap plugin] does not have titles anymore.)
 - `form_utils.js` has tooltips in [https://github.com/WordPress/wordpress-
 develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/utils/form_utils.js#L20-L21
 getColorPickerHTML()] and [https://github.com/WordPress/wordpress-
 develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/utils/form_utils.js#L58-L60
 getBrowserHTML()], but I did not find these two functions in use.
 - The [https://github.com/WordPress/wordpress-
 develop/blob/61b7b9713ef6a71126c3739a929ce604762de1bf/src/js/_enqueues/vendor/tinymce/plugins/textcolor/plugin.js#L194
 text color picker] uses tooltips for each color name, without actual text
 (except for the `×` times symbol for 'No color').

--

Comment (by joedolson):

 The PR tests fine; but I'm bothered by the fact that there's no
 distinction between the `script` img and the `style` image for sighted
 users now. The `title` attribute only provided assistance for some use
 cases, but it was *something*.

 If we added CSS generated content on the placeholder wrapper or override
 the background image on `.mce-object` we might be able to improve this.
 But I think being able to see that the replacement is for a `style` or a
 `script` tag is necessary.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62861#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform