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

[WordPress Trac]

#62861: Consider removing title attributes from Classic Editor scripts
-----------------------------------------+------------------------------
 Reporter:  sabernhardt                  |       Owner:  (none)
     Type:  enhancement                  |      Status:  new
 Priority:  low                          |   Milestone:  Awaiting Review
Component:  TinyMCE                      |     Version:
 Severity:  normal                       |  Resolution:
 Keywords:  title-attribute 2nd-opinion  |     Focuses:  accessibility
-----------------------------------------+------------------------------
Description changed by sabernhardt:

Old description:

> 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.
> - `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.
 - `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').

--

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