Image empty alt attributes get stripped out when editing the image details from a post

[afercia]

When an image has a decorative purpose, it's extremely important for accessibility that the image has an empty alt attribute alt="". In absence of an empty alt attribute, assistive technologies won't assume the image is just decorative and will try to read out "something". In most of the cases they read out the image file path or part of it, i.e. the filename.

Turns out, when editing the details of an image inside a post, empty alt attributes get stripped out when updating the details.

Seems to me this is not specific to 4.7 but happens also in some of the previous versions, under different conditions. Worth reminding the alt attribute fallback to the title was recently removed, and this is one of the reasons for the different behaviour across different versions.

To reproduce in WordPress 4.7:

• edit a post
• insert an image with an empty alt attribute

The markup inserted in the post will be something like this:
<img class="alignnone size-full wp-image-3020" src="http://.../wp-content/uploads/2017/01/image.jpg" alt="" width="1200" height="800" />

• then click on the image and click on the "Edit" pencil icon in the inline image toolbar
• the "Image Details" modal opens
• change some image property, for example set the alignment to "right"
• click the "Update" button in the modal

The updated markup in the post will be:
<img class="alignright wp-image-3020 size-full" src="http://.../wp-content/uploads/2017/01/image.jpg" width="1200" height="800" />

To reproduce in WordPress 4.6 and 4.5:

• repeat all the steps above but make sure that also the "Title" of the image is empty. When both the title and the alt text fields are empty, the empty alt="" gets stripped out

WordPress 4.4:
Seems to me the empty alt attribute is always preserved, which is the correct behaviour.

[sami.keijonen]

I confirm this and can reproduce in WP 4.7.2.

[afercia]

I think it's because the wpeditimage TinyMCE plugin uses tinymce.dom.DOMUtils.setAttribs which just recursively calls tinymce.dom.DOMUtils.setAttrib which accepts 3 params, and about the value one:

Value to set on the attribute - if this value is falsy like null, 0 or "" it will remove the attribute instead.

So when wp.media passes an empty alt attribute, TinyMCE just strips it out. It makes sense to remove empty HTML attributes, with the notable exception of the alt attribute. While WordPress should ensure this doesn't happen and try to find a way to re-add the empty alt attribute when appropriate, maybe this should be reported upstream too.

[joemcgill]

Agreed. We should add an exception that allows alt attributes to remain with empty values since, otherwise, screen readers would read out the filename, which is often not preferred.

[afercia]

If I revert to [36984], that is before TinyMCE was updated to 4.3.8 this doesn't happen. Quickly looking at the TinyMCE changelog, the following change looks a bit suspect to me:

Version 4.3.8 (2016-03-15)
    ...
    Fixed so the alt attribute doesn't get padded with an empty value by default.

which, in combination with setAttrib() used in the wpeditimage plugin, maybe could explain the issue.

[afercia]

39912.diff​ could be a fix from the WordPress side. There are probably better ways to do this, not really a TinyMCE expert here :) Moving to 4.7.3 for consideration, since this is a pretty serious issue for accessibility.

[afercia]

Assigning to @iseulde for review, as agreed :)

[afercia]

Worth checking if getAttribs() and getAttrib() are used also in other places, e.g. captioned images.

[azaozz]

In 40110:

TinyMCE: preserve empty image alt attributes.

Props afercia.
Fixes #39912 for trunk.

[azaozz]

Reopen for 4.7.

[azaozz]

In 40112:

TinyMCE: preserve empty image alt attributes.

Props afercia.
Merges [40110] to the 4.7 branch.
Fixes #39912.