Featured image control improvements and alt text

[afercia]

The Featured image component could be improved a bit for accessibility. There are probably a few possible improvements:

• the text "Click the image to edit or update"
• keep or change the current Set/Remove button
• the image alt text

Regarding the text "Click the image to edit or update", I'd totally be in favour of re-considering it, but please let me explain why it was added. The featured image, once set, gets wrapped in a link. However, there was just a title attribute to communicate the action associated to the link. Title attributes work just on hover and may be ignored by screen readers, depending on the screen reader and also on the user verbosity settings.

For this reason, in https://core.trac.wordpress.org/changeset/36000 the title attribute was replaced with some visible text. The text is associated to the link using aria-describedby so screen readers announce it automatically when the link is focused.

If the text "Click the image to edit or update" is going to stay, at the very least it should be associated to the link in the same way, using aria-describedby (and so there's the need of a unique ID). Worth noting it's possible to hide this text: screen readers should announce elements targeted with aria-describedby even when they're hidden.

However, I'm wondering if the whole control could be improved, also visually. The new media widgets just introduced a new pattern: the Image widget uses four controls: Add/Edit/Replace/Delete that make the available actions self-explanatory. Maybe worth exploring a new design to communicate (in an accessible way) the image is clickable and the associated action.

Regarding the alt text:
in core, the featured image in the admin UI currently uses the image alt text (if set), otherwise an empty alt text. In Gutenberg instead, the image uses an hardcoded alt text: alt="Featured image". As far as I see, the returned media object contains an alt_text property. It would be great to pair the current behaviour with the core one and even improve it a bit. The key here is that the authoring context is different from the front-end. While editing, users need to know what the image is, and that's communicated by the image alt attribute. I'd propose to consider something like:
In the admin UI:

• if there's an alt_text, use that
• otherwise, use as fallback something like "Featured image: no alt text provided"
  Instead, on the front-end the featured image should respect the author's intent and use the image alt text (if set) or an empty alt="".

[afercia]

Re: this part, some design feedback would be greatly appreciated /cc @joen @melchoyce

I'm wondering if the whole control could be improved, also visually. The new media widgets just introduced a new pattern: the Image widget uses four controls: Add/Edit/Replace/Delete that make the available actions self-explanatory. Maybe worth exploring a new design to communicate (in an accessible way) the image is clickable and the associated action.

[mtias]

@jasmussen @karmatosed mind looking at this?

[karmatosed]

Will #2181 change this? Do we need to have this text by the featured image if we are showing once set in the post? @jasmussen I see some commits here, any of them close this or do we need to address still?

[jasmussen]

Sorry I missed the ping.

#3829 was my attempt at fixing this issue, and I believe I reached a point in that branch that made the featured image dropzone accessible (so it could close this ticket).

However as it turns out, the upstream Media widgets that inspired this design in WordPress aren't as accessible as they should be. And then the question becomes — do we align with WordPress upstream so it's consistent, but not as accessible as it could be (see discussion in https://core.trac.wordpress.org/ticket/34323)? Or do we break consistency and make it accessible in Gutenberg so we can close this ticket?

At this point I'm too tired of opinions blocking other opinions, that I'll honestly do what I'm told to do on this one ;)

[karmatosed]

@afercia do you have an opinion on this in light of what @jasmussen added? My own feelings are let's on this align with core - fixing there is totally something we'd fix in Gutenberg.

[afercia]

@karmatosed @jasmussen thanks for the ping. Not sure there's consistency in core to align with 🙂 For example:

In the customizer:
the header image placeholder is not clickable, just text (same for the header video). Then, there's a button to add a media.

In the media widgets (both in the customizer and widgets screen):
they use a clickable div, and a button too; clickable divs are really something to avoid, hope there's consensus on this.

I see what Joen's tried in #3829 as a good improvement that should be implemented in core too. At least, the placeholder is now a button:

being a button, it can be used with any device / browser / assistive technology. That would solve the a11y concerns and also the usability concerns expressed by @melchoyce: users tend to click the placeholder because it looks like a clickable thing. Well, then let's make it a button, so everyone can use it.

Note: In the initial state, maybe the second button could go away.

Changing the label from No image selected to Set featured image as Joen did makes sense to me, as the new label implies there's no image selected yet.

Also, when the featured image is set it's within a button so it's an UI control usable by everyone:

The name of the control is given by alt="Featured image", that should be improved a bit and I'd say it's something we can iterate on later. Overall, I'd recommend to merge Joen's improvements and then align core's implementation with Gutenberg.