Problem/Motivation

The media embed CKEditor widget doesn't provide an easy way to let authors embed an decorative image (with alt=""). It lets you specify your own instance-specific override, or accept the default alt text from the media entity.

This is a reasonable use-case. In particular, it will be good to support the "Image with adjacent text alternative" pattern from the WAI (Web Accessibilty Initiative) image tutorials.

It's possible to get alt="" by inserting a literal pair of quotes in the alt text input, but this isn't mentioned in the UI.

It's also possible to use CKEditor "show source" to manually edit the <drupal-media> tag, but that's (a) fiddly, and (b) fragile because later use of the UI dialog will over-write this.

These editorial tasks are all basically of equal importance, but the last one is difficult:

  • Use (or revert to) the previously-stored default text on the media entity.
  • Use an instance-specific override.
  • Use an instance-specific empty alt attribute.

Proposed resolution

TBD.

Remaining tasks

TBD.

User interface changes

TBD.

API changes

TBD.

Data model changes

None?

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Issue summary: View changes

Here's the brain-dump from a Slack conversation today. Use this to update the issue summary.

andrewmacpherson 2:50 PM
I think I've run into a restriction with embedded media filter (or widget, not sure which exactly). I can't figure out how to embed an image without a text alternative. It's like we are forcing authors to use the alt text from the media entity, or provide an instance-specific override. But for embedded media, it should be possible to embed an image with alt="". Am I missing some step?

I can achieve it if I jump through some hoops.
1. Embed an image media-item, add "foo" as the alt text.
2. Show source in CKEditor. The markup is: <drupal-media alt="foo" data-align="center" data-caption=" " data-entity-type="media" data-entity-uuid="78c82be9-06d9-46fb-871b-cbf03d47446b"></drupal-media>
3. Edit the markup to alt="", save it the node.Success, but I had to edit the source.

Luke Leber:speech_balloon: 2:56 PM
Is your media system set up to require the alt attribute?

andrewmacpherson 2:56 PM
In which config, exactly?

phenaproxima (he/him) 2:56 PM
@andrewmacpherson The embedded media dialog should allow you to set "" as the value in the alt text box, which will make it empty.

Luke Leber:speech_balloon: 2:56 PM
I believe it's in the media source image file field config on the media entity? (edited) 

phenaproxima (he/him) 2:57 PM
@wimleers (he/him) and @oknate can verify this

andrewmacpherson 2:57 PM
@phenaproxima (he/him) that's not discoverable.

phenaproxima (he/him) 2:57 PM
One sec

oknate 2:58 PM
you have to set it to two double quotes encoded

phenaproxima (he/him) 2:58 PM
@andrewmacpherson Hah — it actually will show up if you try to submit it with empty alt text.
@andrewmacpherson See EditorMediaDialog.php, line 140.
@andrewmacpherson It’s worth opening a quick issue to add it to the #description too.
It’s discoverable…by accident =P
I knew we had it somewhere in the dialog, I remember seeing it, but it’s a #required_error of the alt text field.
So…dang
That was dumb =P

oknate 2:59 PM
If you use the dialog and set it to “” it works too
not an empty string, but literally, two double quotes

phenaproxima (he/him) 3:00 PM
@oknate Right, but that’s not documented in the dialog unless you try to submit with no value in the alt field.

andrewmacpherson 3:00 PM
Another WTF. If I return to the content later, because I want to change the alignment, say, I open the media embed widget to change the alignment, it also restores the default alt text associated with the media entity. That's not what I wanted to edit. It seems that the editor widget enforces a value for the alt text.

oknate 3:00 PM
that’s if you set alt=‘’ (an empty string)
it will inherit the default
to set it to blank i.e. an alt tag without a value, it needs to be two double quotes (edited) 
phenaproxima (he/him) 3:01 PM
Right, the difference here is between alt="" and alt="&quot;&quot;", effectively

oknate 3:01 PM
yes

phenaproxima (he/him) 3:01 PM
The former will restore default alt text. The latter will remove the alt attribute from the embed.

