Problem/Motivation

Media library doesn't require alt text for new media entities because of the UI flow.

Steps to reproduce issue

TBC

Expected behavior

After selecting the media entity, the user stays in the "Edit Entity" dialog window so that they can complete required alt text and other required fields.

What's happening instead

* After selecting the media entity, user gets redirected back to the content edit page
* User then has to then click the "Edit" button to add the required alt text for the image.
* If you skip this step and Save the content, the image will be saved without the required alt text.
* This makes the Media widget not accessible because alt text is required for images and multimedia per WCAG 1.1.1 Non-text Content (see https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)

Proposed resolution

* Once user clicks "Select image" button to add new media, they get redirected to the "Edit entity" dialog window with the entity's details including the required "Alternative text" field.
* They can't save the image without completing the required "Alternative text" field and other required fields, solving the issue.

Remaining tasks

* Create patch from proposed resolution
* Commit

Screenshots of current workflow

Select Media
Select media

Add New Image
Add new image

Content Edit
Content edit

Edit Entity Without Alt Text
Edit entity without alt text

Edit Entity With Alt Text
Edit entity with alt text

Screenshots of proposed workflow

Select Media
Select media

Add New Image
Add new image

Edit Entity Without Alt Text
Edit entity without alt text

Edit Entity With Alt Text
Edit entity with alt text

Content Edit
Content edit

Comments

jayhawkfan75 created an issue. See original summary.

katannshaw’s picture

Issue summary: View changes
katannshaw’s picture

Issue summary: View changes
katannshaw’s picture

luukyb’s picture

Issue summary: View changes
luukyb’s picture

Hi @jayhawkfan75,
I think we need define the exact steps to reproduce this. I am wondering if this issue is from Core or due to a contrib module like Media Library.

I used a brand new install of D8, and executed the following steps:

  • Enable the media module from core
  • In the default media type image, make sure the checkbox "Alt field required" is checked on: /admin/structure/media/manage/image/fields/media.image.field_media_image
  • In your content type, add a new field of type Media, field_media_image
  • On the edit page of your new field, select "Image" in media type

With just media from core, my media field was an autocomplete field (see screenshot 1). This means, you have to add media first using the media add form from core before you can use a media content . Adding the media using the core form (screenshot 2) brings up the Alt text, and it is required (screenshot 3).

In your screenshots, the upload of a new media image is done using a pop-up from the edit form of the node, I think this is coming from Media Library. Which leads me to think that this issue could be due to the Media Library module, letting your enable your content in your node without completing the Alt field (even if required).

Are you able to reproduce this issue without the Media Library module? Just using the media module from core.

Hope this helps,
Thanks,
Luc

Screenshot 1: The Media core field is autocomplete
Media core field is autocomplete

Screenshot 2: The media upload field in /media/add/image
The media upload field from core

Screenshot 3: Uploading the image in /media/add/image brings the alt field and is required
media-uploaded-file-with-alt

phenaproxima’s picture

Removing irrelevant tags.

This issue does not belong in core's issue queue; the screenshots in the issue summary are not coming from core's media library, which presents a completely different interface. This is from a contrib project, and I'm not sure which one, but it should not be kept in core's queue.

katannshaw’s picture

@phenaproxima: As noted in this article from Previous/Next, "Drupal 8.6 has shipped with the Media Library! It’s just one part of the latest round of improvements from the Media Initiative...". One of the last comments on May 3, 2019 mentions "Drupal 8.7.0 is available now, there are improvements in Media Library!" So I downloaded Drupal 8.7.3 and found Media Library in core when I navigated to core/modules/media_library.

With all of this I'm re-adding the issue tags Media Initiative and Triaged D8 critical. I'd really appreciate a response to my OP from a maintainer to see if this issue can be solved together. Thanks for everyone's hard work.

Kat

phenaproxima’s picture

@jayhawkfan75, the core Media Library module already requires alt text when uploading images. We have tests to prove it :) The screenshots in this issue look to me like they are of the Entity Browser module, not the core Media Library, so this is definitely not something that could be fixed in core, since it is not being provided by core, and therefore is by definition outside of the scope of the Media Initiative. So I understand the potential confusion, but unfortunately I need to remove that tag.

As for "Triaged D8 critical", that tag is reserved for issues with a "Critical" priority, which are considered so severe that they can actually block Drupal from being released. Critical status is usually assigned only by committers, and generally only refers to serious breakages that can result in data loss or security holes. So that tag doesn't quite fit for this issue. (It's not at all obvious that this is the case, of course, because the issue queue can be incredibly confusing.) So, to keep things organized, I need to remove that tag as well.

I'm happy to help sort out your problem to the best of my ability, but we should probably do it on Drupal Slack instead since, over that channel, it might be easier to communicate in real-time about what the trouble is and how to potentially address it. If you want to do that, my handle is phenaproxima. :)

phenaproxima’s picture

Also, I apologize if I seemed terse and annoyed in #7. That wasn't my intention at all (I was handling about 5 tasks at the time, so I didn't have time to type out a long response). So, I'm sorry if I came across that way! :)

marcoscano’s picture

Project: Drupal core » Entity Browser
Version: 8.8.x-dev » 8.x-2.x-dev
Component: media system » User interface
Category: Task » Support request
Priority: Major » Normal
Issue tags: -accessibility needs, -accessibility review, -Accessibility

From my experience, the screenshots above are indeed from Entity Browser, so I'm moving this to that issue queue. If we could get steps to reproduce on a fresh Drupal installation (with all other modules being used), we can try to check what configuration steps might be missing or how to tweak things. It is certainly possible to achieve the result, but the actions to get there will depend on the set of modules being used.

jwnardini’s picture

Using Entity Browser for WYSIWYG media image uploads, I ran into this issue. I think I might be able to point you toward a solution.

Check your widget forms at /admin/config/content/entity_browser/media/widgets
You are probably using "Upload images as media items" form. This doesn't have a required alt text field:
Upload images as media form settings

Here's what "Upload images as media items" form looks like after image uploaded:
Upload images as media form

Under "Add widget plugin" dropdown, instead of selecting "Upload images as media items", select "Entity form" widget plugin.
Entity form form settings

With this plugin, you can set media type, bundle, and form mode. In my case, I use "Media Library" form mode, which is the same form used on /media/add/image. This form should have alt text required (assuming you've configured this on the the image media bundle at /admin/structure/media/manage/image/fields), and you should see it in a new tab in your entity browser.
Entity form form

fjgarlin’s picture

Thanks for the workaround provided @jwnardini.

It would still be great if the "alt" property would be available when using the other widget, but at least there is a workaround.

thejimbirch’s picture

Thanks for the explanation @jwnardini! This helped us out today also.

lukus’s picture

Would be great to find a solution for this.

Seems that there was confusion about whether the solution was required for the media library or entity browser.

Now that we know the solution is required for the latter; would it be worth updating the text of the issue?

lukus’s picture

Title: Change UI flow to add alt text as requirement for new media library entities » Change UI flow to add alt text as requirement when media items are selected via an entity browser listing widget

Altered the title to reduce confusion re. how this requirement relates to entity browser. Hope this is okay with everyone; please let me know if not!

thejimbirch’s picture

To clarify, the excellent instructions in #12 require the Entity Browser IEF submodule to be enabled.

matthand’s picture

Still no clear way to expose the alt text using the Entity Browser when selecting from available assets. Current solution is to provide help text for how to click "edit" after selecting the image to add alt text.