oknate 3:01 PM
not exactly, we never remove the alt, for accessibility reasons (edited) 

phenaproxima (he/him) 3:01 PM
Sorry, it will set alt=""

oknate 3:01 PM
but it will set it to no value
<img alt />

phenaproxima (he/him) 3:01 PM
Right.
It will set that on the rendered media.
But the embed code will retain alt="&quot;&quot;", which should carry into the dialog too.

oknate 3:02 PM
it does

phenaproxima (he/him) 3:02 PM
@andrewmacpherson Clearly we have done a poor job of making this, well, clear in the UI. Definitely warrants an issue IMHO

andrewmacpherson 3:04 PM
The thing is, for ATAG, there should be a way for the user to get the default alt text. As in, they had an instance override, but now they want to go back to the default alt text from the media entity.
So there are some overlapping needs here.

oknate 3:04 PM
they just need to leave it blank in the dialog
the original alt text will be restored

andrewmacpherson 3:04 PM
yeah, but blank ought to mean alt=""

phenaproxima (he/him) 3:05 PM
In our implementation, "" means alt=""
And…this is how the image plugin already works

andrewmacpherson 3:05 PM
So there's some conflated behaviour here. Both operation (defaualt alt text, or empty alt text) are valid needs.

phenaproxima (he/him) 3:05 PM
We just copied an existing pattern in core
I am +1 for opening an issue to fix it in both places.

andrewmacpherson 3:07 PM
image widget is has different requirements though. It isn't from a media library, so it doesn't have default alt to override/restore.

phenaproxima (he/him) 3:08 PM
Right, but it copies the same general form patterns. For media, this is why we use a placeholder on the alt text field.
So that’s more “obvious”, at least in theory, that no value == default alt text

andrewmacpherson 3:15 PM
I'll file an issue. Anyone mind if I grab this conversation as the initial issue summary/brain-dump?

phenaproxima (he/him) 3:15 PM
@andrewmacpherson Please do.

wimleers (he/him) 3:17 PM
@phenaproxima (he/him) I actually pointed that out in a review that we broke the decorative image alt text discoverability  when we did the “inherit from media entity” thing
We copied the pattern from EditorImageDialog and that was fine. But then we added the automatic inheritance, and then we broke it.
We should keep the pattern, it was vetted years ago by a11y maintainers.
But we need to figure out how to combine that with the inheritance need.

phenaproxima (he/him) 3:20 PM
Do we classify this as a usability/AX issue, or an a11y issue? I would think the former, because there are workarounds. It’s just that the UX kinda sucks
Unless I am not understanding this

andrewmacpherson 3:25 PM
AX. I'm coming at this from ATAG part B: "Support the production of accessible content". The UI doesn't support authors who know that alt="" is what they need.

phenaproxima (he/him) 3:25 PM
+1. Please link me to the issue, @andrewmacpherson, when you have it. I’m going to add it to the roadmap as being in need of triage.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

xjm’s picture

Issue tags: +Usability

 

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

bkosborne’s picture

I know this seems to be targeted specifically at media embed in CKEditor, but this is borderline a duplicate of #2934405: [META] Improve workflows for image alternative text. I'll keep this open since the a11y maintainer opened it and I don't want to step on toes.

andrewmacpherson’s picture

Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs issue rescope
Parent issue: » #2934405: [META] Improve workflows for image alternative text

There are several open issues relating to the author tools for alt text, each trying different things. There are too many, and I fear we'll end up with something messy.

So I'd like to gather them under one parent, and take stock. Some will indeed turn out to be duplicates. Some others should be marked won't-fix, because they undermine the content model for existing sites.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

kristen pol’s picture

Issue tags: +Bug Smash Initiative

Tagging for the Bug Smash Initiative.

mgifford’s picture

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

yiyiSHAO’s picture

Status: Postponed (maintainer needs more info) » Postponed
Issue tags: +DrupalSouth 2024

Discussed this at drupalsouth with @larowlan, we found this should be postponed rather than postponed (maintainer needs more info)

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.